Curious human. Interested in the mechanics of how things work.
Public
Edited
Apr 17, 2023
1 fork
1 star
map = {
// const svg = d3.create("svg")
// .attr("viewBox", [0, 0, width, height])
// .attr('id', 'map-airports')
// .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 = worldMap.append("g")
//.attr("clip-path", `url(${new URL("#clip", location)})`);
// g.append("use")
// .attr("xlink:href", new URL("#outline", location))
// .attr("fill", colorschemes[colorScheme]['water']);
// g.append("path")
// .attr("d", path(graticule))
// .attr("stroke", colorschemes[colorScheme]['land'])
// .attr("fill", "none");
// g.append("path")
// .attr("d", path(land))
// .attr("fill", colorschemes[colorScheme]['land']);
// worldMap.append("use")
// .attr("xlink:href", new URL("#outline", location))
// .attr("stroke", colorschemes[colorScheme]['land'])
// .attr("fill", "none");
// svg.append("g")
// .selectAll("circle")
// .data(data2)
// .join("circle")
// .attr("transform", d => `translate(${projection([d.longitude, d.latitude])})`)
// .attr("r", d => colorschemes[colorScheme]["sizes"][d['type']])
// //.attr('fill', colorschemes[colorScheme]['point'])
// .attr('fill', d => colorschemes[colorScheme][d['type']])
// .attr("class", d => d['type'])
// .append("title")
// .text(d => d.name);
if (sizes.includes("small")) {
worldMap.append("g")
.attr('id', 'small')
.selectAll("circle")
.data(small)
.join("circle")
.attr("transform", d => `translate(${projection([d.longitude, d.latitude])})`)
.attr("r", d => colorschemes[colorScheme]["sizes"][d['type']])
//.attr('fill', colorschemes[colorScheme]['point'])
.attr('fill', d => colorschemes[colorScheme][d['type']])
.attr("class", d => d['type'])
.append("title")
.text(d => d.name);
}
if (sizes.includes("medium")) {
worldMap.append("g")
.attr('id', 'medium')
.selectAll("circle")
.data(medium)
.join("circle")
.attr("transform", d => `translate(${projection([d.longitude, d.latitude])})`)
.attr("r", d => colorschemes[colorScheme]["sizes"][d['type']])
//.attr('fill', colorschemes[colorScheme]['point'])
.attr('fill', d => colorschemes[colorScheme][d['type']])
.attr("class", d => d['type'])
.append("title")
.text(d => d.name);
}
if (sizes.includes("large")) {
worldMap.append("g")
.attr('id', 'large')
.selectAll("circle")
.data(large)
.join("circle")
.attr("transform", d => `translate(${projection([d.longitude, d.latitude])})`)
.attr("r", d => colorschemes[colorScheme]["sizes"][d['type']])
//.attr('fill', colorschemes[colorScheme]['point'])
.attr('fill', d => colorschemes[colorScheme][d['type']])
.attr("class", d => d['type'])
.attr("opacity", 0.5)
.append("title")
.text(d => d.name);
}
worldMap.append("g")
.attr('id', 'new-airports')
.selectAll("circle")
.data(newApts)
.join("circle")
.attr("transform", d => `translate(${projection([parseFloat(d.city_lng), parseFloat(d.city_lat)])})`)
.attr("r", d => colorschemes[colorScheme]["sizes"]['new_airport'])
//.attr('fill', colorschemes[colorScheme]['point'])
.attr('fill', d => colorschemes[colorScheme]['new_airport'])
.attr("class", d => d['type'])
.append("title")
.text(d => d.name);
return worldMap.node();
}
newLocs = newApts.map (row => [parseFloat(row.city_lng), parseFloat(row.city_lat)]);
large
d3.geoGuyou
Imports
small = data2.filter(row => { return row['type'] === 'small_airport'; });
medium = data2.filter(row => { return row['type'] === 'medium_airport'; });
large = data2.filter(row => { return row['type'] === 'large_airport'; });
newApts = FileAttachment("new-2050-airports@2.csv").csv()
points = (await FileAttachment("all-airports-2019.csv").csv()).map(({longitude, latitude}) => [parseFloat(longitude), parseFloat(latitude)])
mesh = d3.geoVoronoi(points).polygons()
colorschemes = ({
"Dark": {"land": '#454545', "water": '#191A1A', "point":"#d8d8d8", "new_airport": "#ff6b35",
"small_airport": "#a8dadc", "medium_airport": "#457b9d", "large_airport": "#e63946",
"sizes": {"small_airport": 0.25,
"medium_airport": 1,
"large_airport": 2,
"new_airport": 1}},
"DarkBlue": {"land": '#3A525C', "water": '#1C2C33', "point":"#d8d8d8", "new_airport": "#ff6b35",
"small_airport": "#a8dadc", "medium_airport": "#457b9d", "large_airport": "#e63946",
"sizes": {"small_airport": 0.25,
"medium_airport": 1,
"large_airport": 1,
"new_airport": 1}},
"DarkBlue2": {"land": '#091827', "water": '#0C2339', "point":"#d8d8d8", "new_airport": "#ff6b35",
"small_airport": "#a8dadc", "medium_airport": "#457b9d", "large_airport": "#e63946",
"sizes": {"small_airport": 0.25,
"medium_airport": 1,
"large_airport": 1,
"new_airport": 1}},
"Light": {"land": '#EEEDEC', "water": '#D3CECA', "point":"steelblue", "new_airport": "#ff6b35",
"small_airport": "#a8dadc", "medium_airport": "#457b9d", "large_airport": "#e63946",
"sizes": {"small_airport": 0.25,
"medium_airport": 1,
"large_airport": 1,
"new_airport": 1}},
"Map1": {"land": '#E5D1A9', "water": '#FAF6EF', "point":"steelblue", "new_airport": "#ff6b35",
"small_airport": "#a8dadc", "medium_airport": "#457b9d", "large_airport": "#e63946",
"sizes": {"small_airport": 0.25,
"medium_airport": 1,
"large_airport": 1,
"new_airport": 1}},
"Map2": {"land": '#F2EBE2', "water": 'none', "point": "steelblue", "new_airport": "#fb8500",
"small_airport": "#91e5f6", "medium_airport": "#59a5d8", "large_airport": "#386fa4",
"sizes": {"small_airport": 0.25,
"medium_airport": 1,
"large_airport": 2,
"new_airport": 1.5}},
})
path = d3.geoPath(projection)
projection = d3.geoEquirectangular()
d3.geoImago
outline = ({type: "Sphere"})
graticule = d3.geoGraticule10()
land = topojson.feature(world, world.objects.land)
world.objects
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")
import {mapProjection, activeColorScheme, worldMap} from "b3a0a78984d6df2e"
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.
