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 ChartArc DiagramPie in Bubbles
Bubble Pie Chart
chart = {
const svg = d3.create("svg")
.attr("font-size", "10pt")
.attr("cursor", "default")
.attr("viewBox", [0, 0, width, height]);
svg.append("g").call(g => drawGuidelines(g, chartData.map(d => d.year),
d => d3.line()([[x(d) + hx, margin.top],[x(d) + hx, height - margin.bottom]]))
);
svg.append("g").call(g => drawGuidelines(g, y.ticks().reverse().slice(1),
d => d3.line()([[margin.left, y(d)],[width - margin.left - margin.right, y(d)]]))
);
const g = svg.selectAll(".pie")
.data(chartData)
.join("g")
.attr("class", "pie")
.attr("transform", d => `translate(${x(d.year) + hx},${y(d.total)})`)
.call(g => g.append("text")
.attr("dy", "1em")
.attr("text-anchor", "middle")
.attr("transform", d => `translate(0,${r(d.total)})`)
.text(d => toCurrency(d.total)));
const pg = g.selectAll("g")
.data(d => d3.pie()(d.values).map(p => ({pie: p, total: d.total})))
.join("g")
.call(g => g.append("title")
.text((d, i) => `${territories[i]}\n${toCurrency(d.pie.value)} (${(d.pie.value / d.total * 100).toFixed(1)}%)`));
const slice = pg.append("path")
.attr("d", d => pie(d)())
.attr("opacity", 1)
.attr("fill", (d, i) => color(territories[i]));
const pct = pg.append("text")
.attr("text-anchor", "middle")
.attr("fill", "white")
.attr("transform", (d, i) => {
const c = pie(d).centroid(d.pie.value);
return `translate(${c[0]},${c[1]})`;
})
.attr("opacity", "0")
.text(d => (d.pie.value / d.total * 100).toFixed(1) + "%");
svg.append("g").call(g => drawAxis(g, margin.left, 0, d3.axisLeft(y).ticks(height / 100, "s")));
svg.append("g").call(g => drawAxis(g, 0, height - margin.bottom, d3.axisBottom(x)));
svg.append("g").call(drawLegend);
return svg.node();
var legend;
function drawLegend(g) {
legend = g.attr("transform", `translate(${width - margin.right},0)`)
.selectAll("g")
.data(territories)
.join("g")
.attr("transform", (d, i) => `translate(0,${i * 20})`)
.call(g => g.append("rect")
.attr("rx", 3).attr("ry", 3)
.attr("width", 20).attr("height", 15)
.attr("fill", d => color(d)))
.call(g => g.append("text").attr("dx", 25).attr("alignment-baseline", "hanging").text(d => d))
.on("mouseover", e => highlight(e))
.on("mouseout", () => highlight());
}
function highlight(e) {
const i = e ? legend.nodes().indexOf(e.currentTarget) : -1;
slice.transition().duration(500).attr("opacity", (d, j) => i === -1 || j === i ? 1 : 0.3);
pct.transition().duration(500)
.attr("opacity", function(d, j) {
if (j === i) {
this.parentNode.parentNode.appendChild(this.parentNode);
return 1;
}
else return 0;
});
}
}
drawAxis = (g, x, y, axis) =>
g.attr("transform", `translate(${x},${y})`)
.call(axis)
.selectAll(".tick text")
.attr("font-size", "9pt");
drawGuidelines = (g, data, line) => {
g.selectAll("path")
.data(data)
.join("path")
.attr("stroke", "#ddd")
.attr("stroke-dasharray", "5,5")
.attr("d", line);
}
toCurrency = num => d3.format("$,.2f")(num)
x = d3.scaleBand()
.domain(chartData.map(d => d.year))
.range([margin.left, width - margin.left - margin.right])
hx = x.bandwidth() / 2
y = {
const ext = d3.extent(chartData.map(d => d.total));
// value(total) to length ratio of radius
const f = (ext[1] - ext[0]) / (height - margin.bottom - margin.top * 2);
// margin = 1.5 radius
ext[0] -= hx * 1.5 * f;
ext[1] += hx * 1.5 * f;
return d3.scaleLinear().domain(ext).range([height - margin.top - margin.bottom, margin.top])
}
r = d3.scaleLinear()
.domain(d3.extent(chartData.map(d => d.total)))
.range([hx / 2, hx])
pie = d => d3.arc()
.innerRadius(0)
.outerRadius(r(d.total))
.startAngle(d.pie.startAngle)
.endAngle(d.pie.endAngle)
color = d3.scaleOrdinal(d3.schemeTableau10).domain(territories);
data = d3.csvParse(await FileAttachment("profit6yr.csv").text(), d3.autoType)
chartData = data.columns.slice(1).map(y => {
const values = data.map(d => d[y]);
return {
year: y,
values: values,
total: values.reduce((a, b) => a + b)
}
});
territories = data.map(d => d.territory)
//width = 1024
height = width * 0.5
margin = ({left: 40, bottom: 50, top: 10, right: 150})
d3 = require("d3@6")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.