unemploymentData
stateToDateToRate = new Map(
unemploymentData
// create one [key, value] array for each state
.map(d => ([
d.state,
new d3.InternMap(
// create one [key, value] array for each month
d.rates.map(({date, rate}) => ([date, rate]))
)
]))
// filter out PR since it is not in our map projection
.filter(([state, rates]) => state !== 'Puerto Rico')
)
minRate = d3.min(stateToDateToRate, ([state, rates]) => d3.min(rates.values()))
maxRate = d3.max(stateToDateToRate, ([state, rates]) => d3.max(rates.values()))
color = d3.scaleSequential()
.domain([minRate, maxRate])
.interpolator(d3.interpolateOrRd)
dates = unemploymentData[0].rates.map(d => d.date)
date
viewof date = Scrubber(dates, {
autoplay: false,
loop: false,
format: d3.timeFormat('%B %Y')
})
{
const width = 600;
const height = 400;
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
// draw map
const projection = d3.geoAlbersUsa()
.fitSize([width, height], usaGeo);
const path = d3.geoPath().projection(projection);
svg.selectAll('path')
// Our map projection does not include Puerto Rico
.data(usaGeo.features.filter(d => d.properties.NAME !== 'Puerto Rico'))
.join('path')
.attr('d', path)
.attr('fill', d => color(stateToDateToRate.get(d.properties.NAME).get(date)))
.attr('stroke', 'white')
return svg.node();
}
date2
choropleth = {
const width = 600;
const height = 400;
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
// draw map
const projection = d3.geoAlbersUsa()
.fitSize([width, height], usaGeo);
const path = d3.geoPath().projection(projection);
// draw the states
const states = svg.selectAll('path')
// Our map projection does not include Puerto Rico
.data(usaGeo.features.filter(d => d.properties.NAME !== 'Puerto Rico'))
.join('path')
.attr('d', path)
.attr('stroke', 'white');
// a function that sets the fill attribute for the states for the given date
function update(date) {
states.attr('fill', d => color(stateToDateToRate.get(d.properties.NAME).get(date)));
}
// add the update function to the svg.node() object
// so that we can call it outside of this cell
svg.node().update = update;
return svg.node();
}
choropleth.update(date2)
radius = d3.scaleSqrt()
.domain()
.range()
symbolMap = {
const width = 600;
const height = 400;
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
// draw map
const projection = d3.geoAlbersUsa()
.fitSize([width, height], usaGeo);
const path = d3.geoPath().projection(projection);
// draw the states
svg.selectAll('path')
// Our map projection does not include Puerto Rico
.data(usaGeo.features.filter(d => d.properties.NAME !== 'Puerto Rico'))
.join('path')
.attr('d', path)
.attr('stroke', 'white')
.attr('fill', '#d3d3d3');
// draw the circles
// set the transform attribute to position the cirlces in the center of the states
// set the color of the circles
// we do not have to set the radius yet
// create the update function that sets the
// r attribute for the circles for the given date
function update(date) {
}
// add the update function to the svg.node() object
// so that we can call it outside of this cell
svg.node().update = update;
return svg.node();
}
// call the update function whenever the scrubber updates
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.