D3.js Example

作業

生成AI:ChatGPTの無料版

入力したプロンプト

htmlで、d3.jsのコードを作成してください。
グラフを作成するものにしてください。
グラフは、csvファイルを参照する形式としてください。
javascript部は別ファイルで参照する形にしてください。

出力

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3.js Bar Chart</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>D3.js Bar Chart</h1>
    <div id="chart"></div>
  </body>
</html>

不要な部分やscript.jsの参照は変えています。

d3.csv("data.csv").then(function(data) {
  const svg = d3.select("#chart")
    .append("svg")
    .attr("width", 500)
    .attr("height", 300);
  
  const xScale = d3.scaleBand()
    .domain(data.map(function(d) { return d.name; }))
    .range([50, 450])
    .padding(0.1);
  
  const yScale = d3.scaleLinear()
    .domain([0, d3.max(data, function(d) { return d.value; })])
    .range([250, 50]);
  
  svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", function(d) { return xScale(d.name); })
    .attr("y", function(d) { return yScale(d.value); })
    .attr("width", xScale.bandwidth())
    .attr("height", function(d) { return 250 - yScale(d.value); })
    .attr("fill", "steelblue");
  
  const xAxis = d3.axisBottom(xScale);
  svg.append("g")
    .attr("transform", "translate(0, 250)")
    .call(xAxis);
  
  const yAxis = d3.axisLeft(yScale);
  svg.append("g")
    .attr("transform", "translate(50, 0)")
    .call(yAxis);
});

data.csvの参照は適宜、変更します。

name,value
A,10
B,20
C,30
D,40
E,50

B101 d3.js グラフ

作成物

D3.js Example

作業

出力

コメント