d3 - reading JSON data instead of CSV file

Question

I'm trying to read data into my calendar visualisation using JSON. At the moment it works great using a CSV file:

d3.csv("RSAtest.csv", function(csv) {   var data = d3.nest()     .key(function(d) { return d.date; })     .rollup(function(d) { return d[0].total; })     .map(csv);   rect.filter(function(d) { return d in data; })       .attr("class", function(d) { return "day q" + color(data[d]) + "-9"; })       .select("title")       .text(function(d) { return d + ": " + data[d]; });  }); 

It reads the following CSV data:

date,total 2000-01-01,11 2000-01-02,13 . . .etc 

Any pointers on how I can read the following JSON data instead: {"2000-01-01":19,"2000-01-02":11......etc}

I tried the following but it not working for me (datareadCal.php spits out the JSON for me):

d3.json("datareadCal.php", function(json) {   var data = d3.nest()     .key(function(d) { return d.Key; })     .rollup(function(d) { return d[0].Value; })     .map(json);  

thanks

Answer 1

You can use d3.entries() to turn an object literal into an array of key/value pairs:

var countsByDate = {'2000-01-01': 10, ...}; var dateCounts = d3.entries(countsByDate); console.log(JSON.stringify(dateCounts[0])); // {"key": "2000-01-01", "value": 10} 

One thing you'll notice, though, is that the resulting array isn't properly sorted. You can sort them by key ascending like so:

dateCounts = dateCounts.sort(function(a, b) {     return d3.ascending(a.key, b.key); }); 

Answer 2

Turn your .json file into a .js file that is included in your html file. Inside your .js file have:

var countsByDate = {'2000-01-01':10,...}; 

Then you can reference countsByDate....no need to read from a file per se.

And you can read it with:

var data = d3.nest() .key(function(d) { return d.Key; })           .entries(json);        

As an aside....d3.js says it's better to set your json up as:

var countsByDate = [   {Date: '2000-01-01', Total: '10'},   {Date: '2000-01-02', Total: '11'}, ];