width = 900
height = 500
margin = ({
top: 10,
right: 0,
bottom: 30,
left: 30
})
colors = d3.scaleOrdinal(
Meat.categories,
d3.schemeGnBu[9].slice(3)
)
xScale = d3.scaleBand(
Meat.map(d => d.location),
[ margin.left, width - margin.right ]
).padding(0.2)
yScale = d3.scaleLinear(
[ 0, d3.max(Meat, d => d.total) ],
[ height - margin.bottom, margin.top ]
)
xAxis = d3.axisBottom(xScale)
.tickSizeOuter(0)
yAxis = d3.axisLeft(yScale)
stack = d3.stack()
.keys( Meat.categories )
stack(Meat)
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.
