Data Visualization Specialist | Previously
@WashingtonPost @WallStreetJournal @MITSenseableCity
Public
Edited
Jul 17, 2024
7 stars
deck.gl | population density map of South Korea
Also listed in…
Big data visualization
updateData = (group) => {
const thisData = group === "Children under 5" ? dataChildren : dataElderly;
// 기존 레이어 배열을 가져와서 HexagonLayer만 업데이트
const currentLayers = deckgl.props.layers;
const updatedLayers = currentLayers.map((layer) => {
if (layer.id === "heatmap") {
return new deck.HexagonLayer({
...layer.props,
data: thisData // 데이터만 업데이트
});
}
return layer;
});
deckgl.setProps({ layers: updatedLayers });
}
update = (city) => {
const cityData = cityLabels.filter((d) => d.name === city)[0];
deckgl.setProps({
initialViewState: {
longitude: cityData.position[0],
latitude: cityData.position[1],
zoom: cityData.zoom,
pitch: 28,
bearing: 0,
transitionDuration: 3000,
transitionInterpolator: new deck.FlyToInterpolator(),
transitionEasing: d3.easeSinInOut
}
});
}
deckgl = {
return new deck.DeckGL({
container,
layers,
initialViewState: viewState,
controller: true
});
}
viewState = ({
longitude: 127.378, // 126.978
latitude: 35.5665, // 37.5665
zoom: 6.4,
pitch: 28, // 기울기 각도: 40.5
bearing: 0 // 방위각: -27.36 (0 -> 북쪽)
})
layers = [
new deck.GeoJsonLayer({
id: "base-world",
data: worldUrl,
stroked: true,
filled: true,
lineWidthMinPixels: 0.5,
getLineColor: [8, 17, 29],
getFillColor: [8, 17, 29]
}),
new deck.HexagonLayer({
id: "heatmap",
colorRange,
data: data,
elevationRange: [0, 3000], // [0, 3000],
elevationScale: data && data.length ? 42 : 0,
extruded: true,
getPosition: (d) => [d.longitude, d.latitude],
getElevationWeight: (d) => d.population,
elevationAggregation: "SUM", // SUM을 통해 elevation weight 합산
getColorWeight: (d) => d.population, // 색상 가중치 함수
colorAggregation: "SUM", // 색상 가중치 합산 방식
radius: radiusIndex, // 1000, 200
upperPercentile: 100, // 상위 100% 사용, 즉 제외되는 데이터 없음
pickable: true,
opacity: 1,
material,
lightSettings,
transitions: {
elevationScale: 3000
}
}),
new deck.TextLayer({
id: "text-layer",
data: cityLabels,
pickable: true,
getPosition: (d) => d.position,
getText: (d) => (d.name == "Korea" ? "" : d.name),
getSize: 15, // 텍스트 크기
getAngle: 0,
getTextAnchor: "middle", // 수평 정렬
getAlignmentBaseline: "center", // 수직 정렬
getColor: [255, 255, 255], // 텍스트 색상
fontFamily: "Arial", // 글꼴 패밀리
fontWeight: "normal", // 글꼴 두께
getPixelOffset: [0, -20] // 픽셀 오프셋
})
]
Korea = ({
position: [127.378, 35.5665],
name: "Korea",
zoom: 6.4
})
cityLabels = [
{ position: [126.978, 37.5665], name: "Seoul", zoom: 8 },
{ position: [129.0756, 35.1796], name: "Busan", zoom: 8 },
{ position: [127.3845, 36.3504], name: "Daejeon", zoom: 8 },
{ position: [128.6014, 35.8714], name: "Daegu", zoom: 8 },
// { position: [126.7052, 37.4563], name: "Incheon", zoom: 8 },
{ position: [126.905, 35.1595], name: "Gwangju", zoom: 8 },
// { position: [127.0396, 37.2746], name: "Suwon", zoom: 8 },
{ position: [126.489, 34.8679], name: "Mokpo", zoom: 8 },
{ position: [126.5222, 33.5097], name: "Jeju", zoom: 8 },
{
position: [127.378, 35.5665],
name: "Korea",
zoom: 6.4
}
]
colorRange = {
return [
[1, 152, 189], // 청록
[73, 227, 206], // 밝은 청록
[216, 254, 181],
[254, 237, 177], // 노란색
[254, 173, 84],
[209, 55, 78] // 빨간색
];
}
lightSettings = {
return {
lightsPosition: [-0.144528, 49.739968, 8000, -3.807751, 54.104682, 8000],
ambientRatio: 0.4,
diffuseRatio: 0.6,
specularRatio: 0.2,
lightsStrength: [0.8, 0.0, 0.8, 0.0],
numberOfLights: 2
};
}
material = ({
ambient: 0.64,
diffuse: 0.6,
shininess: 32,
specularColor: [51, 51, 51]
})
// data = group == "Children under 5" ? dataChildren : dataElderly
data = dataChildren
sumElderly = d3.sum(dataElderly, (d) => d.population)
sumChildren = d3.sum(dataChildren, (d) => d.population)
dataElderly = d3.csvParse(
await FileAttachment("reduced_over60_resolution_data.csv").text(),
d3.autoType
)
dataChildren = d3.csvParse(
await FileAttachment("reduced_under5_resolution_data.csv").text(),
d3.autoType
)
worldUrl = "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson"
deck = require.alias({
h3: {}
})("deck.gl@latest/dist.min.js") //@8.8.25 or @latest
html`
<style>
.container {
background-color: rgba(8, 17, 29, 1); // original
//background-color: rgba(18, 35, 48, 1); // original
}
</style>
`
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.
