JavaScript Basics PracticeJavaScript Basics Practice - SolutionsData Transformation PracticeData Transformation Practice - SolutionsSVG and D3 Basics PracticeSVG and D3 Basics Practice - SolutionsBar Chart Practice - SolutionsLine 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
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])
.range([marginPop.left, widthPop - marginPop.right])
countries = populations.map(d => d.country)
countryScale = d3.scaleBand()
.domain(countries)
.range([marginPop.top, heightPop - marginPop.bottom])
.padding(0.2)
xAxisPop = d3.axisBottom(populationScale).tickFormat(d3.format('~s'))
yAxisPop = d3.axisLeft(countryScale)
{
// create and select an svg element
const svg = d3.create('svg')
.attr('width', widthPop)
.attr('height', heightPop);
// Draw the bars
svg.append('g')
.selectAll('rect')
.data(populations)
.join('rect')
// set attributes for each bar
.attr('x', populationScale(0)) // each bar starts at the same x position
.attr('y', d => countryScale(d.country)) // pass the name to the y-scale to get y position
.attr('width', d => populationScale(d.population) - populationScale(0)) // pass the population to the x-scale to get the width
.attr('height', countryScale.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(${marginPop.left})`)
// draw the axis
.call(yAxisPop)
// 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, ${heightPop - marginPop.bottom})`)
.call(xAxisPop)
.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();
}
colorToCutToCount = null
marginDiamond = ({top: 10, bottom: 50, left: 85, right: 10})
widthDiamond = width
heightDiamond = 600
diamondColors = null
groupX = d3.scaleBand()
.domain()
.range()
.padding(0.1)
new Set(diamonds.map(d => d.cut))
diamondCuts = ['Premium', 'Ideal', 'Very Good', 'Good', 'Fair']
barX = d3.scaleBand()
.domain()
.range()
.padding(0.1)
maxCount = null
y = d3.scaleLinear()
.domain().nice()
.range()
color = d3.scaleOrdinal()
.domain(diamondCuts)
.range(['#bd0026', '#f03b20', '#fd8d3c', '#fecc5c', '#ffffb2'])
xAxisDiamond = d3.axisBottom(groupX)
yAxisDiamond = d3.axisLeft(y)
{
// 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
*/
/*
Task B:
- add the bars to each group
- set the x, width, y, height, and fill attributes
*/
// 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.
