The avatar for @nyuvis
EBVL
Enrico Bertini's Visualization Lab
Public
Practice Exercises
Edited
Jan 5
19 forks
Importers
1 star
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 - Solutions
Maps Practice
Maps 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
Insert cell
Insert cell
Insert cell
per100kCases = new Map(covid.map(({state, cases}) => {
const per100k = stateToPopulation.hasOwnProperty(state)
? (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
Insert cell
usaPath = d3.geoPath().projection(usaProjection)
Insert cell
usaPath(usaGeo.features[0])
Insert cell
Insert cell
usaPath.centroid(usaGeo.features[0])
Insert cell
Insert cell
`translate(${usaPath.centroid(usaGeo.features[0])})`
Insert cell
Insert cell
maxCasesPer100k = 0
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' */


/* 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. */

// 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' */



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 = []
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 */


// 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