Curious human. Interested in the mechanics of how things work.
Public
Edited
Apr 11, 2023
2 forks
1 star
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)
.join("circle")
.attr("transform", d => `translate(${mapProjection([d[lngBase], d[latBase]])})`)
.attr('r', d => radiusFxn(d[radBase]))
.attr('fill', d => d['pc_change'] < 0 ? '#FF924C' : '#5DD39E')
.attr("stroke", 'white')//d => colorScale(d[colorBase]) === '#000000' ? 'white' : 'black')
.attr("stroke-width", 0.5)
return worldMap.node()
}
radiusFxn = d3.scaleLinear().domain(radDomain).range(radiusRange)
radDomain = {
return d3.extent(data.map(row => row[base]));
}
radBase = 'abs_pc_change'
base = 'abs_pc_change'
latBase = 'city_lat'
lngBase = 'city_lng'
data[0]
data.sort((a, b) => b[base] - a[base]).slice(0, 20).map(row => row.id);
data = FileAttachment("world-scale-change@2.csv").csv({typed: true})
import {legend, Swatches} from "@d3/color-legend"
import {slider} from "@jashkenas/inputs"
import {mapProjection, mapPath, activeColorScheme, worldMap} from "b3a0a78984d6df2e"
import {rangeSlider} from '@mootari/range-slider'
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.
