生成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コーディングアシスタントを使って機能追加してみました。
※ グラフのバーをクリックすると削除できます
'
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();
コメント