D3 Examples - d3-ez : HTML Table Example

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
  <title>d3-ez : HTML Table 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="tableholder"></div>
  <br/>
  <div>Value: <span id="message"></span></div>
  
  <script type="text/javascript">
​
    d3.json("uk_elections.json").then(function(data) {
      // UK Election Results Source: https://www.ukpolitical.info/2015.htm
​
      // Create chart object
      var myTable = d3.ez.component.htmlTable()
        .width(600)
        .on("customValueMouseOver", function(d) {
          d3.select("#message").text(d.value);
        })
        .on("customSeriesClick", function(d) {
           console.log(d);
        });
​
      // Add to page
      d3.select("#tableholder")
        .datum(data)
        .call(myTable);
    });
  </script>
</body>
​
</html>
    