// The data comes in a ZIP archive.
archive = FileAttachment("PaleoDEMS_long_lat_elev_csv_v2.zip")
.arrayBuffer()
.then(buffer => jszip.loadAsync(buffer))
// Extraction of the file corresponding to the selected geologic time period.
filenames = Object.values(archive.files)
.filter(f => f.dir === false)
.map(f => {
const age = f.name.replace(/.*_/, "").replace(".csv", "");
return { name: age, value: f.name };
})
map = archive.file(fileName).async("text")
// The formatting of the files is not completely consistent.
parsedData = d3
// Standardize carriage returns
.csvParse(map.replace(/\r/g, "\n"))
// Standardize field names
.map(p => {
let lon = p["# lon"] !== undefined ? p["# lon"] : p.longitude;
let lat = p.lat !== undefined ? p.lat : p.latitude;
let elev = p.elev !== undefined ? p.elev : p.elevation;
return { lon, lat, elev };
})
// Standardize array sizes: some extend to [+180, -90], others stop at [+179, -89]
// (data is ordered in rows from top left to bottom right)
vals = parsedData.filter(d => d.lon < 180 && d.lat > -90).map(d => d.elev)
// Construct the DEM object
dem = Object({
width: 360,
height: 180,
data: vals
})
chroma = require("chroma-js@2.1.0")
jszip = require("jszip@3.1.5/dist/jszip.min.js")
d3 = require("d3@5", "d3-geo", "d3-format", "d3-contour")
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.
