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)
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.
