Journalist. Economics, data journalism, climate.
Public
Edited
Jan 22, 2021
6 forks
15 stars
chart(zoom)
chart(apple)
chart(tesla)
md`### Amazon and the 10 biggest pharma companies
Market cap on January 19th, 2021`
chart(amazon)
chart = data => {
const root = treemap(data);
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("font", "10px sans-serif");
const leaf = svg.selectAll("g")
.data(root.leaves())
.join("g")
.attr("transform", d => `translate(${d.x0},${d.y0})`);
leaf.append("title")
.text(d => `${d.data.name}\n${format(d.value)}`);
leaf.append("rect")
.attr("id", d => (d.leafUid = DOM.uid("leaf")).id)
.attr("fill", d => d.data.color)
.attr("fill-opacity", 0.9)
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0);
leaf.append("clipPath")
.attr("id", d => (d.clipUid = DOM.uid("clip")).id)
.append("use")
.attr("xlink:href", d => d.leafUid.href);
leaf.append("text")
.style("font-size", d => d.data.name === d.parent.data.children[0].name ? "xx-large" : "x-small")
.selectAll("tspan")
.data(d => d.data.name.split(/(?=[A-Z][a-z])|\s+/g).concat(format(d.value / 1e9) + " Mrd."))
.join("tspan")
.attr("x", 3)
.attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`)
.attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null)
.text(d => d);
return svg.node();
}
viewof tile = {
const options = [
{name: "d3.treemapBinary", value: d3.treemapBinary},
{name: "d3.treemapDice", value: d3.treemapDice},
{name: "d3.treemapSlice", value: d3.treemapSlice},
{name: "d3.treemapSliceDice", value: d3.treemapSliceDice},
{name: "d3.treemapSquarify", value: d3.treemapSquarify, selected: true}
];
const form = html`<form style="display: flex; align-items: center; min-height: 33px;"><select name=i>${options.map(o => Object.assign(html`<option>`, {textContent: o.name, selected: o.selected}))}`;
form.i.onchange = () => form.dispatchEvent(new CustomEvent("input"));
form.oninput = () => form.value = options[form.i.selectedIndex].value;
form.oninput();
return form;
}
treemap = data => d3.treemap()
.tile(tile)
.size([width, height])
.padding(4)
.round(false)
(d3.hierarchy(data)
.sum(d => d.value)
//.sort((a, b) => b.value - a.value)
)
width = 670
height = 350
format = d3.format(".3s")
d3 = require("d3@5")
import {select} from "@jashkenas/inputs"
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.
