Where is the data coming from?

1

Hello! I am still relatively new to JS, and definitely new to Obeservable. I have done some d3 as well.

I am pretty sure I am missing something insanely obvious…in fact I know I must be, but I was looking through the code for this:

https://beta.observablehq.com/@mbostock/d3-sunburst

and while I understand the gist of it, I am struggling to find where the data that populates it is actually come from (dumb right?) I found the data variable but I wanted to see its formatting in case I ever wanted to create something similar once I get a better footing in d3 and js.

Thanks!

2

Hi Katy! Yes, this notebook is using one of our example datasets that are designed to work with require from the standard library. You can see the source code for this dataset on GitHub:

This is known as an asynchronous module definition, or AMD. So this:

data = require("@observablehq/flare")

Is roughly equivalent to putting a big ol’ object literal in your notebook:

data = ({
  "name": "flare",
  "children": [
    {
      "name": "analytics",
      "children": [
        {
          "name": "cluster",
          "children": [
            {
              "name": "AgglomerativeCluster",
              "size": 3938
            },
            {
              "name": "CommunityStructure",
              "size": 3812
            },
… etc. …

The example datasets are designed for convenience using require, but it’s a little nonstandard. A more conventional way of loading this dataset would be using JSON and the Fetch API. That would look like this:

data = fetch("https://raw.githubusercontent.com/d3/d3-hierarchy/v1.1.8/test/data/flare.json").then(response => response.json())

I’m considering switching our example datasets to use standard files (CSV, JSON) rather than AMD to be more standard, even if that means it’ll take more ceremony (fetch, d3.csv, etc.) to load them.

2 Likes
3

Hi Mike! Thank you so much, that is very helpful. Does using a AMD help reduce processing time, or created some added efficiency in a file?

I will keep exploring this and will probably be back with more questions later!