AI生成

B101 d3.js グラフ


生成AIで作成しました。d3.jsを使ってグラフを作成します。

ベース

作成物

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

機能追加

AIコーディングアシスタントを使って機能追加してみました。

Cursorで実施
※ グラフのバーをクリックすると削除できます
'

CSVデータの形式

'
CSVをインポート CSVをエクスポート
  • 追加機能
  • html部
  • スプリクト部

データの読み書き追加

グラフをクリックして削除

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D3.js サンプル</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .bar {
            fill: #69b3a2;
        }
        .bar:hover {
            fill: #2e8b57;
        }
        .instruction {
            margin: 10px 20px;
            color: #666;
            font-size: 0.9em;
        }
        .tooltip {
            position: absolute;
            padding: 8px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            border-radius: 4px;
            font-size: 12px;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.2s;
        }
        .csv-section {
            margin: 20px;
            padding: 15px;
            background-color: #f5f5f5;
            border-radius: 5px;
        }
        .csv-textarea {
            width: 100%;
            height: 100px;
            margin: 10px 0;
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 3px;
            font-family: monospace;
        }
        .button-group {
            margin: 10px 0;
        }
        button {
            padding: 5px 15px;
            background-color: #69b3a2;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            margin-right: 5px;
        }
        button:hover {
            background-color: #2e8b57;
        }
    </style>
</head>
<body>
    <div class="instruction">※ グラフのバーをクリックすると削除できます</div>
    <div id="chart"></div>
    <div class="tooltip"></div>
    <div class="csv-section">
        <h3>CSVデータ</h3>
        <textarea id="csv-data" class="csv-textarea" placeholder="A,10
B,20
C,15"></textarea>
        <div class="button-group">
            <button onclick="importCSV()">CSVをインポート</button>
            <button onclick="exportCSV()">CSVをエクスポート</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html> 
// サンプルデータ
let data = [
    { name: "A", value: 10 },
    { name: "B", value: 20 },
    { name: "C", value: 15 },
    { name: "D", value: 25 },
    { name: "E", value: 30 }
];

// グラフの設定
const margin = { top: 20, right: 20, bottom: 30, left: 40 };
const width = 600 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;

// SVGの作成
const svg = d3.select("#chart")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

// ツールチップの設定
const tooltip = d3.select(".tooltip");

// グラフの描画関数
function drawChart() {
    // 既存の要素を削除
    svg.selectAll("*").remove();

    // X軸のスケール
    const x = d3.scaleBand()
        .range([0, width])
        .domain(data.map(d => d.name))
        .padding(0.1);

    // Y軸のスケール
    const y = d3.scaleLinear()
        .range([height, 0])
        .domain([0, d3.max(data, d => d.value)]);

    // X軸の描画
    svg.append("g")
        .attr("transform", `translate(0,${height})`)
        .call(d3.axisBottom(x));

    // Y軸の描画
    svg.append("g")
        .call(d3.axisLeft(y));

    // 棒グラフの描画
    svg.selectAll(".bar")
        .data(data)
        .enter()
        .append("rect")
        .attr("class", "bar")
        .attr("x", d => x(d.name))
        .attr("width", x.bandwidth())
        .attr("y", d => y(d.value))
        .attr("height", d => height - y(d.value))
        .on("mouseover", function(event, d) {
            const [x, y] = d3.pointer(event);
            const chartRect = document.getElementById("chart").getBoundingClientRect();
            
            tooltip
                .style("opacity", 1)
                .html(`名前: ${d.name}<br>値: ${d.value}`)
                .style("left", (chartRect.left + x + margin.left + 10) + "px")
                .style("top", (chartRect.top + y + margin.top - 28) + "px");
        })
        .on("mouseout", function() {
            tooltip.style("opacity", 0);
        })
        .on("click", function(event, d) {
            // クリックされたデータを削除
            data = data.filter(item => item.name !== d.name);
            drawChart();
        });
}

// CSVデータのインポート
function importCSV() {
    const csvText = document.getElementById("csv-data").value.trim();
    if (!csvText) {
        alert("CSVデータを入力してください。");
        return;
    }

    try {
        const newData = csvText.split("\n")
            .map(line => line.trim())
            .filter(line => line)
            .map(line => {
                const [name, value] = line.split(",").map(item => item.trim());
                const numValue = parseInt(value);
                if (!name || isNaN(numValue)) {
                    throw new Error("無効なデータ形式です。");
                }
                return { name, value: numValue };
            });

        data = newData;
        drawChart();
    } catch (error) {
        alert("CSVデータの形式が正しくありません。\n例: A,10\nB,20\nC,15");
    }
}

// CSVデータのエクスポート
function exportCSV() {
    const csvText = data
        .map(d => `${d.name},${d.value}`)
        .join("\n");
    document.getElementById("csv-data").value = csvText;
}

// 初期描画
drawChart(); 
sample_B101.zip

コメント