JSFiddle - React, Tailwind, and code Playground

by ferlin_husky

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<body></body>

JavaScript

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

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