Make chart - 2019년 연령별 통계
지난 2019년을 대상으로 집계한 연령별 통계입니다.
appendix = md`## Appendix`
data = FileAttachment("sample.json").json()
margin = ({ top: 10, right: 50, bottom: 30, left: 70 })
width = 800 - margin.left - margin.right
height = 300 - margin.top - margin.bottom
names = data.reduce((acc, cur) => {
acc.push(cur.name);
const s = new Set(acc);
return Array.from(s);
}, [])
xScale = d3.scaleBand()
.domain(names)
.range([margin.left, width - margin.right])
.paddingInner(0.2)
yScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.range([height - margin.bottom, margin.top])
xAxis = d3.axisBottom(xScale).tickSizeOuter(0)
yAxis = d3.axisLeft(yScale).tickSizeOuter(0)
<style>
rect {
fill: steelblue;
}
</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.
