Charts built with D3
Published
Edited
Nov 3, 2020
chart1 = {
let fullWidth = width+margin.left+margin.right,
fullHeight = height+margin.top+margin.bottom,
horzScale = d3.scaleLinear([0, d3.max(dataset, (d)=>d.Amount)], [0, width]),
vertScale = d3.scaleBand(dataset.map((d)=>d.Stage), [0, height]).padding(0.05)
let svg = d3.create("svg").attr("viewBox", `0 0 ${fullWidth} ${fullHeight}`)
let chart = svg.append("g").classed("chart", true).attr("transform", `translate(${fullWidth/2}, 0)`);
let bars = chart.selectAll("rect.bar")
.data(dataset)
.join("rect")
.classed("bar", true)
.attr("fill", "steelblue")
.attr("x", 0)
.attr("y", (d)=>vertScale(d.Stage))
.attr("width", (d)=>horzScale(d.Amount))
.attr("height", (d)=>vertScale.bandwidth())
.attr("transform", (d)=>`translate(${-(horzScale(d.Amount)/2)}, 0)`)
.attr("fill", (d)=>colors.get(d.Stage))
let labels = chart.selectAll("text.label")
.data(dataset)
.join("text")
.classed("label", true)
.attr("y", (d)=>vertScale(d.Stage))
.attr("dy", vertScale.bandwidth()/2)
.attr("text-anchor", "middle")
.attr("fill", "white")
.text((d)=>`${d.Stage} (${d.Amount})`)
return svg.node();
}
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.
