md`# India Pakistan Border Dispute`
mapEverything = {
let container = DOM.element('div', { style: `width:500px;height:500px` });
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([34.78, 76.58], 6);
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;
}
azad_kashmir_url = "https://raw.githubusercontent.com/india-in-data/border-disputes/master/india_pakistan_dispute/Azad_Kashmir_Admin._by_Pakistan%3B_Claimed_by_India.json";
jammu_and_kashmir_url = "https://raw.githubusercontent.com/india-in-data/border-disputes/master/india_pakistan_dispute/Jammu_and_Kashmir_Admin._by_India%3B_Claimed_by_Pakistan.json"
gilgit_baltistan_url = "https://raw.githubusercontent.com/india-in-data/border-disputes/master/india_pakistan_dispute/Northern_Areas_Admin._by_Pakistan%3B_Claimed_by_India.json"
siachen_glacier_url = "https://raw.githubusercontent.com/india-in-data/border-disputes/master/india_pakistan_dispute/Siachen_Glacier_Claimed_by_Pakistan_and_India.json"
china_url = "https://raw.githubusercontent.com/india-in-data/border-disputes/master/india_china_dispute/india_china_all.json"
azad_kashmir_json = (await fetch(azad_kashmir_url)).json()
jammu_and_kashmir_json = (await fetch(jammu_and_kashmir_url)).json()
gilgit_json = (await fetch(gilgit_baltistan_url)).json()
siachen_json = (await fetch(siachen_glacier_url)).json()
china_json = (await fetch(china_url)).json()
d3 = require('d3@5')
svg = {
await Promises.delay(1000);
yield d3.select(mapEverything).select("svg")
}
{
// plot
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 featureElement0 = svg.selectAll("path.china")
.data(china_json.features)
.enter()
.append("path")
.attr("stroke", "gray")
.attr("class", "china")
.attr("fill", d3.rgb(250, 250, 248))
.attr("fill-opacity", 1.);
const featureElement1 = svg.selectAll("path.azad")
.data([azad_kashmir_json])
.enter()
.append("path")
.attr("stroke", "gray")
.attr("class", "azad")
.attr("fill", d3.interpolateRdPu(0.75))
.attr("fill-opacity", 0.6);
const featureElement2 = svg.selectAll("path.jk")
.data([jammu_and_kashmir_json])
.enter()
.append("path")
.attr("stroke", "gray")
.attr("class", "jk")
.attr("fill", d3.interpolateRdPu(0.25))
.attr("fill-opacity", 0.6);
const featureElement3 = svg.selectAll("path.gilgit")
.data([gilgit_json])
.enter()
.append("path")
.attr("stroke", "gray")
.attr("class", "gilgit")
.attr("fill", d3.interpolateRdPu(0.75))
.attr("fill-opacity", 0.6);
const featureElement4 = svg.selectAll("path.siachen")
.data([siachen_json])
.enter()
.append("path")
.attr("stroke", "gray")
.attr("class", "siachen")
.attr("fill", d3.interpolateRdPu(0.25))
.attr("fill-opacity", 0.6);
const update1 = () => {
featureElement0.attr("d", geoPath)
featureElement1.attr("d", geoPath)
featureElement2.attr("d", geoPath)
featureElement3.attr("d", geoPath)
featureElement4.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.
