Skip to content

Instantly share code, notes, and snippets.

@pachadotdev

pachadotdev/index.html

Created February 12, 2019 18:56
Show Gist options
  • Save pachadotdev/c140bebe38e580478a2c0c52b47ee40f to your computer and use it in GitHub Desktop.
Save pachadotdev/c140bebe38e580478a2c0c52b47ee40f to your computer and use it in GitHub Desktop.
Download ZIP
d3plus v2 treemap with v1 styles
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3plus.org/js/d3plus-hierarchy.v0.8.full.min.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body></body>
<script>
var data = [
{parent: "Fruit", id: "mango", value: 29, image: "https://datausa.io/static/img/attrs/thing_apple.png"},
{parent: "Fruit", id: "orange", value: 10, image: "https://datausa.io/static/img/attrs/thing_apple.png"},
{parent: "Fruit", id: "pear", value: 2, image: "https://datausa.io/static/img/attrs/thing_apple.png"},
{parent: "Fish", id: "tuna", value: 29, image: "https://datausa.io/static/img/attrs/thing_fish.png"},
{parent: "Fish", id: "salmon", value: 25, image: "https://datausa.io/static/img/attrs/thing_fish.png"}
];
new d3plus.Treemap()
.data(data)
.groupBy(["parent", "id"])
.sum("value")
.legendConfig({
shapeConfig: {
width: 30,
height: 30,
backgroundImage: function(d) { return d.image; }
},
label: false
})
.tooltipConfig({
body: function(d) {
var table = "<table class='tooltip-table'>";
table += "<tr><td class='title'>Parent:</td><td class='data'>" + d.parent + "</td></tr>";
table += "<tr><td class='title'>Value:</td><td class='data'>" + d.value + "</td></tr>";
table += "</table>";
return table;
},
footer: function(d) {
return "<sub class='tooltip-footer'>This is just an example</sub>";
},
title: function(d) {
var txt = d.id;
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();;
}
})
.render();
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment