Nested JSON not working in d3.js - json

Question

I am using nested JSON file in my data visualization using d3.js. I was referring to a previous Smilar Queastion. I created a jsfiddle of the answer of the question to see whether things are working. But i am confused why the code is not working. I have similar type of problem in my project. How can i solve that. Here is sample code I am using for printing the data in the form of a list
d3.select("body").append("ul").selectAll("li")
.data(data).enter().append("li").each(function() {
var li = d3.select(this);
li.append("p")
.text(function(d) { return d.date; });
li.append("ul").selectAll("li")
.data(function(d) { return d.hours; }) // second level data-join
.enter().append("li")
.text(function(d) { return d.hour + ": " + d.hits; });
});

Answer 1

It looks like the JSON wasn't formed correctly. I fixed the JSON like this -
var data=[{ "date": "20120927",
"hours": [
{ "hour": 0, "hits": 823896 },
{ "hour": 1, "hits": 654335 },
{ "hour": 2, "hits": 548812 },
{ "hour": 3, "hits": 512863 },
{ "hour": 4, "hits": 500639 }
],
"totalHits": "32,870,234",
"maxHits": "2,119,767",
"maxHour": 12,
"minHits": "553,821",
"minHour": 3 },
{ "date": "20120928",
"hours": [
{ "hour": 0, "hits": 1235923 },
{ "hour": 1, "hits": 654335 },
{ "hour": 2, "hits": 1103849 },
{ "hour": 3, "hits": 512863 },
{ "hour": 4, "hits": 488506 }
],
"totalHits": "32,870,234",
"maxHits": "2,119,767",
"maxHour": 12,
"minHits": "553,821",
"minHour": 3 }];
Also, I think there was a problem with the HTTP d3.js library not being loaded. I added an external HTTPS reference and it is working.
Here is a working version of your fiddle - https://jsfiddle.net/ferlin_husky/wzuvob6m/