Day 23 - Force SimulationDay 22 - Delaunay/VoronoiDay 21 - Object ConstancyDay 20 - Animations Part 2Day 19 - InterpolatorsDay 18 - Join, Enter, Update, ExitDay 14 - Interactions 3 - DraggingDay 13 - Interactions 2 - Zooming25 days of D3Day 12 - Interactions 1 - Click and HoverDay 11 - Introduction to AnimationsDay 3 - Controlling the Flow of DataDay 10 - TreemapDay 8 - Scatter PlotDay 7 - A Line ChartDay 6 - Donut ChartDay 5 - Our First Bar ChartDay 4 - Groups, Attributes and StylesDay 2 - Scales, Shapes and ColorsDay 1 - One Shape, Many Shapes
Day 9 - Stacked Bar Chart
colors = d3.scaleOrdinal(
data.categories,
d3.schemeGnBu[9].slice(3)
)
xScale = d3.scaleBand(
data.map(d => d.location),
[ margin.left, width - margin.right ]
).padding(0.2)
yScale = d3.scaleLinear(
[ 0, d3.max(data, d => d.total) ],
[ height - margin.bottom, margin.top ]
)
xAxis = d3.axisBottom(xScale)
.tickSizeOuter(0)
yAxis = d3.axisLeft(yScale)
stack = d3.stack()
.keys( data.categories )
chart = {
const svg = d3.create('svg')
.attr('width', 900)
.attr('height', 500)
// Pass our data to the stack to generate the layer positions
const chartData = stack( data )
const groups = svg.append('g')
// Each layer of the stack goes in a group
// the group contains that layer for all countries
.selectAll('g')
.data( chartData )
.join('g')
// rects in the same layer will all have the same color, so we can put it on the group
// we can use the key on the layer's array to set the color
.style('fill', (d,i) => colors(d.key))
groups.selectAll('rect')
// Now we place the rects, which are the children of the layer array
.data(d => d)
.join('rect')
.attr('x', d => xScale(d.data.location))
.attr('y', d => yScale(d[1]))
.attr('height', d => yScale(d[0]) - yScale(d[1]))
.attr('width', xScale.bandwidth())
svg.append('g')
.attr('transform', `translate(0,${ height - margin.bottom })`)
.call(xAxis)
svg.append('g')
.attr('transform', `translate(${ margin.left },0)`)
.call(yAxis)
.select('.domain').remove()
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.
