map = {
const context = DOM.context2d(width, height);
const path = d3.geoPath(projection, context);
function render() {
//Clear the screen
context.clearRect(0, 0, width, height);
//Draw a spehere of water
context.lineWidth = 2;
context.fillStyle = "#adf", context.strokeStyle = "#000";
context.beginPath(), path({type: "Sphere"}), context.fill(), context.stroke();
//Draw the land
context.fillStyle = "#222";
context.beginPath(), path(land), context.fill();
//Draw the arcs
context.strokeStyle = selectedColor;
context.lineWidth = 0.5;
context.beginPath(), path(selectedData), context.stroke();
}
return d3.select(context.canvas)
.call(drag(projection).on("drag.render", render))
.call(render)
.node();
}
projection = projections[selected_projection][0]
.fitExtent([[1, 1], [width - 1, height - 1]], {type: "Sphere"})
.translate([width / 2, height / 2])
.precision(0.1)
selected_inflow=z.filter(r => r[selected_institution] == 1, Inflow)
selected_outflow=z.filter(r => r[selected_institution] == 1, Outflow)
institutions=Object.keys(Inflow[0]).slice(14)
projections = Object({
"Globe": [d3.geoOrthographic(), rotate],
"Flat Earth": [d3.geoAzimuthalEquidistant().rotate([0,-90]), rotate],
"Standard": [d3.geoEckert3(), frozen],
//"Equirectangular": [d3.geoEquirectangular(), frozen],
//"Mercator": [d3.geoMercator(), frozen],
})
Url="https://gist.githubusercontent.com/zhengyunhan/6bae5a5d7872ea314ca155281865fcc3/raw/820ee002c06751c4689e6f7a64318446cdd54fae/select_inflow.csv"
Url2="https://gist.githubusercontent.com/zhengyunhan/ec0cba9408754fc0b38ae90b4dd65a10/raw/3ff848f89d4ebd2ded2c698f1697e18c9a4c3afa/select_outflow.csv"
Inflow=d3.csv(Url)
Outflow=d3.csv(Url2)
arcs = {
return {
type: "FeatureCollection",
features: [
{type: "Feature", geometry: {type:"LineString",coordinates:[[-0.1278, 51.5074], [-97.7431, 30.2672]]}},
{type: "Feature", geometry: {type:"LineString",coordinates:[[151.2093, -33.8688], [-60.1942, 46.1368]]}},
{type: "Feature", geometry: {type:"LineString",coordinates:[[-43.1729, -22.9068], [151.2093, -33.8688]]}},
{type: "Feature", geometry: {type:"LineString",coordinates:[[37.6173, 55.7558], [-60.1942, 46.1368]]}},
]
}
}
arc_inflow={
let features=[]
for (let i=0; i<selected_inflow.length; i++){
features.push({type: "Feature", geometry: {type:"LineString",coordinates:[[parseFloat(selected_inflow[i].lng), parseFloat(selected_inflow[i].lat)], [parseFloat(selected_inflow[i].des_lng), parseFloat(selected_inflow[i].des_lat)]]}},)
}
return {
type: "FeatureCollection",
features: features
}
}
arc_outflow={
let features=[]
for (let i=0; i<selected_outflow.length; i++){
features.push({type: "Feature", geometry: {type:"LineString",coordinates:[[parseFloat(selected_outflow[i].lng), parseFloat(selected_outflow[i].lat)], [parseFloat(selected_outflow[i].des_lng), parseFloat(selected_outflow[i].des_lat)]]}},)
}
return {
type: "FeatureCollection",
features: features
}
}
selectedData = {
switch (selected_inoutflow) {
case "Inflow": return arc_inflow
case "Outflow": return arc_outflow
}
}
selectedColor = {
switch (selected_inoutflow) {
case "Inflow": return "rgba(0,200,0,.7)"
case "Outflow": return "rgba(200,0,0,.7)"
}
}
land = topojson.feature(world, world.objects.land)
world = d3.json("https://unpkg.com/world-atlas@1/world/110m.json")
z = require('https://bundle.run/zebras@0.0.11')
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.
