Desigrammer.
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
color = d3.scaleOrdinal(rgraph.nodes.map(d => d.Continent).sort(d3.ascending),
d3.schemeCategory10)
function arc(d) {
const y1 = d.source.y;
const y2 = d.target.y;
const r = Math.abs(y2 - y1) / 2;
return `M${margin.left},${y1}A${r},${r} 0,0,${y1 < y2 ? 1 : 0} ${margin.left},${y2}`;
}
y = d3.scalePoint(rgraph.nodes.map(d => d.Ancestry).sort(d3.ascending), [margin.top, height - margin.bottom])
margin = ({top: 20, right: 0, bottom: 20, left: 200})
height = (rdata.nodes.length - 1) * step + margin.top + margin.bottom
step = 18
rgraph = {
const nodes = rdata.nodes.map(({index, Ancestry, Income, Race, Continent, Race_group}) => ({
index,
Ancestry,
Income,
Race,
Continent,
Race_group,
sourceLinks: [],
targetLinks: []
}));
const nodeByAncestry = new Map(nodes.map(d => [d.Ancestry, d]));
const links = rdata.links.map(({index, source, target, value}) => ({
index,
source: nodeByAncestry.get(source),
target: nodeByAncestry.get(target),
value
}));
for (const link of links) {
const {index, source, target, value} = link;
}
return {nodes, links};
}
rdata = FileAttachment("COO_Income@2.json").json()
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.
