md`# Play with Pie, Line, and Area`
dataset = {
return { current: [15, 8, 19, 25, 37], total: [25, 26, 40, 45, 68] };
}
pieChart = {
const svg = d3
.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height]);
svg
.append("g")
.attr("stroke", "white")
.selectAll("path")
.data(arcs)
.join("path")
.attr("fill", d => color(d.data))
.attr("d", arc);
return svg.node();
}
height = width
arcs = pie(dataset.current)
arc = d3
.arc()
.innerRadius(50)
.outerRadius(Math.min(width, height) / 2)
pie = d3
.pie()
.sort((a, b) => a - b)
.value(d => d)
color = d3
.scaleOrdinal()
.domain(dataset.current.map(d => d))
.range(['red', 'blue', 'green', 'yellow', 'purple'])
d3 = require('d3@6')
html`<svg width=${width} height=${height} viewBox="0 0 ${width} ${height}">
<g transform="translate(0, ${height}) scale(1,-1)">
<line x1="0" y1="0" x2="${(width / 6) * 1}" y2="${(dataset.current[0] /
maxHeight) *
height}" stroke="black" />
<line x1="${(width / 6) * 1}" y1="${(dataset.current[0] / maxHeight) *
height}" x2="${(width / 6) * 2}" y2="${(dataset.current[1] / maxHeight) *
height}" stroke="black" />
<line x1="${(width / 6) * 2}" y1="${(dataset.current[1] / maxHeight) *
height}" x2="${(width / 6) * 3}" y2="${(dataset.current[2] / maxHeight) *
height}" stroke="black" />
<line x1="${(width / 6) * 3}" y1="${(dataset.current[2] / maxHeight) *
height}" x2="${(width / 6) * 4}" y2="${(dataset.current[3] / maxHeight) *
height}" stroke="black" />
<line x1="${(width / 6) * 4}" y1="${(dataset.current[3] / maxHeight) *
height}" x2="${(width / 6) * 5}" y2="${(dataset.current[4] / maxHeight) *
height}" stroke="black" />
</g>
</svg>`
maxHeight = d3.max(dataset.current) + 5
lineChart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg
.append('g')
.attr('transform', `translate(0, ${height}) scale(1,-1)`)
.append("path")
.datum(dataset.current)
.attr('fill', 'none')
.attr("stroke", "steelblue")
.attr("d", d => line(d));
return svg.node();
}
line = d3
.line()
.x((d, i) => (i + 1) * (width / 6))
.y(d => (d / maxHeight) * height)
seriesData = d3.map(dataset.current, (d, i) => {
return {
current: d,
total: dataset.total[i]
};
})
areaStack = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg
.append("g")
.attr('transform', `translate(0, ${height}) scale(1,-1)`)
.selectAll("path")
.data(series)
.join("path")
.attr("fill", ({ key }) => (key === 'current' ? 'red' : 'blue'))
.attr("d", area);
return svg.node();
}
series = d3.stack().keys(Object.keys(seriesData[0]))(seriesData)
area = d3
.area()
.x((d, i) => (i + 1) * (width / 6))
.y0(d => (d[0] / areaMaxH) * height)
.y1(d => (d[1] / areaMaxH) * height)
areaMaxH = d3.max(dataset.total) + d3.max(dataset.current) + 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.
