per100kCases = new Map(covid.map(({state, cases}) => {
const per100k = stateToPopulation.hasOwnProperty(state)
? (cases / stateToPopulation[state].population) * 100000
: null;
return [state, per100k];
}))
usaGeo
usaGeo.features
usaGeo.features[0]
usaGeo.features[0].properties.NAME
usaMargin = ({top: 0, right: 125, bottom: 0, left: 0})
usaWidth = 725 - usaMargin.top - usaMargin.bottom
usaHeight = 400 - usaMargin.top - usaMargin.bottom
usaProjection = d3.geoAlbersUsa()
.fitSize([usaWidth, usaHeight], usaGeo)
usaPath = d3.geoPath().projection(usaProjection)
usaPath(usaGeo.features[0])
usaPath.centroid(usaGeo.features[0])
`translate(${usaPath.centroid(usaGeo.features[0])})`
maxCasesPer100k = 0
radius = d3.scaleSqrt()
.domain([0, maxCasesPer100k])
.range([0, 15])
{
// 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();
}
color = d3.scaleSequential()
.domain([0, maxCasesPer100k])
.interpolator(d3.interpolateYlGnBu)
{
// 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();
}
worldGeoJSON = FileAttachment("countries-50m.json").json()
worldGeoJSON.features
usa.properties.REGION_WB
worldWidth = 900
worldHeight = 500
worldOutline = d3.geoGraticule().outline()
worldProjection = d3.geoEqualEarth()
.fitSize([worldWidth, worldHeight], worldOutline)
worldPath = d3.geoPath().projection(worldProjection)
worldPath(worldOutline)
worldPath(worldGeoJSON.features[0])
regions = []
regionColor = d3.scaleOrdinal()
.domain(regions)
.range(d3.schemeTableau10)
{
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();
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.