D3 Examples - d3-ez : HTML List Example

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
  <title>d3-ez : HTML List 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="listholder"></div>
  <br/>
  <div>Value: <span id="message"></span></div>
  
  <script type="text/javascript">
    // Generate some data
    var data = [{
      "key": "Plants",
      "values": [{
        "key": "Cryptogamia",
        "values": [{
          "key": "Thallophyta",
          "values": [{
            "key": "Bacteria",
            "value": 21
          }, {
            "key": "Algae",
            "value": 32
          }, {
            "key": "Fungi",
            "value": 43
          }, {
            "key": "Lichens",
            "value": 54
          }]
        }, {
          "key": "Bryophyta",
          "value": 23
        }, {
          "key": "Pteridophyta",
          "value": 34
        }]
      }, {
        "key": "Phanerogamia",
        "values": [{
          "key": "Gymnospermae",
          "value": 19
        }, {
          "key": "Angiospermae",
          "values": [{
            "key": "Monocots",
            "value": 34
          }, {
            "key": "Dicots",
            "value": 20
          }]
        }]
      }]
    }];
​
    // Create chart object
    var myList = d3.ez.component.htmlList()
      .classed("htmlList")
      .on("customValueMouseOver", function(d) {
        d3.select("#message").text(d.value);
      })
      .on("customSeriesClick", function(d) {
        console.log(d);
      });;
​
    // Add to page
    d3.select("#listholder")
      .datum(data)
      .call(myList);
  </script>
</body>
​
</html>
    