Generated using d3-ez D3 Reusable Chart Library
Simple HTML UL/LI list. Note: THis is an example of using D3 to generate html rather than svg. Click on a the items to expand the tree.
Generated using d3-ez D3 Reusable Chart Library
Simple HTML UL/LI list. Note: THis is an example of using D3 to generate html rather than svg. Click on a the items to expand the tree.
<!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="http://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> |