chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
barData.sort((b, a) => a.value - b.value);
//Draw the bars
svg.selectAll('rect')
.data(barData)
.enter().append('rect')
.style("fill", 'steelblue')
.attr("x", d => scale.x(d.name))
.attr("width", scale.x.bandwidth())
.attr("y",d => scale.y(d.value))
.attr("height", d => scale.y(0) - scale.y(d.value));
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.append("path")
.attr("d", d3.line()([[0, height/2], [width, height/2]]))
.attr("stroke", "black")
.style("stroke-dasharray", ("3, 3"));
svg.append("text")
.text(`전국`)
.attr("y", height / 2 - 5)
.attr("x", width - 5)
.attr('text-anchor','end')
.attr('class','label');
return svg.node();
}
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(scale.x))
.attr("class", "x-axis");
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(scale.y))
.attr("class", "t-axis");
scale = {
const x = d3.scaleBand()
.domain(barData.map(d => d.name))
.range([margin.left, width - margin.right])
.paddingInner(0.1);
const y = d3.scaleLinear()
.domain([0, 100]).nice()
.range([height - margin.bottom, margin.top]);
return { x, y }
}
data = [
{name: '전국', value: 64.5},
{name: '5개 광역시', value: 65.5},
{name: '서울', value: 60.6},
{name: '수도권', value: 64.1},
{name: '기타 지방', value: 64.7},
]
barData = data.filter(d => d.name != '전국')
height = 400
width = 950
margin = ({ top: 30, right: 0, bottom: 20, left: 30});
d3 = require("d3@5")
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.
