md`# Indian Subcontinent Border Disputes`
mapEverything = {
let container = DOM.element('div', { style: `width:600px;height:400px` });
yield container;
}
L = require("leaflet@1.2.0");
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
map = {
const map = L.map(mapEverything, {zoomControl: false}).setView([32, 85.1240], 5);
L.svg().addTo(map);
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png', {
attribution: 'Wikimedia maps beta | © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
yield map;
}
pak_url = "https://raw.githubusercontent.com/india-in-data/border-disputes/master/merged/pakistan_disputed.json";
china_url = "https://raw.githubusercontent.com/india-in-data/border-disputes/master/merged/china_disputed.json";
nepal_url = "https://raw.githubusercontent.com/india-in-data/border-disputes/master/merged/nepal_disputed.json";
pak_geojson = (await fetch(pak_url)).json()
china_geojson = (await fetch(china_url)).json()
nepal_geojson = (await fetch(nepal_url)).json()
d3 = require('d3@5')
svg = {
await Promises.delay(1000);
yield d3.select(mapEverything).select("svg")
}
{
// plot pak
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 featureElement1 = svg.selectAll("path.pak")
.data(pak_geojson.features)
.enter()
.append("path")
.attr("stroke", "gray")
.attr("class", "pak")
.attr("fill", d3.interpolateRdPu(0.25))
.attr("fill-opacity", 0.6)
const featureElement2 = svg.selectAll("path.china")
.data(china_geojson.features)
.enter()
.append("path")
.attr("class", "china")
.attr("stroke", "gray")
.attr("fill", d3.interpolateRdPu(1))
.attr("fill-opacity", 0.6)
const featureElement3 = svg.selectAll("path.nepal")
.data(nepal_geojson.features)
.enter()
.append("path")
.attr("class", "nepal")
.attr("stroke", "gray")
.attr("fill", d3.interpolateRdPu(0.5))
.attr("fill-opacity", 0.6)
const textEle1 = svg.append("text")
.attr("x", 1200/3)
.attr("y", 100)
.attr("color", "black")
.attr("text-anchor", "middle")
.attr("font-size", "28px")
.attr("font-weight", "bold")
.attr("font-family", "consolas")
.text("Disputed Territories of");
const textEle2 = svg.append("text")
.attr("x", 1200/3)
.attr("y", 135)
.attr("color", "black")
.attr("text-anchor", "middle")
.attr("font-size", "28px")
.attr("font-weight", "bold")
.attr("font-family", "consolas")
.text("The Indian Subcontinent");
const update1 = () => {
featureElement1.attr("d", geoPath)
featureElement2.attr("d", geoPath)
featureElement3.attr("d", geoPath)
textEle1.attr("d", geoPath)
textEle2.attr("d", geoPath)
}
update1()
map.on("moveend", update1)
}
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.
