frontend + d3
Published
Edited
May 4, 2020
1 fork
mapConfig = ({
width: 300,
height: 400,
marginX: 20,
marginY: 80,
clippedWidth: 300 - 40,
clippedHeight: 400 - 160,
titleX: 10,
titleY: 30
})
makePath = d3.geoPath(projection)
projection = d3
.geoMercator()
.center([128, 36])
.fitSize([mapConfig.clippedWidth, mapConfig.clippedHeight], geoJson)
dataUrl = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vS1ETNfNzSDw78jOEi39OLhcHl8TTzBQ40iQE-ZiXnBhYzupHsNcfkcFNjmQIUjb2HTrt522kxzSvGE/pub?gid=277509267&single=true&output=tsv'
uniquePlace.filter(d => !korProvinces.some(v => v === d))
dataByNth.values().map(d => ({
...d,
maxValue: d3.max(d.values, d => d.values.length),
minValue: d3.min(d.values, d => d.values.length)
}))
d3.max(dataByNth.values(), d => d.values.length)
d3.min(dataByNth.values(), d => d.values.length)
dataByNth = d3.map(
d3
.nest()
.key(d => d.nth)
.key(d => d.birthPlace)
.entries(data),
d => d.key
)
uniquePlace = d3
.map(data, d => {
if (d.birthPlace === '') return 'noname';
if (placeReWire[d.birthPlace]) return placeReWire[d.birthPlace];
return d.birthPlace;
})
.keys()
getAgeThreshold = age => Math.floor(age / 10) * 10
uniqueName = d3.map(data, d => d.nameChn)
maxAge = d3.max(data, d => d.age)
data = d3.tsv(dataUrl, parseRawTsv)
korProvinces = d3.map(geoJson.features, d => d.properties.name).keys()
topojson = require('topojson@v3.0.2')
geoJson = topojson.feature(topoData, topoData.objects.skorea_provinces_2018_geo)
topoData = await FileAttachment("topoKorea.json").json()
import { legend } from '@d3/color-legend'
d3 = require('d3@5.15.0')
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.
