Published
Edited
Jan 3, 2020
1 star
md`# Test`
mapContainer = {
let mapContainer = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
yield mapContainer;
}
L = require('leaflet@1.2.0')
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
d3 = require("https://d3js.org/d3.v5.min.js")
map = {
const map = L.map(mapContainer).setView([34.3416, 108.9398], 4);
L.svg().addTo(map);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map)
yield map;
}
svg = {
await Promises.delay(1000);
yield d3.select(mapContainer).select("svg")
}
geoJSON = (await fetch('https://gist.githubusercontent.com/shimizu/749df041c1945aef78fd992c7dfbe0e1/raw/9ccbe014d7638f42cc21b7d0432445fffa1eec38/japan.geojson')).json()
{
const projectPoint = function(x, y){
var point = map.latLngToLayerPoint(new L.LatLng(y, x))
this.stream.point(point.x, point.y)
}
const transform = d3.geoTransform({point: projectPoint})
const geoPath = d3.geoPath().projection(transform)
const featureElement = svg.selectAll("path")
.data(geoJSON.features)
.enter()
.append("path")
.attr("stroke", "gray")
.attr("fill", "green")
.attr("fill-opacity", 0.6)
const update = () => {
featureElement.attr("d", geoPath)
}
update()
map.on("moveend", update)
}
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.
