JavaScript Basics PracticeJavaScript Basics Practice - SolutionsData Transformation PracticeData Transformation Practice - SolutionsSVG and D3 Basics PracticeSVG and D3 Basics Practice - SolutionsBar Chart PracticeLine and Area Charts PracticeLine and Area Charts Practice - SolutionsMaps PracticeMaps Practice - SolutionsMaps Practice II - SolutionsMaps Practice IISmall Multiples PracticeSmall Multiples Practice - SolutionsColor and Clarity PracticeColor and Clarity Practice - SolutionsAnimated Maps PracticeAnimated Maps Practice - SolutionsNetworks PracticeNetworks Practice - SolutionsInteraction PracticeInteraction Practice - SolutionsGraph Design Practice
Bar Chart Practice - Solutions
marginPop = ({top: 10, bottom: 45, left: 75, right: 10})
widthPop = width
heightPop = 400
maxPopulation = d3.max(populations, d => d.population)
populationScale = d3.scaleLinear()
.domain([0, maxPopulation])
.nice()
.range([heightPop - marginPop.bottom, marginPop.top])
countries = populations.map(d => d.country)
countryScaleBand = d3.scaleBand()
.domain(countries)
.range([marginPop.left, widthPop - marginPop.right])
.padding(0.2)
countryScale = d3.scalePoint()
.domain(countries)
.range([marginPop.left, widthPop - marginPop.right])
.padding(0.2)
xAxisPop = d3.axisBottom(countryScale)
yAxisPop = d3.axisLeft(populationScale).tickFormat(d3.format('~s'))
{
// create and select an svg element
const svg = d3.create('svg')
.attr('width', widthPop)
.attr('height', heightPop);
// bind our data to lines
svg.append('g')
.selectAll('rect')
.data(populations)
.join('rect')
.attr('x', d => countryScaleBand(d.country))
.attr('width', d => countryScaleBand.bandwidth())
.attr('y', d => populationScale(d.population))
.attr('height', d => populationScale(0) - populationScale(d.population))
.attr('fill', 'steelblue');
// add a group for the y-axis
svg.append('g')
.attr('transform', `translate(${marginPop.left})`)
.call(yAxisPop);
// add a group for the x-axis
svg.append('g')
.attr('transform', `translate(0,${heightPop - marginPop.bottom})`)
.call(d3.axisBottom(countryScaleBand))
.append('text')
.attr('fill', 'black')
.attr('font-family', 'sans-serif')
.attr('x', widthPop / 2)
.attr('y', 40)
.text("Countries");
// calculate the mean score
const meanPopulation = d3.mean(populations, d => d.population);
// add a line for the mean
svg.append('line')
.attr('x1', marginPop.left)
.attr('x2', widthPop - marginPop.right)
.attr('y1', populationScale(meanPopulation))
.attr('y2', populationScale(meanPopulation))
.attr('stroke', 'red');
return svg.node();
}
{
// create and select an svg element
const svg = d3.create('svg')
.attr('width', widthPop)
.attr('height', heightPop);
// bind our data to lines
svg.append('g')
.selectAll('line')
.data(populations)
.join('line')
.attr('x1', d => countryScale(d.country))
.attr('x2', d => countryScale(d.country))
.attr('y1', d => populationScale(d.population))
.attr('y2', d => heightPop - marginPop.bottom)
.attr('stroke', 'lightgray');
// bind our data to circles
svg.append('g')
.selectAll('circle')
.data(populations)
.join('circle')
.attr('cx', d => countryScale(d.country))
.attr('cy', d => populationScale(d.population))
.attr('r', 5)
.attr('fill', 'steelblue');
// calculate the mean score
const meanPopulation = d3.mean(populations, d => d.population);
// add a line for the mean
svg.append('line')
.attr('x1', marginPop.left)
.attr('x2', widthPop - marginPop.right)
.attr('y1', populationScale(meanPopulation))
.attr('y2', populationScale(meanPopulation))
.attr('stroke', 'red');
// add a group for the y-axis
svg.append('g')
.attr('transform', `translate(${marginPop.left})`)
.call(yAxisPop);
// add a group for the x-axis
svg.append('g')
.attr('transform', `translate(0,${heightPop - marginPop.bottom})`)
.call(xAxisPop)
.append('text')
.attr('fill', 'black')
.attr('font-family', 'sans-serif')
.attr('x', widthPop / 2)
.attr('y', 40)
.text("Countries");
return svg.node();
}
colorToCutToCount = d3.rollup(
diamonds,
group => group.length,
diamond => diamond.color,
diamond => diamond.cut
)
marginDiamond = ({top: 10, bottom: 50, left: 85, right: 10})
widthDiamond = width
heightDiamond = 600
diamondColors = [...colorToCutToCount.keys()].sort()
groupX = d3.scaleBand()
.domain(diamondColors)
.range([marginDiamond.left, widthDiamond - marginDiamond.right])
.padding(0.1)
new Set(diamonds.map(d => d.cut))
diamondCuts = ['Premium', 'Ideal', 'Very Good', 'Good', 'Fair']
barX = d3.scaleBand()
.domain(diamondCuts)
.range([0, groupX.bandwidth()])
.padding(0.1)
Array.from(colorToCutToCount)
maxCount = d3.max(
colorToCutToCount,
([color, cutToCount]) => d3.max(cutToCount, ([cut, count]) => count)
)
y = d3.scaleLinear()
.domain([0, maxCount]).nice()
.range([heightDiamond - marginDiamond.bottom, marginDiamond.top])
color = d3.scaleOrdinal()
.domain(diamondCuts)
.range(['#bd0026', '#f03b20', '#fd8d3c', '#fecc5c', '#ffffb2'])
xAxisDiamond = d3.axisBottom(groupX)
yAxisDiamond = d3.axisLeft(y)
diamondsChart = {
// set up
const svg = d3.create('svg')
.attr('width', widthDiamond)
.attr('height', heightDiamond);
/*
Task A:
- add one g to svg for each group of bars
- use colorToCutToCount as the data
- position each group using the groupX scale
*/
const groups = svg.selectAll('g')
.data(colorToCutToCount)
.join('g')
.attr('transform', ([color, cutToCount]) => `translate(${groupX(color)})`);
/*
Task B:
- add the bars to each group
- set the x, width, y, height, and fill attributes
*/
groups.selectAll('rect')
.data(([color, cutToCount]) => cutToCount)
.join('rect')
.attr('x', d => barX(d[0]))
.attr('width', barX.bandwidth())
.attr('y', ([cut, count]) => y(count))
.attr('height', ([cut, count]) => y(0) - y(count))
.attr('fill', ([cut, count]) => color(cut));
// add axes
svg.append('g')
.attr('transform', `translate(0,${heightDiamond - marginDiamond.bottom})`)
.call(xAxisDiamond)
.call(g => g.select('.domain').remove())
.append('text')
.attr('x', widthDiamond / 2)
.attr('y', 30)
.attr('dominant-baseline', 'hanging')
.attr('text-align', 'middle')
.attr('fill', 'black')
.text('Diamond Color');
svg.append('g')
.attr('transform', `translate(${marginDiamond.left})`)
.call(yAxisDiamond)
.call(g => g.select('.domain').remove())
.append('text')
.attr('x', -50)
.attr('y', heightDiamond / 2)
.attr('dominant-baseline', 'middle')
.attr('text-align', 'end')
.attr('fill', 'black')
.text('Count');
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.
