# Overcoming difficulties with JSON data loading (or another mistake)

**URL:** <https://talk.observablehq.com/t/overcoming-difficulties-with-json-data-loading-or-another-mistake/688>\
**Category:** Help\
**Created:** [April 28, 2018, 10:58am UTC](https://talk.observablehq.com/t/overcoming-difficulties-with-json-data-loading-or-another-mistake/688 "2018-04-28T10:58:12Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [April 28, 2018, 3:00pm UTC](https://talk.observablehq.com/t/overcoming-difficulties-with-json-data-loading-or-another-mistake/688/2 "2018-04-28T15:00:23Z")

</div>

You’re loading D3 v4; in Observable you really want to use D3 v5, which replaces the callback-style API of [d3-request](https://github.com/d3/d3-request) with the promise-based API of [d3-fetch](https://github.com/d3/d3-fetch). (See [CHANGES](https://github.com/d3/d3/blob/master/CHANGES.md#changes-in-d3-50) for more.) Observable, and today’s JavaScript in general with `async` and `await`, have standardized on promises for asynchronous code.

So first, replace this:

```auto
d3 = require("https://d3js.org/d3.v4.min.js")

```

With this:

```auto
d3 = require("https://d3js.org/d3.v5.min.js")

```

(You might also use the non-minified d3.v5.js when developing for easier debugging.)

Then replace this callback:

```auto
d3.json("jsondata", function(error, root) {
  …
})

```

With either _promise_.then:

```auto
d3.json("jsondata").then(function(root) {
  …
})

```

Or `await`:

```auto
{
  const data = await d3.json("jsondata");
  …
}

```

And in Observable, if the value of a cell is a promise, then referencing that value from another cell will _implicitly_ await the promise, so the best approach is to say:

```auto
data = d3.json("jsondata")

```

See [Introduction to Promises](https://beta.observablehq.com/@mbostock/introduction-to-promises) for more on this topic.

But none of these examples will work yet 💢 , because per the [d3-fetch README](https://github.com/d3/d3-fetch/blob/master/README.md), the first argument to d3.json is a URL, not a name, and not a JSON object. The above cells are all looking for a file named “jsondata” relative to the notebook, and obviously [that file](https://beta.observablehq.com/@aaronkyle/jsondata) does not exist. And similarly, when you say:

```auto
d3.json({"name": "flare", "children": […]})

```

It’ll trying to load a file named “[object Object]”… and yeah, that’s not going to work. 😁

Per the [Introduction to Data](https://beta.observablehq.com/@mbostock/introduction-to-data) notebook, two currently-recommended approaches are to host your data on GitHub, say as a gist, or to inline the data directly in your notebook if it’s small. With the latter approach, that would simply be:

```auto
data = ({
  "name": "flare",
  "children": [
    …
  ]
})

```

Or, to load from GitHub, using one of my existing gists of the Flare dataset:

```auto
data = d3.json("https://gist.githubusercontent.com/mbostock/1093025/raw/b40b9fc5b53b40836ead8aa4b4a17d948b491126/flare.json")

```

We’ve even made a require-able version of this dataset for convenience:

```auto
data = require("@observablehq/flare")

```

You can browse our [example datasets on GitHub](https://github.com/observablehq/datasets).

---

_[View the full topic](https://talk.observablehq.com/t/overcoming-difficulties-with-json-data-loading-or-another-mistake/688)._