[javascript] D3.js에는 어떤 종류의 차트와 그래프가 있는가?
  1. 막대 그래프 (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");
  1. 원 그래프 (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의 공식 문서와 예제 코드를 참고하시면 더 많은 정보를 얻을 수 있습니다.