Published
Edited
Apr 23, 2021
2 stars
valueExtent = d3.extent(activeData, d => d.value)
rScale = d3
.scaleSqrt()
.domain(valueExtent)
.range([radiusMin, radiusMax])
colorScale = d3.scaleSequential(d3.interpolatePlasma).domain(valueExtent)
darker = color => {
const lab = d3.lab(color);
lab.l *= 0.8;
return lab.toString();
}
activeData = dataType === 'Subdivisions'
? data.filter(d => !!d.geo)
: dataByParent.filter(d => !!d.geo)
csvData = {
const rawRows = d3.csvParse(await Files.text(csvFile));
const [subdivisionKey, valueKey] = rawRows.columns;
return rawRows.map(row => ({
code: row[subdivisionKey],
value: +row[valueKey]
}));
}
data = tidy(
csvData,
mutate({
geo: d => isoCodes[d.code],
parentCode: d => d.code.split('-')[0],
parentGeo: d => isoCodes[d.parentCode]
}),
)
dataByParent = tidy(
data,
groupBy(
['parentCode'],
[
summarize({
value: sum('value'),
code: last('parentCode'),
geo: last('parentGeo')
})
]
)
)
import { tidy, mutate, groupBy, summarize, sum, last } from '@pbeshai/tidyjs'
isoCodes = FileAttachment("iso_3166_2.json").json()
d3 = require("d3-geo@2", "d3-geo-projection@3", "d3-dsv", "d3-scale", "d3-array", "d3-scale-chromatic", "d3-color", "d3-zoom", "d3-selection", "d3-format")
topojson = require("topojson-client@3")
world = FileAttachment("countries-50m.json").json()
land = topojson.feature(world, world.objects.land)
countries = topojson.feature(world, world.objects.countries)
graticule = d3.geoGraticule10()
outline = ({ type: "Sphere" })
projxection = d3.geoMercator()
height = {
const [[x0, y0], [x1, y1]] = d3
.geoPath(projection.fitWidth(width, outline))
.bounds(outline);
const dy = Math.ceil(y1 - y0),
l = Math.min(Math.ceil(x1 - x0), dy);
projection.scale((projection.scale() * (l - 1)) / l).precision(0.2);
return dy;
}
import {
Button,
Checkbox,
Toggle,
Radio,
Range,
Select,
Text,
Textarea,
Search,
Table
} from "@observablehq/inputs"
import { fileInput } from "@mbostock/file-input-with-initial-value"
import { projectionInput } from "@d3/projection-comparison"
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.
