EJ Fox & Ian Johnson
streaming data, code, acid, design
import {
countyShapes,
postOfficesByCounty,
populationByCounty
} from "@enjalot/us-county-datasets"
countyShapes.features
fips = "48201"
// fips = "48157"
county = {
let shape = countyShapes.features.filter(d => d.id == fips)[0];
let obj = {
...shape
};
obj.properties.population = populationByCounty.get(fips);
obj.properties.postOffices = postOfficesByCounty.get(fips);
return obj;
}
import { congress } from "@jeremiak/an-animated-cartogram-of-the-us-congress"
congress
d3 = require("d3")
height = 800
{
let d = county.properties.postOffices[0];
return projection([d.longitude, d.latitude]);
// return d;
}
{
let d = stationsByStation.get("US1TXHRR093");
// return d[0];
return projection([d[0].LONGITUDE, d[0].LATITUDE]);
}
drawCounty = {
let svg = d3
.create("svg")
.attr("width", height)
.attr("height", height);
// .style("background-color", "#fff");
svg
.selectAll("path")
.data([county])
.join("path")
.attr("d", path)
.attr("fill", "none")
// .attr("fill", d => {
// return populationColor(density(d))
// })
.attr("stroke", "#111")
.attr("stroke-width", 0.35);
svg
.selectAll("circle.post")
.data(county.properties.postOffices)
.join("circle")
.attr("r", 2)
.attr("cx", d => projection([d.longitude, d.latitude])[0])
.attr("cy", d => projection([d.longitude, d.latitude])[1])
.attr("fill", "blue")
.classed("post", true);
svg
.selectAll("circle.noaa")
.data(stationsByStation)
.join("circle")
.classed("noaa", true)
.attr("r", 2)
.attr("cx", d => {
let s = d[1][0];
let p = projection([s.LONGITUDE, s.LATITUDE]);
if (p) return p[0];
return 0;
})
.attr("cy", d => {
let s = d[1][0];
let p = projection([s.LONGITUDE, s.LATITUDE]);
if (p) return p[1];
return 0;
})
.attr("fill", "orange");
return svg.node();
}
harrisPrecincts = FileAttachment("texas-precincts-2016-2.json").json({
typed: true
})
drawCountyCanvas = {
let canvas = d3
.create("canvas")
.attr("width", height)
.attr("height", height)
.node();
canvas.width = height;
canvas.height = height;
let ctx = canvas.getContext("2d");
let path = d3.geoPath(projection).context(ctx);
ctx.strokeStyle = "#111";
ctx.lineWidth = 2;
ctx.beginPath();
path(county);
ctx.stroke();
// harrisPrecincts.features.forEach(d => {
// ctx.strokeStyle = "#111";
// ctx.lineWidth = 1;
// ctx.beginPath();
// path(d);
// ctx.stroke();
// });
return canvas;
}
projection = d3.geoAlbersUsa().fitSize([height, height], county)
path = d3.geoPath(projection)
stationsRaw = FileAttachment("harris-weather.csv").csv({ typed: true })
d3.extent(stationsRaw, d => d.PRCP)
d3.extent(stationsRaw, d => d.TMAX)
d3.extent(stationsRaw, d => d.WSF2)
Array.from(
d3.group(stationsRaw.filter(d => d.WSF2 > 30), d => d.DATE).keys()
).sort((a, b) => +b - +a)
stationsByStation = d3.group(stationsRaw, d => d.STATION)
center = turf.centroid(county.geometry)
center.geometry.coordinates
//zoom = 8
import { Scrubber } from "@mbostock/scrubber"
// flyto
mapboxmap.flyTo({
// These options control the ending camera position: centered at
// the target, at zoom level 9, and north up.
center: center.geometry.coordinates,
zoom: zoom,
bearing: 0,
// These options control the flight curve, making it move
// slowly and zoom out almost completely before starting
// to pan.
speed: 0.4, // make the flying slow
curve: 1, // change the speed at which it zooms out
// This can be any easing function: it takes a number between
// 0 and 1 and returns another number between 0 and 1.
easing: function(t) {
return t;
},
// this animation is considered essential with respect to prefers-reduced-motion
essential: true
})
mapboxgl = {
const gl = await require("mapbox-gl@0.54");
if (!gl.accessToken) {
// token allowed only for @sw1227
gl.accessToken = mapboxToken;
("pk.eyJ1Ijoic3cxMjI3IiwiYSI6ImNqeTFiYXF5cTA2ajYzaHE4cmEycnRteTkifQ.FR2JtUicCVzbH7xszfObEA");
const href = await require.resolve("mapbox-gl@0.49/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
url = `https://api.mapbox.com/styles/v1/${mapboxTheme}/static/${
center.geometry.coordinates
},${zoom},0.00,0.00/${width}x${height}${devicePixelRatio > 1 ? "@2x" : ""}`
turf = require("@turf/turf@5")
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.
