Public
Edited
Oct 10, 2024
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 = {
//maxCasesPer100k = d3.max(d => d.per100kCases.values)
const values = Array.from(per100kCases.values());
return d3.max(values)
}
radius = d3.scaleSqrt()
.domain([0, maxCasesPer100k])
.range([0, 15])
{
// or isolarion var
const Feat = usaGeo.features
}
{
// set up
// I create th epath up here ebcuase I am different
var path = usaPath(usaGeo.features)
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' */
const map = g.append("g")
.append("path")
.attr("")
/* 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. */
var circles = g.append("g")
.attr("fill", "steelblue")
// 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)
// create one path for features (geom) of each state in US.
usa
{
// 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' */
const map = g.appeand('g')
.attr
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 */
// the code below draws the outline
svg.append('path')
.attr('d', worldPath(worldOutline))
.attr('stroke', '#dcdcdc')
.attr('fill', 'none');
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.
