Old school D3 from simpler times

All examples By author By category About

jamesleesaunders

Full window Github gist

d3-ez : Punch Card Example

d3-ez : Punch Card Example

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="https://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>

https://d3js.org/d3.v5.min.js

https://raw.githack.com/jamesleesaunders/d3-ez/master/dist/d3-ez.js