- 막대 그래프 (Bar Chart): 범주형 데이터를 시각화하는 데 사용되며, 각 범주별로 막대의 높이를 표시합니다. 예시 코드: ```javascript var data = [10, 20, 30, 40, 50];
var svg = d3.select(“svg”);
svg.selectAll(“rect”) .data(data) .enter() .append(“rect”) .attr(“x”, function(d, i) { return i * 40; }) .attr(“y”, function(d) { return 200 - d; }) .attr(“width”, 30) .attr(“height”, function(d) { return d; });
2. 선 그래프 (Line Chart): 시간, 변화 등과 같은 연속적인 데이터를 시각화하는 데 사용됩니다. 데이터 포인트를 선으로 연결하여 변화를 보여줍니다.
예시 코드:
```javascript
var data = [
{ x: 0, y: 10 },
{ x: 1, y: 20 },
{ x: 2, y: 15 },
{ x: 3, y: 25 },
{ x: 4, y: 30 }
];
var line = d3.line()
.x(function(d) {
return d.x * 50;
})
.y(function(d) {
return 200 - d.y;
});
var svg = d3.select("svg");
svg.append("path")
.datum(data)
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "steelblue");
- 원 그래프 (Pie Chart): 비율이나 비율의 변화를 시각화하는 데 사용됩니다. 각 항목의 비율을 원형으로 표현합니다. 예시 코드: ```javascript var data = [30, 20, 50];
var pie = d3.pie();
var arc = d3.arc() .innerRadius(0) .outerRadius(100);
var svg = d3.select(“svg”);
svg.selectAll(“path”) .data(pie(data)) .enter() .append(“path”) .attr(“d”, arc) .attr(“fill”, function(d, i) { return [“red”, “green”, “blue”][i]; }) .attr(“transform”, “translate(150,150)”); ```
이 외에도 D3.js에는 많은 다른 종류의 차트와 그래프가 있으며, 이를 사용하여 데이터를 시각화할 수 있습니다. D3.js의 공식 문서와 예제 코드를 참고하시면 더 많은 정보를 얻을 수 있습니다.