us = FileAttachment("states-10m.json").json()
nation = topojson.feature(us, us.objects.nation)
proj = d3.geoAlbersUsa().fitSize([cards.map.width, cards.map.height], nation);
statemesh = topojson.mesh(us, us.objects.states, (a, b) => a !== b)
mutable mutCent = [-108.4569010952928, 36.85687898029089];
forecast = {
const resp = await fetch(`https://api.weather.gov/points/${mutCent[1]},${mutCent[0]}`);
if (resp.status !== 200) {
return {
place: "Unknown",
periods: []
}
}
const json = await resp.json();
if (json.properties.forecast) {
const forecastResp = await fetch(json.properties.forecast);
const tbl = await forecastResp.json();
const place = json.properties.relativeLocation.properties;
if (tbl.properties === undefined) {
return {
place: `${place.city}, ${place.state}`,
periods: [],
response1: json,
response2: tbl,
response2Status: forecastResp.status
}
}
return {
place: `${place.city}, ${place.state}`,
periods: tbl.properties.periods,
response1: json,
response2: tbl,
response2Status: forecastResp.status
};
}
return {
place: "",
periods: [],
}
}
plot = {
const result = Plot.plot({
projection: proj,
length: { range: [0, 200] },
marks: [
Plot.geo(nation, { fill: "#e0e0e0" }),
Plot.geo(statemesh, { stroke: "white" }),
Plot.geo({
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": mutCent
},
}, { stroke: "red", radius: 2 })
],
});
result.onclick = function(evt) {
const width = Number(result.getAttribute("width"));
const height = Number(result.getAttribute("height"));
const v = proj.invert([evt.offsetX, evt.offsetY]);
mutable mutCent = v;
}
return result;
}