pixel flipper, data sifter. trying to see what I can while I'm here
{
let canvas = d3.create("canvas").node()
canvas.width = width
canvas.height = height
let ctx = canvas.getContext("2d")
let path = d3.geoPath(projection)
.context(ctx)
ctx.strokeStyle = "black"
ctx.beginPath()
path(states)
ctx.stroke()
let i, p
for(i = 0; i < smokes.length; i++) {
if(smokes[i] < 0.0001) continue;
p = projection([lons[i], lats[i]])
if(!p) continue;
ctx.fillStyle = color(smokes[i])
ctx.fillRect(p[0], p[1], 1, 1)
}
return canvas
}
data = FileAttachment("2026500000100_latlon.nc").arrayBuffer()
reader = new NetCDFReader(data)
reader.variables
lats = reader.getDataVariable("lat")
lons = reader.getDataVariable("lon")
smokes = reader.getDataVariable("Column-integrated_mass_density_UnknownLevelType-200")
smokeExtent = d3.extent(smokes)
d3.bin()(smokes).map(d => [d.x0, d.x1, d.length])
color = d3.scaleSequential(d3.interpolateMagma)
.domain([smokeExtent[1], smokeExtent[0]])
opacity = d3.scaleLinear()
.domain(smokeExtent)
.range([0, 1])
projection = d3.geoAlbersUsa()
.fitSize([width, height], states.features.filter(d => d.properties.name == "California")[0])
us = d3.json("https://unpkg.com/us-atlas@3/counties-10m.json")
states = topojson.feature(us, us.objects.states)
height = 500
d3 = require("d3@6")
topojson = require("topojson-client")
NetCDFReader = require('netcdfjs@1.0.0/dist/netcdfjs.js')
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.
