Master's student, developer, designer. :)
Published
Edited
Feb 20, 2020
chart = {
const svg = d3.select(DOM.svg(width, height))
const g = svg
.attr("viewBox", [0, 0, width - (margin * 2), height - (margin * 2)])
const d = svg.selectAll("g")
.data(nodes.leaves())
.join("g")
.attr("transform", d => { return `translate(${d.x0},${d.y0})`})
d.append("rect")
.attr("id", (d) => d.data.brand)
.attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.brand); })
.attr("fill-opacity", 0.6)
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0);
d.append("text")
.attr("x", 2)
.attr("y", 10)
.style("font-size", 5)
.text(d => d.data.brand);
return svg.node();
}
nodes = treemap(root)
root = data
treemap = data => d3.treemap()
.size([width, height])
.padding(0)
.round(false)
(d3.hierarchy(data)
.sum(d => d.size)
.sort((a, b) => b.size - a.size))
color = d3.scaleOrdinal(d3.schemeCategory10)
data = d3.json('https://gist.githubusercontent.com/marialuisacp/3c0802f410ff76edb677c8285d953658/raw/113e0fe602e82647b24b7062ef96ee0143138b15/data.json')
margin = 20
height = 500
d3 = require("d3@5")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
