Generated using d3-ez D3 Reusable Chart Library
Punch Cards can visualize cyclical trends in your data. This visualization shows circles representing a metric aggregated over two dimensions, such as hours of the day and days of the week. Using a punchcard, you can see relative values for a metric where the dimensions intersect.
FUNCTION: Distribution; Trend over time
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>d3-ez : Punch Card Example</title> | |
| <script src="https://d3js.org/d3.v5.min.js"></script> | |
| <script src="https://raw.githack.com/jamesleesaunders/d3-ez/master/dist/d3-ez.js"></script> | |
| <link rel="stylesheet" type="text/css" href="http://rawgit.com/jamesleesaunders/d3.ez/master/dist/d3-ez.css" /> | |
| </head> | |
| <body> | |
| <div id="chartholder"></div> | |
| <br/> | |
| <div>Value: <span id="message"></span></div> | |
| <script type="text/javascript"> | |
| // Generate some data | |
| var _randomNum = function() { | |
| return Math.floor(Math.random() * 20); | |
| }; | |
| var data = [{ | |
| key: "Apples", | |
| values: [{ | |
| key: "2004", | |
| value: _randomNum() | |
| }, { | |
| key: "2005", | |
| value: _randomNum() | |
| }, { | |
| key: "2006", | |
| value: _randomNum() | |
| }, { | |
| key: "2007", | |
| value: _randomNum() | |
| }, { | |
| key: "2008", | |
| value: _randomNum() | |
| }, { | |
| key: "2009", | |
| value: _randomNum() | |
| }, { | |
| key: "2010", | |
| value: _randomNum() | |
| }] | |
| }, { | |
| key: "Oranges", | |
| values: [{ | |
| key: "2004", | |
| value: _randomNum() | |
| }, { | |
| key: "2005", | |
| value: _randomNum() | |
| }, { | |
| key: "2006", | |
| value: _randomNum() | |
| }, { | |
| key: "2007", | |
| value: _randomNum() | |
| }, { | |
| key: "2008", | |
| value: _randomNum() | |
| }, { | |
| key: "2009", | |
| value: _randomNum() | |
| }, { | |
| key: "2010", | |
| value: _randomNum() | |
| }] | |
| }, { | |
| key: "Pears", | |
| values: [{ | |
| key: "2004", | |
| value: _randomNum() | |
| }, { | |
| key: "2005", | |
| value: _randomNum() | |
| }, { | |
| key: "2006", | |
| value: _randomNum() | |
| }, { | |
| key: "2007", | |
| value: _randomNum() | |
| }, { | |
| key: "2008", | |
| value: _randomNum() | |
| }, { | |
| key: "2009", | |
| value: _randomNum() | |
| }, { | |
| key: "2010", | |
| value: _randomNum() | |
| }] | |
| }, { | |
| key: "Kiwis", | |
| values: [{ | |
| key: "2004", | |
| value: _randomNum() | |
| }, { | |
| key: "2005", | |
| value: _randomNum() | |
| }, { | |
| key: "2006", | |
| value: _randomNum() | |
| }, { | |
| key: "2007", | |
| value: _randomNum() | |
| }, { | |
| key: "2008", | |
| value: _randomNum() | |
| }, { | |
| key: "2009", | |
| value: _randomNum() | |
| }, { | |
| key: "2010", | |
| value: _randomNum() | |
| }] | |
| }]; | |
| var chart = d3.ez.chart.punchCard(); | |
| var legend = d3.ez.component.legend().title("How small?"); | |
| var title = d3.ez.component.title().mainText("Punch Example").subText("PunchCard example sub-title"); | |
| // Create chart base | |
| var myChart = d3.ez.base() | |
| .width(750) | |
| .height(400) | |
| .chart(chart) | |
| .legend(legend) | |
| .title(title) | |
| .on("customValueMouseOver", function(d, i) { | |
| d3.select("#message").text(d.value); | |
| }); | |
| d3.select('#chartholder') | |
| .datum(data) | |
| .call(myChart); | |
| </script> | |
| </body> | |
| </html> |