frontend + d3
abbr = ({
경상남도: '경남',
전라남도: '전남',
부산광역시: '부산',
경상북도: '경북',
전라북도: '전북',
전라남도: '전남',
경기도: '경기',
서울특별시: '서울',
충청남도: '충남',
충청북도: '충북',
대구광역시: '대구',
울산광역시: '울산',
광주광역시: '광주',
대전광역시: '대전',
제주특별자치도: '제주',
인천광역시: '인천',
강원도: '강원',
세종특별자치시: '세종'
})
function ordinal_suffix_of(i) {
var j = i % 10,
k = i % 100;
if (j == 1 && k != 11) {
return i + "st";
}
if (j == 2 && k != 12) {
return i + "nd";
}
if (j == 3 && k != 13) {
return i + "rd";
}
return i + "th";
}
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
)
projection([100, 11])
_coordArea = ({
서울특별시: [37.555122, 126.986582],
인천광역시: [37.452767, 126.697307],
경상남도: [35.469338, 128.193187],
전라남도: [34.893334, 126.945604],
부산광역시: [35.161750, 129.042408],
경상북도: [36.302481, 128.823517],
전라북도: [35.722528, 127.102812],
전라남도: [34.903778, 126.965841],
경기도: [37.409609, 127.524272],
충청남도: [36.727791, 126.812951],
충청북도: [37.007661, 127.736082],
대구광역시: [35.831101, 128.562997],
울산광역시: [35.546947, 129.258458],
광주광역시: [35.155365, 126.837620],
대전광역시: [36.340177, 127.398068],
제주특별자치도: [33.396528, 126.564528],
강원도: [37.843505, 128.178992],
세종특별자치시: [36.480150, 127.289282]
})
coordArea = lodash.mapValues(_coordArea, d => projection(d.reverse()))
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'
lodash = require('lodash')
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.
