Built with blockbuilder.org
StackOverflow question
Answer based off Vega treemap example
license: mit |
Built with blockbuilder.org
StackOverflow question
Answer based off Vega treemap example
<!DOCTYPE html> | |
<html> | |
<head> | |
<!-- Import Vega 3 & Vega-Lite 2 js (does not have to be from cdn) --> | |
<script src="https://unpkg.com/d3"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.0-rc4/vega-core.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-beta.10/vega-lite.min.js"></script> | |
<!-- Import vega-embed --> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-beta.19/vega-embed.min.js"></script> | |
</head> | |
<body> | |
<div id="vis"></div> | |
<script type="text/javascript"> d3.json("https://gist.githubusercontent.com/mbostock/1093025/raw/490fffd1ae637d3275aa9eaa8b0487147717dd40/flare.json", function(error,data) { | |
var flare_tm = d3.treemap().size([960,500])(d3.hierarchy(data).sum(d=>d.size)) | |
var spec = { | |
"$schema": "https://vega.github.io/schema/vega/v3.0.json", | |
"width": 960, | |
"height": 500, | |
"padding": 2.5, | |
"autosize": "none", | |
"data": [ | |
{ | |
"name": "nodes", | |
"values": flare_tm.descendants().filter(d=>d.depth===1) | |
}, | |
{ | |
"name": "leaves", | |
"values": flare_tm.leaves() | |
} | |
], | |
"scales": [ | |
{ | |
"name": "color", | |
"type": "ordinal", | |
"range": [ | |
"#3182bd", "#6baed6", "#9ecae1", "#c6dbef", "#e6550d", | |
"#fd8d3c", "#fdae6b", "#fdd0a2", "#31a354", "#74c476", | |
"#a1d99b", "#c7e9c0", "#756bb1", "#9e9ac8", "#bcbddc", | |
"#dadaeb", "#636363", "#969696", "#bdbdbd", "#d9d9d9" | |
] | |
}, | |
{ | |
"name": "size", | |
"type": "ordinal", | |
"domain": [0, 1, 2, 3], | |
"range": [256, 28, 20, 14] | |
}, | |
{ | |
"name": "opacity", | |
"type": "ordinal", | |
"domain": [0, 1, 2, 3], | |
"range": [0.15, 0.5, 0.8, 1.0] | |
} | |
], | |
"marks": [ | |
{ | |
"type": "rect", | |
"from": {"data": "nodes"}, | |
"interactive": false, | |
"encode": { | |
"enter": { | |
"fill": {"scale": "color", "field": "data.name"} | |
}, | |
"update": { | |
"x": {"field": "x0"}, | |
"y": {"field": "y0"}, | |
"x2": {"field": "x1"}, | |
"y2": {"field": "y1"} | |
} | |
} | |
}, | |
{ | |
"type": "rect", | |
"from": {"data": "leaves"}, | |
"encode": { | |
"enter": { | |
"stroke": {"value": "#fff"} | |
}, | |
"update": { | |
"x": {"field": "x0"}, | |
"y": {"field": "y0"}, | |
"x2": {"field": "x1"}, | |
"y2": {"field": "y1"}, | |
"fill": {"value": "transparent"} | |
}, | |
"hover": { | |
"fill": {"value": "red"} | |
} | |
} | |
}, | |
{ | |
"type": "text", | |
"from": {"data": "nodes"}, | |
"interactive": false, | |
"encode": { | |
"enter": { | |
"font": {"value": "Helvetica Neue, Arial"}, | |
"align": {"value": "center"}, | |
"baseline": {"value": "middle"}, | |
"fill": {"value": "#000"}, | |
"text": {"field": "data.name"}, | |
"fontSize": {"scale": "size", "field": "depth"}, | |
"fillOpacity": {"scale": "opacity", "field": "depth"} | |
}, | |
"update": { | |
"x": {"signal": "0.5 * (datum.x0 + datum.x1)"}, | |
"y": {"signal": "0.5 * (datum.y0 + datum.y1)"} | |
} | |
} | |
} | |
] | |
} | |
vega.embed('#vis', spec, {'renderer':'svg'}); | |
}) | |
</script> | |
</body> | |
</html> |