examples/Showcase.html

<!DOCTYPE html>
<html>

  <head>
    <title>d3-ez : Showcase</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="../dist/d3-ez.js"></script>
    <link rel="stylesheet" type="text/css" href="../dist/d3-ez.css" />
  </head>

  <body>
    <div id="chartholder1"></div>
    <svg id="chartholder2" width="300" height="300"></svg>

    <script src="data/random_data.js"></script>
    <script type="text/javascript">
      // Generate some sample data
      var data = randomDataset2();

      var rowKeys = ["Apples", "Oranges", "Pears", "Bananas", "Kiwis"];
      var columnKeys = ["UK", "France", "Spain", "Germany", "Italy", "Portugal"];
      var colors = ["#D34152", "#f4bc71", "#FBF6C4", "#9bcf95", "#398abb"];

      var xScale = d3.scaleBand()
        .domain(columnKeys)
        .range([0, 300]);

      var yScale = d3.scaleLinear()
        .domain([0, 10])
        .range([300, 0]);

      var colorScale = d3.scaleOrdinal()
        .domain(rowKeys)
        .range(colors);

      // Functions to add charts to page and update charts
      function update1(data) {
        var htmlTable = d3.ez.component.htmlTable()
          .on("customSeriesMouseOver", function(e, d) {
            update2(d);
          });

        d3.select("#chartholder1")
          .datum(data)
          .call(htmlTable);
      }

      function update2(data) {
        var barsVertical = d3.ez.component.barsVertical()
          .xScale(xScale)
          .yScale(yScale)
          .colorScale(colorScale)
          .transition({ ease: d3.easeBounce, duration: 500 })
          .on("customValueClick", function(e, d) {
            console.log(d);
          });

        d3.select("#chartholder2")
          .datum(data)
          .call(barsVertical);
      }

      update1(data);    // htmlTable
      update2(data[0]); // verticalBar

    </script>
  </body>

</html>