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

Shawn Allen · Accepted Answer · 2012-04-09 17:50:21Z

13

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);
});

answered Apr 9, 2012 at 17:50

Shawn Allen

5,0342 gold badges19 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

eoin Over a year ago

Hi Shawn, thanks for getting back to me on this but I'm still pretty lost. I was looking to change the d3 calendar example from using data read from CSV file to use a JSON: mbostock.github.com/d3/ex/calendar.html

eoin Over a year ago

Hi Shawn, it took me a while to figure out(I'm juggling a non-programming day job with night school and teaching myself data viz & programming..) but you were right the key is to format the JSON with the d3.entries. That worked but else where in my code I forgot to match the year of my empty calendar frame with the year of my data.In other words my empty calendar was for 1999 and my JSON data was for 2000. Thanks for all your help & patience.

Matthew Murdoch · Accepted Answer · 2014-12-05 12:02:25Z

6

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'},
];

edited Dec 5, 2014 at 12:02

Matthew Murdoch

31.6k32 gold badges99 silver badges127 bronze badges

answered Apr 12, 2012 at 14:49

Ginny

691 bronze badge

1 Comment

circuitry Over a year ago

This sounds really hacky

Collectives™ on Stack Overflow

d3 - reading JSON data instead of CSV file

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related