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 Multiples with Different AxesNetworksInteractionSocrata Open Data API & NYC Open DataStarting a sequential color scale at a darker color
Small Multiples
wordsMargin = ({ top: 10, bottom: 10, right: 10, left: 10 })
wordsWidth = width
wordsHeight = 500
numberOfCols = 7
d3.range(numberOfCols)
colScale = d3.scaleBand()
.domain(d3.range(numberOfCols))
.range([wordsMargin.left, wordsWidth - wordsMargin.right])
.padding(0.05)
numberOfRows = 4
rowScale = d3.scaleBand()
.domain(d3.range(numberOfRows))
.range([wordsMargin.top, wordsHeight - wordsMargin.bottom])
.padding(0.05)
[colScale(3), rowScale(0)]
{
// the usual set up
const svg = d3.create('svg')
.attr('width', wordsWidth)
.attr('height', wordsHeight);
// add a group for each cell and position it according to its row and column
const cells = svg.selectAll('g')
.data(lettersAndWords)
.join('g')
.attr('transform', (d, i) => {
/* i is the current index
in this case, the value of i will be from 0-25. */
// get the row index and column index for this cell
const r = Math.floor(i / numberOfCols);
const c = i % numberOfCols;
// use the scales to get the x, y coordinates
return `translate(${colScale(c)}, ${rowScale(r)})`;
});
// add a rectangle to each group and make it take up the entire cell
cells.append('rect')
.attr('width', colScale.bandwidth())
.attr('height', rowScale.bandwidth())
.attr('fill', 'white')
.attr('stroke', 'red');
// nested data join
// add the list of words to each group
cells.selectAll('text')
.data(d => d.words)
.join('text')
.attr('font-size', 15)
.attr('font-family', 'sans-serif')
.attr('dominant-baseline', 'hanging')
.attr('x', 5)
.attr('y', (d, i) => i * 15 + 2)
.text(d => d);
return svg.node();
}
d3.cross([0, 1, 2], ['a', 'b', 'c'])
d3.cross([0, 1, 2], ['a', 'b', 'c'], (number, letter) => `${number} - ${letter}`)
d3.cross([0, 1, 2], ['a', 'b', 'c'], (number, letter) => ({ number, letter}))
d3.zip([0, 1, 2], ['cat', 'dog', 'mouse'])
gridPositions = d3.cross(d3.range(numberOfRows), d3.range(numberOfCols), (row, col) => ({row, col}))
pairings = d3.zip(lettersAndWords, gridPositions)
data = pairings.map(([data, position]) => ({...data, ...position}))
{
// the usual set up
const svg = d3.create('svg')
.attr('width', wordsWidth)
.attr('height', wordsHeight);
// add a group for each cell and position it according to its row and column
const cells = svg.selectAll('g')
.data(data)
.join('g')
.attr('transform', d => `translate(${colScale(d.col)}, ${rowScale(d.row)})`);
// add a rectangle to each group and make it take up the entire cell
cells.append('rect')
.attr('width', colScale.bandwidth())
.attr('height', rowScale.bandwidth())
.attr('fill', 'white')
.attr('stroke', 'red');
// nested data join
// add the list of words to each group
cells.selectAll('text')
.data(d => d.words)
.join('text')
.attr('font-size', 15)
.attr('font-family', 'sans-serif')
.attr('dominant-baseline', 'hanging')
.attr('x', 5)
.attr('y', (d, i) => i * 15 + 2)
.text(d => d);
return svg.node();
}
unemploymentRaw = FileAttachment("unemployment-state-decade.csv").csv({ typed: true })
unemploymentData = unemploymentRaw.map(d => {
const state = d.State;
// function to parse a string like "Jun 2011" into a date
const parse = d3.timeParse('%b %Y');
// map over the date keys for a given state
const rates = Object.entries(d)
.filter(([key, value]) => key !== 'State')
.map(([date, rate]) => ({
date: parse(date),
// if there is no data, the value is '-'
// we will replace this with null
rate: rate === '-' ? null : rate
}))
.sort((a, b) => d3.ascending(a.date, b.date));
// mean unemployment rate for the state
const average = d3.mean(rates, d => d.rate);
return { state, rates, average };
})
// sort the states by their mean unemployment rate
.sort((a, b) => d3.descending(a.average, b.average))
stateToAbbr
unemploymentMargin = ({ top: 30, bottom: 20, right: 10, left: 30 })
unemploymentWidth = width
unemploymentHeight = 600
numRows = 7
row = d3.scaleBand()
.domain(d3.range(numRows))
.range([unemploymentMargin.top, unemploymentHeight - unemploymentMargin.bottom])
.padding(0.05)
numCols = Math.ceil(unemploymentData.length / numRows)
col = d3.scaleBand()
.domain(d3.range(numCols))
.range([unemploymentMargin.left, unemploymentWidth - unemploymentMargin.right])
.padding(0.1)
maxUnemploymentRate = d3.max(unemploymentData, state => d3.max(state.rates, d => d.rate))
y = d3.scaleLinear()
.domain([0, maxUnemploymentRate])
.range([row.bandwidth(), 0])
dateExtent = d3.extent(unemploymentData[0].rates, d => d.date)
x = d3.scaleTime()
.domain(dateExtent)
.range([0, col.bandwidth()])
area = d3.area()
.x(d => x(d.date))
.y1(d => y(d.rate))
.y0(d => y(0))
.defined(d => d.rate !== null)
xAxis = d3.axisBottom(x)
.tickSizeOuter(0)
.ticks(4, "'%y")
yAxis = d3.axisLeft(y)
.tickSizeOuter(0)
.ticks(4)
stateUnemploymentDecade = {
// set up
const svg = d3.create('svg')
.attr('width', unemploymentWidth)
.attr('height', unemploymentHeight)
.attr('font-family', 'sans-serif');
// title
const format = d3.timeFormat('%B %Y'); // convert date to string
svg.append('text')
.attr('y', unemploymentMargin.top)
.text(`Unemployment Rate, ${format(dateExtent[0])} - ${format(dateExtent[1])}`);
// add a group for each cell and position it according to its row and column
const cells = svg.selectAll('g')
.data(unemploymentData)
.join('g')
.attr('transform', (d, i) => {
/* i is the current index
in this case, the value of i will be from 0-25. */
// get the row index and column index for this cell
const r = Math.floor(i / numCols);
const c = i % numCols;
// use the scales to get the x, y coordinates
return `translate(${col(c)}, ${row(r)})`;
});
// add the area to each cell
cells.append('path')
.attr('d', d => area(d.rates))
.attr('fill', 'steelblue');
// add the state label to each cell
cells.append('text')
.attr('font-size', 12)
.attr('dominant-baseline', 'middle')
.attr('x', 5)
.attr('y', y(20))
.text(d => stateToAbbr[d.state])
// Axes
// add x axes to each chart
const xAxes = cells.append('g')
// move it to the bottom
.attr('transform', d => `translate(0,${row.bandwidth()})`)
.call(xAxis)
// remove the baseline
.call(g => g.select('.domain').remove())
// change the tick color to gray
.call(g => g.selectAll('line').attr('stroke', '#c0c0c0'));
// remove tick labels from all charts except the ones at the bottom of the columns
xAxes.filter((d, i) => i < unemploymentData.length - numCols)
.selectAll('text')
.remove();
// add y axes to each chart
const yAxes = cells.append('g')
.call(yAxis)
// remove the baseline
.call(g => g.select('.domain').remove())
// change the tick color to gray
.call(g => g.selectAll('line').attr('stroke', '#c0c0c0'));
// remove tick labels from all charts except the first column
yAxes.filter((d, i) => i % numCols !== 0)
.selectAll('text')
.remove();
return svg.node();
}
grid = d3.cross(d3.range(numRows), d3.range(numCols), (row, col) => ({row, col}))
unemploymentGrid = d3.zip(unemploymentData, grid)
.map(([data, position]) => ({...data, ...position}))
{
// set up
const svg = d3.create('svg')
.attr('width', unemploymentWidth)
.attr('height', unemploymentHeight)
.attr('font-family', 'sans-serif');
// title
const format = d3.timeFormat('%B %Y'); // convert date to string
svg.append('text')
.attr('y', unemploymentMargin.top)
.text(`Unemployment Rate, ${format(dateExtent[0])} - ${format(dateExtent[1])}`);
// add a group for each cell and position it according to its row and column
const cells = svg.selectAll('g')
.data(unemploymentGrid)
.join('g')
.attr('transform', d => `translate(${col(d.col)}, ${row(d.row)})`);
// add the area to each cell
cells.append('path')
.attr('d', d => area(d.rates))
.attr('fill', 'steelblue');
// add the state label to each cell
cells.append('text')
.attr('font-size', 12)
.attr('dominant-baseline', 'middle')
.attr('x', 5)
.attr('y', y(20))
.text(d => stateToAbbr[d.state])
// Axes
// add x axes to each chart
const xAxes = cells.append('g')
// move it to the bottom
.attr('transform', d => `translate(0,${row.bandwidth()})`)
.call(xAxis)
// remove the baseline
.call(g => g.select('.domain').remove())
// change the tick color to gray
.call(g => g.selectAll('line').attr('stroke', '#c0c0c0'));
// remove tick labels from all charts except the ones at the bottom of the columns
xAxes.filter((d, i) => i < unemploymentData.length - numCols)
.selectAll('text')
.remove();
// add y axes to each chart
const yAxes = cells.append('g')
.call(yAxis)
// remove the baseline
.call(g => g.select('.domain').remove())
// change the tick color to gray
.call(g => g.selectAll('line').attr('stroke', '#c0c0c0'));
// remove tick labels from all charts except the first column
yAxes.filter(d => d.col !== 0)
.selectAll('text')
.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.