Loading D3.js data from a simple JSON string

Question

Most of the examples in gallery load data from TSV files.

How can I convert the following to use a local json variable instead of TSV data?

d3.tsv("data.tsv", function(error, data) {

    var myEntitiesJson = getEntitiesJson(); // <------ use this instead of "data"
    data.forEach(function(d) {
        d.frequency = +d.frequency;
    });

    x.domain(data.map(function(d) { return d.letter; }));
    y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

    ...

    svg.selectAll(".bar")
        .data(data)     // <----- bind to myEntities instead
}

As far as I can tell, I just need to do something to my entitiesJson, in order to data-fy it so that the chart could bind to it.

UPDATE

I am making some progress. I plugged in my entities from JSON and the graph is starting to take new shape.

Currently the following code breaks:

svg.selectAll(".bar")
    .data(myEntities)  // <-- this is an array of objects
    .enter().append("rect")

This is causing:

Error: Invalid value for attribute y="NaN"

Error: Invalid value for attribute height="NaN"

Answer 1

for remote data.json replace :

d3.tsv("data.tsv", function(error, data) {...}

with :

d3.json("data.json", function(error, data) {
    console.log(data); // this is your data
});

for local data:

var myData = { {date:'2013-05-01', frequency:99},
               {date:'2013-05-02', frequency:24} };

function draw(data) {
    console.log(data); // this is your data
}

draw(myData);

Answer 2

There isn't a simple way to data-fy any given json, because not all json objects are the same shape.

By shape, I mean the way that the data is organized. For example, both '{"foo" : 1, "bar" : 2}' and '{"names" : ["foo", "bar"], "values" : [1, 2]}' could be used to store the same data, but one stores everything in an object in which the object keys correspond to the names of data points, and one uses separate arrays to store names and values, with corresponding entries having a common array index.

There is, however, a general process you can go through to turn json into data. First, you'll need to parse your json. This can be done with the javascript-standard JSON object. USe JSON.parse(myJson) to obtain data from your json object if it's already uploaded to the client. d3.json(my/json/directory, fn(){}) can both load and parse your json, so if you're loading it from elsewhere on your server, this might be a better way to get the json into an object.

Once you have your json packed into a javascript object, you still need to data-fy it, which is the part that will depend on your data. What d3 is going it expect is some form of array: [dataPoint1, dataPoint2, ...]. For the two examples I gave above, the array you would want would look something like this:

[{'name' : 'foo', 'value' : 1}, {'name' : 'bar', 'value' : 2}]

I've got one element in my array for each data point, with two attributes: value and name. (In your example, you would want the attributes letter and frequency)

For each of my examples, I would use a different function to create the array. With this line in common:

var rawData = JSON.parse(myJson);

My first json could be packed with this function:

var key;
var data = [];

for(key in rawData){
    if(rawData.hasOwnProperty(key)){
        data.push({'name' : key, 'value' : rawData[key]});
    }
}

For the second example, I would want to loop through each attribute of my object, names, and values. My code might look like this:

var i;
var data = [];

for(i = 0; i < rawData.names.length; i++){
    data.push({'name' : rawData.names[i], 'value' : rawData.values[i]});
}

Both of these will yield a data-fied version of my original JSON that I can then use in d3.

Answer 3

For D3js v2 or v3 (not sure which one).

Declare your dataset

var dataset = { 
    "first-name": "Stack",
    "last-name": "Overflow",
}; // JSON object
var dataset = [ 5, 10, 15, 20, 25 ]; // or array

As stated by the doc, you can use either:

an array of numbers or objects, or a function that returns an array of values

Bind it

d3.select("body").selectAll("p")
    .data(dataset)
    .enter()
    .append("p")
    .text("New paragraph!");

More explanation at Scott Murray's D3's tutorial#Binding data.

The data() function apply to a selection, more information can be found in the official documentation: selection.data([values[, key]]).

Answer 4

You can change the json into a javascript file that assigns the data to a global value. Taking https://bl.ocks.org/d3noob/5028304 as an example:

From:

<script>
.....
// load the data
d3.json("sankeygreenhouse.json", function(error, graph) {

    var nodeMap = {};
    graph.nodes.forEach(function(x) { nodeMap[x.name] = x; });

To:

<script src="graphData.js"></script>
<script>
.....
    var nodeMap = {};
    graph.nodes.forEach(function(x) { nodeMap[x.name] = x; });

Note that we've removed the need for the callback.

The json file was "sankeygreenhouse.json":

{
"links": [
  {"source":"Agricultural Energy Use","target":"Carbon Dioxide","value":"1.4"},

Now, in "graphData.js":

var graph = {
   "links": [
      {"source":"Agricultural Energy Use","target":"Carbon Dioxide","value":"1.4"},

Answer 5

Just change data to an array of objects like this:

let data = [{"apples":53245,"oranges":200},{"apples":28479,"oranges":200},{"apples":19697,"oranges":200},{"apples":24037,"oranges":200},{"apples":40245,"oranges":200}]

and comment out the d3.tsv("data.tsv", function(error, data) {...

Answer 6

Why not simply transform your json to tsv as described by Rob here?

d3 expects the data or, said in another way, needs the data in a particular format: tsv.The easiest way to resolve your problem is simply formatting your data from json to tsv, which can be done easily using Rob's comments.