IntroductionJavaScript BasicsData TransformationSVG and D3 BasicsLine and Area ChartsSelections and JoinsMapsChoropleth Color SchemesFundamental Graphs with D3Graphical Encoding ExamplesContextual Elements, Aesthetics, and ClaritySmall MultiplesSmall Multiples with Different AxesNetworksInteractionSocrata Open Data API & NYC Open DataStarting a sequential color scale at a darker color
Bar Chart Walk-through
width
height = 400
margin = ({top: 20, bottom: 45, left: 75, right: 10})
countries = data.map(d => d.country)
y = d3.scaleBand()
.domain(countries)
.range([margin.top, height - margin.bottom])
.padding(0.2)
y('China')
y('Pakistan')
y('Mexico')
y.bandwidth()
maxPopulation = d3.max(data, d => d.population)
x = d3.scaleLinear()
.domain([0, maxPopulation])
.range([margin.left, width - margin.right])
x(0)
x(maxPopulation / 2)
x(maxPopulation)
yAxis = d3.axisLeft(y)
function formatMillions(d) {
return `${d / 1000000} mill.`;
}
formatMillions(100000000)
format = d3.format('~s')
format(100000000)
xAxis = d3.axisBottom(x).tickFormat(format)
{
// create and select an svg element
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
// Draw the bars
svg.append('g')
.selectAll('rect')
.data(data)
.join('rect')
// set attributes for each bar
.attr('x', x(0)) // each bar starts at the same x position
.attr('y', d => y(d.country)) // pass the name to the y-scale to get y position
.attr('width', d => x(d.population) - x(0)) // pass the population to the x-scale to get the width
.attr('height', y.bandwidth()) // get the width of each band in the scale
.attr('fill', 'steelblue');
// Draw the y-axis
svg.append('g')
// move to the right in order to account for the margin
.attr('transform', `translate(${margin.left})`)
// draw the axis
.call(yAxis)
// remove the baseline
.call(g => g.select('.domain').remove());
// Draw the x-axis
svg.append('g')
// we have to move it down to the bottom of the vis
.attr('transform', `translate(0, ${height - margin.bottom})`)
.call(xAxis)
.call(g => g.select('.domain').remove())
// add a label for the x-axis
.append('text')
.attr('fill', 'black')
.attr('font-family', 'sans-serif')
.attr('x', width / 2)
.attr('y', 40)
.text("Population");
return svg.node();
}
[...countryToPopulation.keys()]
d3.max(countryToPopulation.values())
d3.max(countryToPopulation, ([country, population]) => population)
{
// create and select an svg element
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
svg.selectAll('rect')
.data(countryToPopulation) // UPDATED
.join('rect')
.attr('x', x(0))
.attr('y', ([country, population]) => y(country)) // UPDATED
.attr('width', ([country, population]) => x(population) - x(0)) // UPDATED
.attr('height', y.bandwidth())
.attr('fill', 'steelblue');
svg.append('g')
.attr('transform', `translate(${margin.left})`)
.call(yAxis)
.call(g => g.select('.domain').remove());
svg.append('g')
.attr('transform', `translate(0, ${height - margin.bottom})`)
.call(xAxis)
.call(g => g.select('.domain').remove())
.append('text')
.attr('fill', 'black')
.attr('font-family', 'sans-serif')
.attr('x', width / 2)
.attr('y', 40)
.text("Population");
return svg.node();
}
Array.from(countryToPopulation)
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.