Curious human. Interested in the mechanics of how things work.
Public
Edited
Feb 24, 2023
1 fork
viewof index = Inputs.radio([2019, 2050], {label: "Show what year?", value: 2019})
viewof radiusRange = rangeSlider({
min: 0.0005,
max: 50,
// Note that values must be specified as array of length 2.
value: this ? this.value : [1, 25],
// Custom slider CSS, replaces all styles.
// theme: themes[theme],
// Overrides the range color. Support for range colors is up to the theme.
title: 'Circle radius',
description: 'Control minimum and maximum radius',
})
map = {
worldMap.select("#cities").remove()
worldMap.select("#connections").remove()
worldMap.select("#names").remove()
worldMap.append("g")
.attr("id", "cities")
.selectAll("circle")
.data(data.nodes)
.join("circle")
.attr("transform", d => `translate(${mapProjection([d[lngBase], d[latBase]])})`)
.attr('r', d => radiusFxn(parseFloat(d[radBase])))
.attr('fill', d => colorScale(d[colorBase]))
.attr("stroke", d => colorScale(d[colorBase]) === '#000000' ? 'white' : 'black')
.attr("stroke-width", 0.5)
return worldMap.node()
}
data.nodes[0]
radBase = index === 2019 ? "total_flights" : 'total_flights_2050';
colorBase = index === 2019 ? "community" : 'community_all_combined';
lngBase = 'city_lng'
latBase = 'city_lat'
colorScale = d3.scaleOrdinal().domain(communityDomain).range(['#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe', '#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080', '#ffffff', '#000000']);
new_edges = FileAttachment("new-all-city-year-edges-small.csv").csv({typed: true})
old_nodes = FileAttachment("all-whole-year-city-nodes.csv").csv({typed: true})
old_edges = FileAttachment("all-whole-year-city-edges.csv").csv({typed: true})
import {legend, Swatches} from "@d3/color-legend"
import {rangeSlider} from '@mootari/range-slider'
import {mapProjection, activeColorScheme, worldMap} from "b3a0a78984d6df2e"
import {slider} from "@jashkenas/inputs"
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.
