Published
Edited
Oct 8, 2021
1 fork
md`# 국민지원금 지급대상 하위88% 자치구별 Hex Map `
import { callout } from "@d3/line-chart-with-tooltip"
projection = d3
.geoMercator()
.center([128, 36])
.fitSize([config.mapWidth, config.mapHeight], geoJson)
topoData = await FileAttachment("topoKorea.json").json()
geoJson = topojson.feature(topoData, topoData.objects.skorea_provinces_2018_geo)
korea = await FileAttachment("topoKorea.json").json()
modeColor = d3.scaleThreshold()
.domain([60, 81, 88, 95, 100])
.range(["#3288bd", "#66c2a5", "#fdae61", "#d53e4f", "#9e0142"])
radius = d3.scaleSqrt([0, d3.mean(data, d => d.rate)], [0, hexbin.radius() * Math.SQRT2])
config = {
const c = _config;
const _width = width > 1000 ? 1000 : width;
// const mapWidth = _width - c.marginHorizontal * 2;
const mapWidth = _width - 20;
return {
..._config,
mapX: 20,
mapY: 30,
mapWidth,
mapHeight: mapWidth,
width: _width,
height: _width,
};
}
_config = {
marginHorizontal: 10
}
hexbin = d3.hexbin().extent([
[0, 0],
[width, width]
]).radius(0.1)
format = {
const format = d3.format(",.0f");
return data.population ? d => `${format(d)} ${data.population}` : format;
}
tip = d3tip.tip().attr('class', 'd3-tip').html(function (e, d) {
return e, d;
})
d3tip = import("https://cdn.skypack.dev/d3-v6-tip")
html ` <style>
.d3-tip {
font-family: 'Noto Sans KR', Arial, Helvetica, sans-serif;
line-height: 1.4;
padding: 20px;
pointer-events: none !important;
color: #203d5d;
box-shadow: 0 4px 20px 4px rgba(0, 20, 60, .1), 0 4px 80px -8px rgba(0, 20, 60, .2);
background-color: #fff;
border-radius: 4px;
margin-top: -10px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: #fff;
position: absolute;
pointer-events: none;
}
/* Northward tooltips */
.d3-tip.n:after {
content: "▼";
margin: -1px 0 0 0;
top: 100%;
left: 0;
text-align: center;
}
/* Eastward tooltips */
.d3-tip.e:after {
content: "◀";
margin: -4px 0 0 0;
top: 50%;
left: -8px;
}
/* Southward tooltips */
.d3-tip.s:after {
content: "▲";
margin: 0 0 1px 0;
top: -8px;
left: 0;
text-align: center;
}
/* Westward tooltips */
.d3-tip.w:after {
content: "▶";
margin: -4px 0 0 -1px;
top: 50%;
left: 100%;
}
.tooltip-oi:before{
width: 12px;
height: 12px;
border-radius: 12px;
content: "";
display: inline-block;
margin-right: 6px;
background-color: #BCBDBE;
format: ",.0f";
}
</style>`
width = 960
height = 960
topojson.feature(korea, korea.objects.skorea_provinces_2018_geo).features
d3 = require("d3@6", "d3-hexbin@0.2", "d3-array@3", "d3-tip")
topojson = require("topojson-client@3")
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.
