Published
Edited
Apr 28, 2021
//import {map as us_map} from "@d3/u-s-map"
//us_map
import {chart as choropleth} from "@mbostock/d3-choropleth"
//choropleth
mutable z = 42
viewof button = Button("Reset")
chart = {
const width = 975;
const height = 610;
const zoom = d3.zoom()
.scaleExtent([1, 8])
.on("zoom", zoomed);
// Set up the screen size for the map
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.on("click", reset);
const g = svg.append("g");
const counties = g.append("g").attr("class", "counties");
const states = g.append("g")
.attr("cursor", "pointer")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.join("path")
.attr("fill", d => color(state_data.get(d.id)))
.attr("d", path)
.attr("stroke", "black")
.on("click",clicked);
// mutable s = d
// going to make these a mouseover event instead of title. expecting to improve time to display
// .append("title")
// .text(d => `${d.properties.name}\n`
// + `${format((state_data.get(d.id))*100)}\n`
// + `${filtered_current_states_covid_data.values.name}`);
function draw_counties(d){
let state_id = d.id;
let state_counties = us.objects.counties.filter(d => d.geometries.id.slice(0, 2) == state_id);
mutable z = state_counties;
// counties
// .selectAll("path")
// .data(topojson.feature(us, us.objects.counties).features)
// .join("path")
// .attr("fill", d => color(county_data.get(d.id)))
// .attr("d", path)
// .attr("stroke", "black")
// .append("title")
// .text(d => `${d.properties.name}\n`
// + `${format((county_data.get(d.id))*100)}\n`
// + `${filtered_current_states_covid_data.values.name}`);
}
// svg.call(zoom);
svg.append("g")
.attr("transform", "translate(610,20)")
.append(() => legend({color, title: state_data.title, width: 260}));
function zoomed({transform}) {
g.attr("transform", transform);
}
function reset() {
states.transition().style("fill", null);
svg.transition().call(
zoom.transform,
d3.zoomIdentity,
d3.zoomTransform(svg.node()).invert([width / 2, height / 2])
);
}
function clicked(event, d) {
const [[x0, y0], [x1, y1]] = path.bounds(d);
event.stopPropagation();
states.transition().style("fill", null);
d3.select(this).transition().style("fill", "red");
mutable s = d3.select(this).data()[0];
// counties();
svg.transition().duration(750).call(
zoom.transform,
d3.zoomIdentity
.translate(width / 2, height / 2)
.scale(Math.min(8, 0.9 / Math.max((x1 - x0) / width, (y1 - y0) / height)))
.translate(-(x0 + x1) / 2, -(y0 + y1) / 2),
d3.pointer(event, svg.node())
);
draw_counties(d);
}
return Object.assign(svg.node(), {
zoomIn: () => svg.transition().call(zoom.scaleBy, 2),
zoomOut: () => svg.transition().call(zoom.scaleBy, 0.5),
// zoomTo: () => zoomToState(),
zoomReset: () => reset(),
});
}
mutable s = 42
scale_range = d3.extent(state_data.values())
state_names_map = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))
//Not using until I can make current data work first
//state_covid_timeline = d3.json("https://api.covidactnow.org/v2/states.timeseries.json?apiKey=e6b9f5ba67fa4dbb99bf7a5310524883")
current_states_covid_data = d3.json("https://api.covidactnow.org/v2/states.json?apiKey=e6b9f5ba67fa4dbb99bf7a5310524883")
// not needed right now, since pulling covid data for selected state
// raw_current_county_covid_data = d3.json("https://api.covidactnow.org/v2/cbsas.json?apiKey=e6b9f5ba67fa4dbb99bf7a5310524883")
raw_covid_data_counties_in_selected_state = d3.json(url)
url = "https://api.covidactnow.org/v2/county/"+convert_state_for_api+".json?apiKey=e6b9f5ba67fa4dbb99bf7a5310524883"
// raw_covid_data_counties_in_selected_state = {
// var gather_data = [];
// for (let c = 0; c < raw_current_county_covid_data.length; c++){
// if (id_of_selected_state == raw_current_county_covid_data[c].fips.slice(0, 2)){
// gather_data.push(raw_current_county_covid_data[c]);
// }
// }
// return gather_data;
// // counties.set(us.objects.states.geometries[s].id, combined_data);
// }
convert_state_for_api = {
for (let s = 0; s < filtered_current_states_covid_data.length; s++){
if (filtered_current_states_covid_data[s].fips == id_of_selected_state){
return filtered_current_states_covid_data[s].state;
}
}
}
id_of_selected_state = s._groups[0][0].__data__.id
//Not using yet
// county_covid_timeline = d3.json("https://api.covidactnow.org/v2/county/MD.timeseries.json?apiKey=e6b9f5ba67fa4dbb99bf7a5310524883")
{
let svg = d3.select( "body" )
.append( "svg" )
.attr( "width", width )
.attr( "height", height );
let g = svg.append( "g" );
return svg.node();
}
{
// Use D3 to "select" the chart object, which is an SVG element (and JavaScript object)
const svg = d3.select(chart);
// You can access the SVG element's viewbox attribute from JavaScript
// See how d3-zoom does it: https://github.com/d3/d3-zoom/blob/master/src/zoom.js
const {x, y, width, height} = svg.node().viewBox.baseVal;
chart.zoomReset();
return button;
}
// bounds = {
// const state_topojson = us.objects.states.geometries.filter(d => d.id == state_zoom)[0];
// const state_geojson = topojson.feature(us, state_topojson);
// const [[x0, y0], [x1, y1]] = path.bounds(state_geojson);
// return [[x0, y0], [x1, y1]];
// }
//margin = () => ({top: 20, right: 30, bottom: 30, left: 40});
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.