Data Visualization Specialist | Previously
@WashingtonPost @WallStreetJournal @MITSenseableCity
{
const svg = d3.create("svg").attr("width", width).attr("height", height);
///////// Region /////////
svg
.selectAll("region")
.data(root.children)
.join("text")
.attr("class", "region")
.attr("x", (d) => d.x0)
.attr("y", (d) => d.y0 + 2)
.attr("dy", "0.6em")
.attr("dx", 3)
.text((d) => d.data.name);
///////// Leaf /////////
const leaf = svg
.selectAll("g")
.data(root.leaves())
.join("g")
.attr("transform", (d) => `translate(${d.x0},${d.y0})`);
// Rects
leaf
.append("rect")
.attr("width", (d) => d.x1 - d.x0)
.attr("height", (d) => d.y1 - d.y0)
.attr("fill", (d) => colorScale(d.parent.data.name))
.style("fill-opacity", 0.9)
.attr("rx", 3)
.attr("ry", 3);
// Text
leaf
.append("text")
.style("opacity", (d) => (d.x1 - d.x0 < 33 || d.y1 - d.y0 < 25 ? 0 : 1))
.attr("fill", (d) => (d.parent.data.name === "asia" ? "#fff" : "#111"))
.selectAll("tspan")
.data(
(d) => d.data.name.split(/(?=[A-Z][a-z])|\s+/g)
// d.data.name.split(/(?=[A-Z][a-z])|\s+/g).concat(format(d.value))
)
.join("tspan")
.attr("x", 3)
.attr("y", (d, i) => 13 * i + 13)
.text((d) => d)
.attr("class", "text");
return svg.node();
}
// colorScale = d3.scaleOrdinal(d3.schemeSet3)
colorScale = d3
.scaleOrdinal()
.domain(root.children.map((d) => d.data.name))
.range(["#8160C8", "#CDC0E4", "#FFA602", "#d3d3d3"])
root.leaves()
root.children
root = treemap(hierarchicalData) // hierarchy
treemap = d3
.treemap()
.size([width, height])
.padding(2)
.paddingTop(16)
.paddingBottom(9)
.paddingLeft(3)
.paddingRight(3)
.round(true)
height = 630
hierarchicalData = stratify(data.concat(rootData))
.sum((d) => d.Population)
.sort((a, b) => b.value - a.value)
stratify = d3
.stratify()
.id((d) => d.name)
.parentId((d) => d.region)
data.concat(rootData)
rootData = [
{ name: "world", region: "" },
{ name: "asia", region: "world" },
{ name: "europe", region: "world" },
{ name: "americas", region: "world" },
{ name: "africa", region: "world" }
]
data = population.map((d) => {
d.region = region.find((r) => r.name === d.name).four_regions;
return d;
})
region = d3.csvParse(
await FileAttachment("gapminder_region.csv").text(),
d3.autoType
)
population = d3
.csvParse(
await FileAttachment("gapminder_population.csv").text(),
d3.autoType
)
.filter((d) => d.time === 2022)
html`
<style>
.text {
font-family: arial;
font-size: 12px;
}
.region {
font-family: arial;
font-size: 14px;
font-weight: 600;
text-transform: capitalize;
}
.names {
position: absolute;
}
</style>
`
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.
