d3-ez : Showcase

Generated using d3-ez D3 Reusable Chart Library

Click on graphs to interact.

<!DOCTYPE html>
<html>

<head>
  <title>d3-ez : Showcase</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>

// Setup chart components
    myChart1 = d3.ez.component.htmlTable()
      .width(400)
      .on("customSeriesClick", function(d) {
        update5(data);
        update2(d);
        update3(d);
        update4(d);
      });

myChart2 = d3.ez.chart.barChartVertical()
      .width(400)
      .height(200)
      .on("customValueMouseOver", function(d) {
        console.log(d);
      });

myChart3 = d3.ez.chart.donutChart()
      .width(400)
      .height(200)
      .innerRadius(40);

myChart4 = d3.ez.chart.polarAreaChart()
      .width(400)
      .height(200);

myChart5 = d3.ez.chart.barChartClustered()
      .width(400)
      .height(200)
      .yAxisLabel("Fruit")
      .on("customSeriesClick", function(d) {
        update2(d);
        update3(d);
        update4(d);
      });

myChart6 = d3.ez.chart.heatMapRadial()
      .width(400)
      .height(200)
      .innerRadius(5);

myChart7 = d3.ez.chart.heatMapTable()
      .width(400)
      .height(200);

myChart8 = d3.ez.chart.punchCard()
      .width(400)
      .height(200)
      .minRadius(2)
      .useGlobalScale(true)
      .maxRadius(18)
      .on("customValueMouseOver", function(d) {
        console.log(d);
      });

// Functions to add charts to page and update charts
    function update1(data) {
      // htmlTable
      d3.select("#chartholder1")
        .datum(data)
        .call(myChart1);
    }

function update2(data) {
      // barClustered
      d3.select("#chartholder2")
        .datum(data)
        .call(myChart2);
    }

function update3(data) {
      // barVertical
      d3.select("#chartholder3")
        .datum(data)
        .call(myChart3);
    }

function update4(data) {
      // donutChart
      d3.select("#chartholder4")
        .datum(data)
        .call(myChart4);
    }

function update5(data) {
      // polarArea
      d3.select("#chartholder5")
        .datum(data)
        .call(myChart5);
    }

function update6(data) {
      // heatMapRadial
      d3.select("#chartholder6")
        .datum(data)
        .call(myChart6);
    }

function update7(data) {
      // heatMapTable
      d3.select("#chartholder7")
        .datum(data)
        .call(myChart7);
    }

function update8(data) {
      // punchCard
      d3.select("#chartholder8")
        .datum(data)
        .call(myChart8);
    }

update1(data);    // htmlTable
    update2(data[0]); // verticalBar
    update3(data[0]); // donutChart
    update4(data[0]); // polarArea
    update5(data);    // barClustered
    update6(data);    // heatMapRadial
    update7(data);    // heatMapTable
    update8(data);    // punchCard
  </script>
</body>

</html>

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

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