Stories with data, visuals & code at CNN.
viewof data = Scrubber(full_data_chunked, {
delay: 16,
autoplay: false
})
map = svg`<svg viewBox="0 0 975 610">
<g fill="none" stroke="#000" stroke-linejoin="round" stroke-linecap="round">
<path stroke="#aaa" stroke-width="0.1" d="${path(counties)}"></path>
<path stroke-width="0.5" d="${path(states)}"></path>
<path d="${path(nation)}"></path>
</g>
<g>
${data
.map(
(d, i) => `<circle
cx=${getLat(d.location)}
cy=${getLng(d.location)}
r=${1.5}
fill="#cc0000"
data-idx=${i}
/>`
)
.join("\n")}
</g>
</svg>`
getLat = (d) => {
console.log(d)
let loc = projection([+d.longitude, +d.latitude])
return `${loc && loc[0]}`
}
getLng = (d) => {
let loc = projection([+d.longitude, +d.latitude])
return `${loc && loc[1]}`
}
// datafiles = [
// 'amtrak-2022-12-01-130550',
// 'amtrak-2022-12-01-131040',
// 'amtrak-2022-12-01-133959',
// 'amtrak-2022-12-01-135156',
// 'amtrak-2022-12-01-141433',
// 'amtrak-2022-12-01-143026',
// 'amtrak-2022-12-01-144524',
// 'amtrak-2022-12-01-145533',
// 'amtrak-2022-12-01-151723',
// 'amtrak-2022-12-01-153421',
// 'amtrak-2022-12-01-154610',
// 'amtrak-2022-12-01-155630',
// 'amtrak-2022-12-01-162700',
// 'amtrak-2022-12-01-165036',
// 'amtrak-2022-12-01-171409',
// 'amtrak-2022-12-01-173026',
// 'amtrak-2022-12-01-174521',
// 'amtrak-2022-12-01-175538'
// ]
// endpoint = `https://raw.githubusercontent.com/codecreative/train-tester/main/data/${datafile}`
// dataold = fetch(endpoint)
// .then((response) => response.json())
// .then((json) => json.filter((d) => d.location))
full_data_chunked = R.splitEvery(60)(full_data)
projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305])
path = d3.geoPath()
states = topojson.mesh(us, us.objects.states, (a, b) => a !== b)
nation = topojson.feature(us, us.objects.nation)
counties = topojson.mesh(us, us.objects.counties, (a, b) => a !== b && (a.id / 1000 | 0) === (b.id / 1000 | 0))
us = FileAttachment("counties-albers-10m.json").json()
topojson = require("topojson-client@3")
d3 = require("d3-geo@2")
import { Scrubber } from "@mbostock/scrubber"
R = import("https://cdn.skypack.dev/ramda")
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.
