Published
Edited
Jan 10, 2021
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
L = require('leaflet@1.2.0')
Insert cell
html`<link href='${resolve(
'leaflet@1.2.0/dist/leaflet.css'
)}' rel='stylesheet' />`
Insert cell
Insert cell
w = width
Insert cell
h = width/1.5
Insert cell
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);
const accessToken =
"pk.eyJ1IjoibGlmZXdpbm5pbmciLCJhIjoiYWZyWnFjMCJ9.ksAPTz72HyEjF2AOMbRNvg";
//https://api.mapbox.com/styles/v1/satellite-v9/tiles/{z}/{x}/{y}?access_token=${accessToken}
L.tileLayer(
'https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibGlmZXdpbm5pbmciLCJhIjoiYWZyWnFjMCJ9.ksAPTz72HyEjF2AOMbRNvg',
{
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}
).addTo(map);

function onEachFeature(feature, layer) {
if (feature.properties && feature.properties.slug) {
layer.bindPopup(feature.properties.slug);
}
}

const mystyle = {
color: "red",
weight: 2,
opacity: .5
};
//adding static data to the map
const json = L.geoJSON(submarine, {
// customize color based on data properties–we could use other things for this!
style: function(feature) {
return { color: `#${feature.properties.color}`, weight: 1 };
},
onEachFeature: onEachFeature
});
json.addTo(map);
}
Insert cell
submarine = d3.json(
"https://raw.githubusercontent.com/telegeography/www.submarinecablemap.com/master/public/api/v2/cable/cable-geo.json"
)
Insert cell
Insert cell
Insert cell
Insert cell
d3 = require('d3', 'd3-geo')
Insert cell
topojson = require('topojson')
Insert cell
Insert cell
json = d3.json("https://unpkg.com/world-atlas@1/world/110m.json")
Insert cell
features = submarine.features.map(m => m.properties)
Insert cell
Insert cell
Insert cell
projection = d3
.geoOrthographic()
.center([-73.9888682, 40.6916651])
.translate([width / 2, h / 2])
//.scale(width/(2 * Math.PI))
.fitSize([width, h], geojson)
//.fitExtent([[10, 10], [width, h]], geojson.features[0])
Insert cell
graticule = d3.geoGraticule10()
Insert cell
path = d3.geoPath().projection(projection)
Insert cell
html`<svg id ="d3map" height=${h} width=${width}" style="background-color:cyan;">
<path d="${path(graticule)}" stroke="red" fill="none"></path>
${gjpaths.map(g => `<path stroke="gray" fill="papayawhip" d = ${g}></path>`)}
</svg>`
Insert cell
gjpaths = geojson.features.map(m => path(m))
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