Curious human. Interested in the mechanics of how things work.
projection
map2 = {
let svg = worldMap;
svg.append("g")
.selectAll("circle")
.data(data)
.join("circle")
.attr("transform", d => `translate(${projection([d.longitude, d.latitude])})`)
.attr("r", 0.5)
.attr('fill', "green")
.append("title")
.text(d => d.name);
return svg.node();
}
worldMap = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("style", "background-color:"+colorschemes[colorScheme]['water']);
const defs = svg.append("defs");
defs.append("path")
.attr("id", "outline")
.attr("d", path(outline));
defs.append("clipPath")
.attr("id", "clip")
.append("use")
.attr("xlink:href", new URL("#outline", location));
const g = svg.append("g")
.attr("clip-path", `url(${new URL("#clip", location)})`);
g.append("use")
.attr("xlink:href", new URL("#outline", location))
.attr("id", "water")
.attr("fill", colorschemes[colorScheme]['water']);
g.append("path")
.attr("id", "land")
.attr("d", path(land))
.attr("fill", colorschemes[colorScheme]['land']);
return svg;
}
mapProjection = projection
activeColorScheme = colorScheme
activeRotationX = rotationX
activeRotationY = rotationY
mapPath = path
activeColorSchemeColors = colorschemes[activeColorScheme]
data = FileAttachment("all-airports-2019.csv").csv({typed: true})
colorschemes = ({
"Dark": {"land": '#454545', "water": '#191A1A' },
"DarkBlue": {"land": '#3A525C', "water": '#1C2C33'},
"DarkBlue2": {"land": '#091827', "water": '#0C2339'},
"Light": {"land": '#EEEDEC', "water": '#D3CECA'},
"Map1": {"land": '#E5D1A9', "water": '#FAF6EF'},
"Map2": {"land": '#F5E8D6', "water": 'none'},
})
path = d3.geoPath(mapProjection.rotate([rotationX, rotationY]))
import {slider} from "@jashkenas/inputs"
outline = ({type: "Sphere"})
graticule = d3.geoGraticule10()
land = {
let topo = topojson.feature(world, world.objects.land);
var g = topo.features[0].geometry;
// remove any polygon that starts below 70°S.
g.coordinates = g.coordinates.filter(d => d[0][0][1] > -60);
return topo
}
world = FileAttachment("land-50m.json").json()
topojson = require("topojson-client@3")
d3 = require("d3@6", "d3-geo-voronoi@1", "d3-fetch", "d3-geo@2", "d3-geo-projection@3", "d3-geo-polygon")
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.
