This example is code originally written by Mike Bostock in 2012 as part of his tutorial Towards Reusable Charts. Curran put together a bl.ock Towards Reusable Charts Example based on the post which I forked from to create this bl.ock and learn more about re-usable charts and a step forward to write Ladybug for web.
Here are some learning resources related to this example from Curran's bl.ock:
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Reusable Chart Example</title> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <script src="time-series-chart.js"></script> | |
| <style> | |
| .axis text { | |
| font: 10px sans-serif; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .line { | |
| fill: none; | |
| stroke: #000; | |
| stroke-width: 0.5px; | |
| } | |
| .area { | |
| fill: #ffbb8e; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p id="example"> | |
| <script> | |
| var chart = timeSeriesChart() | |
| .x(function(d) { return formatDate(d.dt); }) | |
| .y(function(d) { return +d.total; }) | |
| .width(940) | |
| .height(420) | |
| .margin({top: 40, right: 30, bottom: 20, left: 30}); | |
| var formatDate = d3.time.format("%Y-%m-%d %I:00:00").parse; | |
| d3.json("interactions.json", function(error, data) { | |
| data.forEach(function(d){ | |
| // calculate total interactions | |
| d['total'] = d.reps + d.cmnts + d.dscs; | |
| }); | |
| d3.select("#example") | |
| .datum(data) | |
| .call(chart); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
(Sorry about that, but we can’t show files that are this big right now.)
