weather = d3.csvParse(
await (await fetch(
'https://raw.githubusercontent.com/vega/vega-datasets/v1.29.0/data/weather.csv'
)).text()
, d3.autoType)
newWeather // Can download by using the cell menu on the left.
ghcnd = ({
seattle: FileAttachment("USW00024233.dly"), // SEATTLE TACOMA INTL AP WA
newYork: FileAttachment("USW00094789.dly") // NEW YORK JFK INTL AP NY
})
async function tidy(file, template) {
// https://www1.ncdc.noaa.gov/pub/data/ghcn/daily/readme.txt
const text = await file.text();
const lines = text.split("\n").filter(l => {
const year = +l.slice(11, 15);
return true; //2000 <= year && year < 2016;
});
const melted = lines.flatMap(l => {
const year = l.slice(11, 15);
const month = l.slice(15, 17);
const element = l.slice(17, 21);
const values = l.slice(21, 26);
return days.map((day, i) => ({
date: `${year}-${month}-${String(day).padStart(2, '0')}`,
element,
value: +l.slice(21 + i * 8, 26 + i * 8)
}));
});
return Array.from(
melted
.reduce((map, { date, element, value }) => {
if (value === -9999) return map;
const row = map.get(date) || { ...template, date };
row[element] = value;
return map.set(date, row);
}, new Map())
.values()
);
}
tidied = [
...(await tidy(ghcnd.seattle, { location: 'Seattle' })),
...(await tidy(ghcnd.newYork, { location: 'New York' }))
]
newWeather = transform(tidied)
// newWeather = newPython
newPython = d3.csvParse(await FileAttachment("weather@1.csv").text())
function transform(data) {
return data.map(
({
location,
date,
PRCP,
SNOW,
TMAX,
TMIN,
AWND,
WT01: fog,
WT02: heavyFog,
WT04: icePellets,
WT05: hail,
WT08: smokeOrHaze,
WT13: mist,
WT14: drizzle,
WT16: rain,
WT17: freezingRain,
WT18: snow,
WT22: iceFog
}) => ({
location,
date,
precipitation: PRCP / 10,
temp_max: TMAX / 10,
temp_min: TMIN / 10,
wind: AWND / 10,
weather:
snow || icePellets || SNOW > 0
? 'snow'
: rain || freezingRain || hail || PRCP > 0
? 'rain'
: drizzle || smokeOrHaze || mist
? 'drizzle'
: fog || heavyFog || iceFog
? 'fog'
: 'sun'
})
);
}
diffs = {
const diffs = {};
for (let i = 0; i < newWeather.length; i++) {
const before = weather[i],
after = newWeather[i];
for (const field of Object.keys(before))
if (before[field] != after[field])
(diffs[field] = diffs[field] || []).push([before[field], after[field]]);
}
return diffs;
}
vl.markBar()
.data(newWeather.filter(d => d.location === 'Seattle'))
.encode(
vl.x().sum('precipitation'),
vl.y().fieldO('date').timeUnit('day'),
)
.render()
import { vl } from '@vega/vega-lite-api'
d3 = require('d3-array@2', 'd3-dsv@1')
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.
