IntroductionJavaScript BasicsData TransformationSVG and D3 BasicsBar Chart Walk-throughLine and Area ChartsSelections and JoinsMapsChoropleth Color SchemesFundamental Graphs with D3Graphical Encoding ExamplesContextual Elements, Aesthetics, and ClaritySmall MultiplesNetworksInteractionSocrata Open Data API & NYC Open DataStarting a sequential color scale at a darker color
Small Multiples with Different Axes
row = d3.scaleBand()
.domain(d3.range(rows))
.range([0, visHeight])
.paddingInner(0.2)
col = d3.scaleBand()
.domain(d3.range(cols))
.range([0, visWidth])
.paddingInner(0.2)
x = d3.scaleTime()
.domain([minDate, maxDate])
.range([0, col.bandwidth()])
industryToScaleAndArea = Object.fromEntries(
data.map(d => {
const maxRate = d3.max(d.rates, d => d.rate);
const y = d3.scaleLinear()
.domain([0, maxRate])
.range([row.bandwidth(), 0]);
const area = d3.area()
.x(d => x(d.date))
.y1(d => y(d.rate))
.y0(d => y(0));
return [d.industry, {y, area}];
})
)
{
// create and select an svg element that is the size of the bars plus margins
const svg = d3.create('svg')
.attr('width', visWidth + margin.left + margin.right)
.attr('height', visHeight + margin.top + margin.bottom);
// append a group element and move it left and down to create space
// for the left and top margins
const g = svg.append("g")
.attr('transform', `translate(${margin.left}, ${margin.top})`);
// create a group for each small multiple
const cells = g.append('g')
.selectAll('g')
.data(data)
.join('g')
.attr('class', 'cell')
.attr('transform', d => `translate(${col(d.col)}, ${row(d.row)})`);
// add the area to each cell
cells.append('path')
// access the area generator for this industry
.attr('d', d => industryToScaleAndArea[d.industry].area(d.rates))
.attr('fill', 'steelblue');
// add the y axis for each cell
cells.each(function(d) {
// select the group for this cell
const group = d3.select(this);
// get the y-scale for this industry
const axis = d3.axisLeft(industryToScaleAndArea[d.industry].y)
.ticks(3)
.tickSizeOuter(0);
group.call(axis)
.call(g => g.select('.domain').remove())
});
return svg.node();
}
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.