The avatar for @nyuvis
EBVL
Enrico Bertini's Visualization Lab
Public
Practice Exercises
Edited
Feb 19
Fork of Maps Practice
•
2 forks
1
Practice Exercises
JavaScript Basics PracticeJavaScript Basics Practice - SolutionsData Transformation PracticeData Transformation Practice - SolutionsSVG and D3 Basics PracticeSVG and D3 Basics Practice - SolutionsBar Chart PracticeBar Chart Practice - SolutionsLine and Area Charts PracticeLine and Area Charts Practice - SolutionsMaps Practice
Maps Practice - Solutions
Maps 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
Insert cell
Insert cell
Insert cell
covid
Insert cell
stateToPopulation
Insert cell
per100kCases = new Map(covid.map(({state, cases}) => {
const per100k = state in stateToPopulation
? (cases / stateToPopulation[state].population) * 100000
: null;

return [state, per100k];
}))
Insert cell
Insert cell
usaGeo
Insert cell
Insert cell
usaGeo.features
Insert cell
Insert cell
usaGeo.features[0]
Insert cell
Insert cell
usaGeo.features[0].properties.NAME
Insert cell
Insert cell
usaMargin = ({top: 0, right: 125, bottom: 0, left: 0})
Insert cell
usaWidth = 725 - usaMargin.top - usaMargin.bottom
Insert cell
usaHeight = 400 - usaMargin.top - usaMargin.bottom
Insert cell
Insert cell
usaProjection = d3.geoAlbersUsa()
.fitSize([usaWidth, usaHeight], usaGeo)
Insert cell
usaPath = d3.geoPath().projection(usaProjection)
Insert cell
Insert cell
usaPath.centroid(usaGeo.features[0])
Insert cell
Insert cell
`translate(${usaPath.centroid(usaGeo.features[0])})`
Insert cell
Insert cell
maxCasesPer100k = d3.max(per100kCases.values())
Insert cell
radius = d3.scaleSqrt()
.domain([0, maxCasesPer100k])
.range([0, 15])
Insert cell
{
// set up
const svg = d3.create('svg')
.attr('width', usaWidth + usaMargin.left + usaMargin.right)
.attr('height', usaHeight + usaMargin.top + usaMargin.bottom);

// create a group to account for the margins around the map
const g = svg.append('g')
.attr('transform', `translate(${usaMargin.left}, ${usaMargin.top})`);
/* Draw the map:
- Create one path for each state in usaGeo.features
- Set the d attribute using usaPath
- Set the fill to '#d3d3d3'
- Set the stroke to 'white' */

g.selectAll('path')
.data(usaGeo.features)
.join('path')
.attr('d', usaPath)
.attr('fill', '#d3d3d3')
.attr('stroke', 'white');
/* Draw the circles:
- Create one circle for each state in usaGeo.features
- Set the stroke and fill to 'steelblue'
- Set the fill-opacity to 0.25
- Position the circle using the transform attribute
- Use usaPath.centroid() to get the center of the state.
- Set the radius of the circle using the radius scale
- Look up the value for the state in per100kcases. */
g.selectAll("circle")
.data(usaGeo.features)
.join("circle")
.attr("fill", "steelblue")
.attr("stroke", "steelblue")
.attr("fill-opacity", 0.25)
// set the position and size of the circles
.attr("transform", state => `translate(${usaPath.centroid(state)})`)
.attr("r", state => radius(per100kCases.get(state.properties.NAME)));
// legend
g.append('g')
.attr('transform', `translate(${usaWidth},${usaHeight / 2})`)
.call(circleLegend, radius, [5000, 10000, 15000], 'COVID Cases per 100k');
return svg.node();
}
Insert cell
Insert cell
Insert cell
color = d3.scaleSequential()
.domain([0, maxCasesPer100k])
.interpolator(d3.interpolateYlGnBu)
Insert cell
Insert cell
{
// set up
const svg = d3.create('svg')
.attr('width', usaWidth + usaMargin.left + usaMargin.right)
.attr('height', usaHeight + usaMargin.top + usaMargin.bottom);

const g = svg.append('g')
.attr('transform', `translate(${usaMargin.left}, ${usaMargin.top})`);
/* Draw the map:
- Create one path for each state in usaGeo.features
- Set the d attribute using usaPath
- Set the fill to using the color scale
- Look up the value for the state in per100kcases
- Set the stroke to 'white' */

g.selectAll('path')
.data(usaGeo.features)
.join('path')
.attr('d', usaPath)
.attr('fill', state => color(per100kCases.get(state.properties.NAME)))
.attr('stroke', 'white');

return svg.node();
}
Insert cell
Insert cell
worldGeoJSON = FileAttachment("countries-50m.json").json()
Insert cell
Insert cell
worldGeoJSON.features
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
usa.properties.REGION_WB
Insert cell
Insert cell
worldWidth = 900
Insert cell
worldHeight = 500
Insert cell
Insert cell
worldOutline = d3.geoGraticule().outline()
Insert cell
Insert cell
worldProjection = d3.geoEqualEarth()
.fitSize([worldWidth, worldHeight], worldOutline)
Insert cell
Insert cell
worldPath = d3.geoPath().projection(worldProjection)
Insert cell
Insert cell
worldPath(worldOutline)
Insert cell
Insert cell
worldPath(worldGeoJSON.features[0])
Insert cell
Insert cell
regions = new Set(worldGeoJSON.features.map(d => d.properties.REGION_WB))
Insert cell
Insert cell
regionColor = d3.scaleOrdinal()
.domain(regions)
.range(d3.schemeTableau10)
Insert cell
Insert cell
Insert cell
{
const svg = d3.create('svg')
.attr('width', worldWidth)
.attr('height', worldHeight);

/* Draw the map:
- Create one path for each country in worldGeoJSON.features
- Use worldPath to set the d attribute
- Use regionColor to set the fill
- Set the stroke to white */

svg.selectAll('path')
.data(worldGeoJSON.features)
.join('path')
.attr('d', worldPath)
.attr('fill', d => regionColor(d.properties.REGION_WB))
.attr('stroke', 'white');

// draw outline

svg.append('path')
.attr('d', worldPath(worldOutline))
.attr('stroke', '#dcdcdc')
.attr('fill', 'none');

return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more