Interactive BCG Matrix ComponentPLOTting Interactive Stock ChartFunnel ChartPerformance ChartTurning prototypes into DataViz components using ObservableTime Spiral with a COVID DemoSVG DataGrid with many features and a live COVID Dashboard demoHierarchical Heatmap (update - now works well with larger dataset)Bump ChartWaffle ChartFancy Radial Bar ChartPie in BubblesBubble Pie Chart
Arc Diagram
chart = {
const svg = d3.create("svg")
.attr("font-size", "11pt")
.attr("viewBox", [0, 0, width, height]);
const arcs = svg.selectAll("path")
.data(links)
.join("path")
.attr("fill", "none")
.attr("stroke", "#ccc")
.attr("stroke-width", d => w(d.value))
.attr("d", arc)
.call(g => g.append("title").text(d => `${d.source.name} - ${d.target.name}\n${toCurrency(d.value)}`))
.on("mouseover", highlight)
.on("mouseout", restore);
const circles = svg.selectAll(".node")
.data(nodes)
.join("g")
.attr("class", "node")
.attr("transform", d => `translate(${x(d.name)},${height - margin})`)
.on("mouseover", highlight)
.on("mouseout", restore);
circles.append("circle")
.attr("r", d => r(d.total))
.attr("fill", d=> color(d.name))
circles.append("g")
.attr("text-anchor", "middle")
.attr("transform", `translate(0,${radius.max + 20})`)
.call(g => g.append("text").text(d => d.name))
.call(g => g.append("text").attr("dy", "1em").text(d => toCurrency(d.total)));
return svg.node();
function highlight(e, d, restore) {
if (d.name) {
arcs.filter(a => a.source === d || a.target === d)
.transition().duration(500)
.attr("stroke", d => restore ? "#ccc" : color(d.target.name));
circles.select("circle")
.transition().duration(500)
.attr("fill", c => restore || linkedNodes(d).some(n => n === c) ? color(c.name) : "#ccc");
}
else if (d.source) {
arcs.transition().duration(500).attr("stroke", a => restore || a !== d ? "#ccc" : color(a.target.name));
circles.select("circle")
.transition().duration(500)
.attr("fill", c => restore || c === d.source || c === d.target ? color(c.name) : "#ccc");
}
}
function restore(e, d) { highlight(e, d, true); }
}
x = d3.scalePoint()
.domain(nodes.map(d => d.name))
.range([radius.max * 2, width - radius.max * 2])
r = d3.scaleLinear()
.domain(d3.extent(nodes.map(d => d.total)))
.range([radius.min, radius.max]);
w = d3.scaleLinear()
.domain(d3.extent(links.map(d => d.value)))
.range([1, 10])
color = d3.scaleOrdinal()
.domain(nodes.map(d => d.name))
.range(["#4e79a7","#f28e2c","#e15759","#76b7b2","#59a14f","#edc949","#af7aa1","#ff9da7","#9c755f","#bab0ab"]);
arc = (d) => {
const x1 = x(d.source.name),
x2 = x(d.target.name);
const r = Math.abs(x2 - x1) / 2;
return `M${x1} ${height - margin} A ${r},${r} 0 0,${x1 < x2 ? 1 : 0} ${x2},${height - margin}`;
}
toCurrency = (num) => Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'}).format(num)
data = d3.csvParse(await FileAttachment("profit4yr.csv").text(), d3.autoType)
chartData = {
return data.map(d => {
return {
territory: d["territory"],
values: data.columns.slice(1).map(y => d[y])
}
});
}
territories = chartData.map(d => ({
name: d.territory,
total: d.values.reduce((a, b) => a + b)
}));
years = data.columns.slice(1).map((d, i) => ({
name: d,
total: chartData.reduce((a, b) => a + b.values[i], 0)
}));
nodes = years.concat(territories)
links = {
const array = [];
years.forEach((y, i) => {
territories.forEach((t, j) => array.push({
source: y,
target: t,
value: chartData[j].values[i]
}));
});
return array;
}
linkedNodes = n => {
return Array.from(new Set(
links
.flatMap(d => d.source === n || d.target === n ? [d.source, d.target] : null)
.filter(d => d !== null)
));
}
width = 1024
height = 768
margin = radius.max * 2 + 20
radius = ({min: 20, max: 50})
d3 = require("d3@6")
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.
