// xScale will help us set the x position of the bars
xScale = d3.scaleBand() //Ordinal scale
.domain(d3.range(dataset.length)) //sets the input domain for the scale
.rangeRound([0, w]) //enables rounding of the range
.paddingInner(0.05); //spacing between each bar
// xScale은 막대의 x 위치를 설정해줌
xScale2 = d3.scaleBand() // 균일한 band(묶음, 단)으로 연속 range를 나눔
.domain(d3.range(dataset.length)) // 스케일에 대한 입력 domain 설정(dataset길이만큼 범위를 설정)
.rangeRound([0, w]) // range의 반올림을 허용
.paddingInner(0.05); // 각 막대 사이의 공간
//yScale will help us map data to the height of bars in the barchart
yScale = d3.scaleLinear()
.domain([0, d3.max(dataset)]) //sets the upper end of the input domain to the largest data value in dataset
.range([0, h]);
// yScale은 막대 차트에서 막대 높이에 데이터를 매핑해줌
yScale2 = d3.scaleLinear()
.domain([0, d3.max(dataset)]) // 입력 domain 상단을 데이터셋에서 가장 큰 데이터 값으로 설정
.range([0, h]);
//Create SVG element
svg = d3.select(body)
.append("svg")
.attr("width", w)
.attr("height", h);
// SVG 요소 생성
svg2 = d3.select(body)
.append("svg")
.attr("width", w)
.attr("height", h);
//Create bars
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) { // position in x-axis
return xScale(i); // we will pass the values from the dataset
})
.attr("y", function(d) {
return h - yScale(d);
})
.attr("width", xScale.bandwidth()) //Asks for the bandwith of the scale
.attr("height", function(d) {
return yScale(d);
})
.attr("fill", function(d) {
return "rgb("+ Math.round(d * 8) + ",0," + Math.round(d * 10) + ")"; //Change the color of the bar depending on the value
});
svg2.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => xScale2(i))
.attr("y", d => h - yScale2(d))
.attr("width", xScale2.bandwidth())
.attr("height", d => yScale2(d))
.attr("fill", d => `rgb(${Math.round(d * 8)},0,${Math.round(d * 10)})`);
d3.select(button)
.on("click", function() {
newData(); //Changes d3 values of the data
updateBar(); //Updates the bar chart
updateBar2(); // 막대 차트2를 업데이트
});
function newData(){
while (dataset.length > 0) { //Clear the current dataset
dataset.pop();
}
for (var i = 0; i < 20; i++) { //Loop 20 times
var newNumber = Math.floor(Math.random() * 20) + 5; //New random integer (5-25)
dataset.push(newNumber); //Add new number to array
}
}
function updateBar(){
//Update all rects
svg.selectAll("rect")
.data(dataset)
.transition() // <---- Here is the transition
.duration(2000) // 2 seconds
.attr("y", function(d) {
return h - yScale(d);
})
.attr("height", function(d) {
return yScale(d);
})
.attr("fill", function(d) {
return "rgb("+ Math.round(d * 8) + ",0," + Math.round(d * 10) + ")";
});
}
function updateBar2() {
svg2.selectAll("rect")
.data(dataset)
.transition()
.duration(2000)
.delay((d, i) => i * 100)
.attr("y", d => h - yScale2(d))
.attr("height", d => yScale2(d))
.attr("fill", d => `rgb(${Math.round(d * 8)},0,${Math.round(d * 10)})`);
}
md`
Transitions are very powerful and customizable with d3, as explaind in the [documentation](https://github.com/d3/d3-transition). For example, try adding _.delay(function(d,i){return i*100})_ after duration(2000)...
Transitions는 [documentation](https://github.com/d3/d3-transition)에서 설명된 것처럼 매우 강력하고 d3으로 사용자정의 가능하게 합니다. 예를 들어, duration(2000) 다음에 _.delay((d, i) => i * 100)_를 추가해보세요...
`
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.
