The avatar for @justingosses
Justin Gosses
JavaScript | Python | Data Visualization | Web Development | Geology | Space | Analytics | IoT | Learn, Build Stuff, and Figure Things Out
Public
Edited
Dec 1, 2023
Fork of GeoJSON Viewer
1
Insert cell
Insert cell
Insert cell
AgeOfRockToInclude = 1000
Insert cell
Insert cell
Insert cell
Insert cell
Select a data source…
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
predata
Insert cell
data = predata.success.data
Insert cell
{
const container = yield htl.html`<div style="height: 500px;">`;
const map = L.map(container);
const layer = L.geoJSON(data).addTo(map);
map.fitBounds(layer.getBounds(), {maxZoom: 9});
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
}
Insert cell
map = html`<svg viewBox="0 0 ${width} ${height}">
<path d="${path(data)}" fill="none" stroke="black"></path>
</svg>`
Insert cell
projection = d3.geoIdentity()
.reflectY(true)
.fitWidth(width, data)
Insert cell
path = d3.geoPath(projection)
Insert cell
width = 954
Insert cell
height = Math.ceil(path.bounds(data)[1][1])
Insert cell
d3 = require("d3-geo@1")
Insert cell
import {jsonInput} from "@mbostock/file-input"
Insert cell

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.
Learn more