plot = {
const projection = d3.geoMercator().center([-74.83,10.99]).scale(scale)
// .translate([0, 0]);
const path = d3.geoPath().projection(projection);
const svg = d3.select(DOM.svg(width, height))
.style("width", "100%")
.style("height", "auto");
// return topojson.feature(us, us.objects.land)
const newSvg = ready(svg, path, col, projection).node();
return newSvg
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
function ready(svg, path, us, projection) {
svg.append("path")
.datum(topojson.feature(us, us.objects.COL_adm1))
.attr("class", "land")
.attr("d", path);
// svg.append("path")
// .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
// .attr("class", "states")
// .attr("d", path);
return svg;
}
weatherStations = d3.json("https://geojson-ldxdcwirxw.now.sh/metar-api-sample-json-10945.json")
us = d3.json("https://geojson-ufpskuwfiq.now.sh/us.json")
col = d3.json("https://file-zntbefnosg.now.sh")
topojson = require("topojson-client@3")
d3 = require("https://d3js.org/d3.v5.min.js")
import {slider, color} from "@jashkenas/inputs"
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.
