D3.js - How to use inline JSON as dataset for D3 charts, instead of csv/tsv/json file

Question

I'm implementing D3.js charts in my application, I don't want to use file as dataset, I just want to use inline JSON as dataset (JSON would be generated dynamically in application).

I have done implementation for Reusable Responsive Multiline Chart using following code.

var data1 = [ { "My JSON data here" } ];

d3.json('', function (error, data) {

    data1.forEach(function (d) {
        d.year = +d.year;
        d.variableA = +d.variableA;
        d.variableB = +d.variableB;
        d.variableC = +d.variableC;
        d.Temp = +d.Temp;
    });

    var chart = makeLineChart(data1, 'year', {
        'Device 1': { column: 'variableA' },
        'Device 2': { column: 'variableB' },
        'Device 3': { column: 'variableC' },
        'Device 4': { column: 'variableD' }
    }, { xAxis: 'Years', yAxis: 'Temperature' });
    chart.bind("#chart-line1");
    chart.render();
});

Here I'm calling d3.json() but file name is blank and also there is no use of data in code. Instead of 'data' I'm using 'data1'. It works perfect ...

Now I want to achieve the same for Grouped Bar Chart, but this chart data binding method is different than "Reusable Responsive Multiline Chart". Following is the code to parse data for "Grouped Bar Chart".

d3.csv("\data.csv", function(d, i, columns) {
  for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]];
  return d;
}, function(error, data) {
  if (error) throw error;

  var keys = data.columns.slice(1); 

  // Rest of code to bind parsed data to chart   
});

Complete code at Grouped Bar Chart

So how I can replace data.csv with inline JSON here.

Mark · Accepted Answer

The methods d3.json and d3.csv are AJAX calls meant to fetch data from the server. If you have in-line JSON, you do not need these calls. The fact that your first example works like that is just a side-effect. Your d3.json call fails but the call-back function is still executed. It's just un-necessary and should be written as:

var data1 = [ { "My JSON data here" } ];

data1.forEach(function (d) {
    d.year = +d.year;
    d.variableA = +d.variableA;
    d.variableB = +d.variableB;
    d.variableC = +d.variableC;
    d.Temp = +d.Temp;
});

var chart = makeLineChart(data1, 'year', {
    'Device 1': { column: 'variableA' },
    'Device 2': { column: 'variableB' },
    'Device 3': { column: 'variableC' },
    'Device 4': { column: 'variableD' }
}, { xAxis: 'Years', yAxis: 'Temperature' });
chart.bind("#chart-line1");
chart.render();

On your second chart again the call to d3.csv is not necessary. There is however some processing that happens from the CSV format to JSON. You'll need to replicate that in creating your JSON and for the rest of the chart to work you'll need something like:

...

var z = d3.scaleOrdinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var data = [{"State":"CA","Under 5 Years":2704659,"5 to 13 Years":4499890,"14 to 17 Years":2159981,"18 to 24 Years":3853788,"25 to 44 Years":10604510,"45 to 64 Years":8819342,"65 Years and Over":4114496},{"State":"TX","Under 5 Years":2027307,"5 to 13 Years":3277946,"14 to 17 Years":1420518,"18 to 24 Years":2454721,"25 to 44 Years":7017731,"45 to 64 Years":5656528,"65 Years and Over":2472223}];

var keys = ["Under 5 Years", "5 to 13 Years", "14 to 17 Years", "18 to 24 Years", "25 to 44 Years", "45 to 64 Years", "65 Years and Over"]

x0.domain(data.map(function(d) { return d.State; }));
x1.domain(keys).rangeRound([0, x0.bandwidth()]);

...

Here's that code running without the call to d3.csv:

D3.js - How to use inline JSON as dataset for D3 charts, instead of csv/tsv/json file

Answers (1)

Related Questions