import { color } from "@jashkenas/inputs"
c = color()
c.value
c
L = require('leaflet@1.2.0')
html`<link href='${resolve(
'leaflet@1.2.0/dist/leaflet.css'
)}' rel='stylesheet' />`
w = width
h = width/1.5
container = {
// this is a javascript thing
const div = DOM.element("div", { style: `height:800px;` });
//yield div;
//this is a Leaflet thing
const map = L.map(div).setView([40.7299, -85], 5);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
const mystyle = {
color: "red",
weight: 2,
opacity: 0.5,
flavor: "red"
};
//adding static data to the map
const json = L.geoJSON(geojson.features, { style: mystyle });
json.addTo(map);
return div;
}
d3 = require('d3', 'd3-geo')
topojson = require('topojson')
json = d3.json("https://unpkg.com/world-atlas@1/world/110m.json")
projection = d3
.geoOrthographic()
.center([-73.9888682, 40.6916651])
.translate([width / 2, h / 2])
//.scale(width / (2 * Math.PI))
.fitSize([width, h], geojson)
graticule = d3.geoGraticule10()
path = d3.geoPath().projection(projection)
html`<svg id ="d3map" style="height: ${h}px; width:${width}px">
<path d="${path(graticule)}" stroke=${c.value} fill="none"></path>
</svg>`
path(graticule)
svg = d3
.select("#d3map")
.style("background-color", "cyan")
.attr("height", h)
.attr("width", width)
svg
.selectAll("path")
.data(geojson.features)
.enter()
.append("path")
.attr("stroke", "gray")
.attr("stroke-width", "1")
.attr("fill", "chartreuse")
.attr("d", path)
.attr("id", function (n) {
return n.id;
})
.exit()
path(geojson.features[1])
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.
