contours = d3
.contours()
.thresholds(thresholds)
.size([dem.width, dem.height])(dem.data)
colorScale = chroma.scale(colors).domain(thresholds)
archive = fetch(
"https://cors-anywhere.herokuapp.com/" +
"https://www.earthbyte.org/webdav/ftp/Data_Collections" +
"/Scotese_Wright_2018_PaleoDEM/PaleoDEMS_long_lat_elev_csv_v2.zip"
)
.then(response => response.arrayBuffer())
.then(buffer => jszip.loadAsync(buffer))
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")
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)
dem = Object({
width: 360,
height: 180,
data: vals
})
projection = d3
.geoEquirectangular()
.translate([dem.width / 2, dem.height / 2])
.precision(0.1)
height = Math.floor((width * dem.height) / dem.width)
chroma = require("chroma-js")
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.
