The workspace is for a data visualization class at the Tokyo Metropolitan University.
Instructor: @sugi2000lab @sugi2000
Also listed in…
2023 最終課題企画
barChart7([
119322, 99526, 0, 417966, 284533, 0, 524329, 233382, 0, 887070, 330840, 0,
1075174, 395487, 0, 480307, 146640, 0
])
barAndDotChart(
[
119322, 99526, 0, 417966, 284533, 0, 524329, 233382, 0, 887070, 330840, 0,
1075174, 395487, 0, 480307, 146640, 0
],
[
171259, 136919, 0, 584427, 377991, 0, 811077, 339611, 0, 1077280, 377820, 0,
702724, 256827, 0, 262085, 107799, 0
]
) //平成２５年(10年前)
barChart7 = (dataset) => {
const width = 900;
const height = 200;
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]);
const barPadding = 1; // barの間隔を指定
// バーの描画
const rects = svg.selectAll("rect").data(dataset).join("rect");
function getColorByIndex(index) {
var colors = ["blue", "red", "black"]; // 使用する色のリスト
return colors[index % colors.length]; // インデックスを色のリストの長さで割った余りを使って色をサイクルさせる
}
rects
.attr("x", (d, i) => i * (width / dataset.length))
.attr("y", (d) => height - (d / d3.max(dataset)) * height)
.attr("width", width / dataset.length - barPadding)
.attr("height", (d) => d)
.attr("fill", (d, i) => getColorByIndex(i));
// 既存のテキスト（棒グラフの下）
svg
.selectAll("text.label")
.data(dataset)
.join("text")
.attr("class", "label")
.attr("font-family", "sans-serif")
.attr("font-size", 9)
.attr("fill", "white")
.attr(
"x",
(d, i) =>
i * (width / dataset.length) + (width / dataset.length - barPadding) / 2
)
.attr("y", height - 8) // 一定の高さに調整
.attr("text-anchor", "middle")
.text((d, i) => dannzyodataset[i]);
// 追加のテキスト（棒グラフの下）
svg
.selectAll("text.additionalValue")
.data(dataset)
.join("text")
.attr("class", "additionalValue")
.attr("font-family", "sans-serif")
.attr("font-size", 9)
.attr("fill", "black")
.attr(
"x",
(d, i) =>
i * (width / dataset.length) + (width / dataset.length - barPadding) / 2
)
.attr("y", 12) // 一定の高さに調整
.attr("text-anchor", "middle")
.text((d) => d) // 与えられたデータをそのまま表示
.text((d) => (d !== 0 ? d : "")); // 0の場合は空の文字列を表示
return svg.node();
}
barAndDotChart = (dataset1, dataset2) => {
const width = 900;
const height = 200;
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]);
const barPadding = 1; // barの間隔を指定
// バーの描画
const rects = svg.selectAll("rect").data(dataset1).join("rect");
rects
.attr("x", (d, i) => i * (width / dataset1.length))
.attr("y", (d) => height - (d / d3.max(dataset1)) * height)
.attr("width", width / dataset1.length - barPadding)
.attr("height", (d) => d)
.attr("fill", "steelblue");
// 点の描画
svg
.selectAll("circle")
.data(dataset2)
.join("circle")
.attr(
"cx",
(d, i) =>
i * (width / dataset2.length) +
(width / dataset2.length - barPadding) / 2
)
.attr("cy", (d) => height - (d / d3.max(dataset2)) * height)
.attr("r", 3) // 点の半径
.attr("fill", (d) => (d === 0 ? "transparent" : "red"));
// 既存のテキスト（棒グラフの下）
svg
.selectAll("text.label")
.data(dataset1)
.join("text")
.attr("class", "label")
.attr("font-family", "sans-serif")
.attr("font-size", 9)
.attr("fill", "white")
.attr(
"x",
(d, i) =>
i * (width / dataset1.length) +
(width / dataset1.length - barPadding) / 2
)
.attr("y", height - 8) // 一定の高さに調整
.attr("text-anchor", "middle")
.text((d, i) => dannzyodataset[i]);
svg
.selectAll("text.value")
.data(dataset1)
.join("text")
.attr("class", "value")
.attr("font-family", "sans-serif")
.attr("font-size", 9)
.attr("fill", "steelblue")
.attr(
"x",
(d, i) =>
i * (width / dataset1.length) +
(width / dataset1.length - barPadding) / 2
)
.attr("y", 12) // 一定の高さに調整
.attr("text-anchor", "middle")
.text((d, i) => {
if (i % 3 === 0) {
// 3つごとに繰り返す
return "1\n";
} else if (i < dataset1.length - 1) {
const prevValue =
parseFloat(dataset1[i - 1]) !== 0 &&
isFinite(parseFloat(dataset1[i - 1]) / parseFloat(d))
? (parseFloat(d) / parseFloat(dataset1[i - 1]))
.toFixed(4)
.slice(0, -1)
: "";
return `${prevValue}\n`;
} else {
return "";
}
});
svg
.selectAll("text.value2")
.data(dataset2)
.join("text")
.attr("class", "value2")
.attr("font-family", "sans-serif")
.attr("font-size", 9)
.attr("fill", "red")
.attr(
"x",
(d, i) =>
i * (width / dataset2.length) +
(width / dataset2.length - barPadding) / 2
)
.attr("y", 20) // 一定の高さに調整
.attr("text-anchor", "middle")
.text((d, i) => {
if (i % 3 === 0) {
// 3つごとに繰り返す
return "1\n";
} else if (i < dataset1.length - 1) {
const prevValue =
parseFloat(dataset2[i - 1]) !== 0 &&
isFinite(parseFloat(dataset2[i - 1]) / parseFloat(d))
? (parseFloat(d) / parseFloat(dataset2[i - 1]))
.toFixed(4)
.slice(0, -1)
: "";
return `${prevValue}\n`;
} else {
return "";
}
});
return svg.node();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
