d3-ez : HTML Table Example

Generated using d3-ez D3 Reusable Chart Library

Data Source: http://www.ukpolitical.info/2015.htm

<!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>

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

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