The avatar for @tmu-dataviz-class
TMU Dataviz Class
The workspace is for a data visualization class at the Tokyo Metropolitan University. Instructor: @sugi2000lab @sugi2000
Public
2023 Final Project
Edited
Feb 3
1 fork
11
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function createMultiPieCharts() {
// グラフの寸法を設定
const margin = { top: 150, right: 50, bottom: 100, left: 300 };
const width = 900 - margin.left - margin.right;
const height = 900 - margin.top - margin.bottom;

// SVG を作成
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

// 各地域ごとに円グラフを描画
const regions = Array.from(new Set(dataset2.map((d) => d.area)));

const numChartsPerRow = 3; // 1行あたりの円グラフの数

const paddingFactor = 1;

regions.forEach((region, i) => {
const row = Math.floor(i / numChartsPerRow);
const col = i % numChartsPerRow;

const chartWidth = width / numChartsPerRow;
const chartHeight = height / Math.ceil(regions.length / numChartsPerRow);
const radius = Math.min(chartWidth, chartHeight) / 2.5;

const regionData = dataset2.filter((d) => d.area === region);

const originalLanguageData = d3.group(regionData, (d) => d.original);
const originalLanguageCounts = Array.from(
originalLanguageData,
([original, translations]) => ({
original,
count: translations.length
})
);
originalLanguageCounts.sort((a, b) => d3.descending(a.count, b.count));

const pie = d3.pie().value((d) => d.count);
const arc = d3.arc().innerRadius(0).outerRadius(radius);

const chartGroup = svg
.append("g")
// .attr("transform", `translate(${col * chartWidth},${row * chartHeight})`);
.attr(
"transform",
`translate(${col * chartWidth * paddingFactor},${
row * chartHeight * paddingFactor
})`
);

// 地域名を表示
chartGroup
.append("text")
.attr("x", chartWidth / 2)
.attr("y", 20)
.attr("text-anchor", "middle")
.attr("fill", "black")
.text(region)
.attr("font-size", "8px");

const arcs = chartGroup
.selectAll("arc")
.data(pie(originalLanguageCounts))
.enter()
.append("g")
.attr("class", "arc")
.attr("transform", `translate(${chartWidth / 2}, ${chartHeight / 2})`);

arcs
.append("path")
.attr("d", arc)
.attr("fill", (d) => colorScale2(d.data.original));

arcs
.append("text")
.attr("transform", (d) => `translate(${arc.centroid(d)})`)
.attr("text-anchor", "middle")
.attr("fill", "white")
.attr("font-size", "5px")
.text((d) => d.data.original);

arcs
.append("text")
.attr("transform", (d) => `translate(${arc.centroid(d)})`)
.attr("dy", "1.2em")
.attr("text-anchor", "middle")
.attr("fill", "white")
.attr("font-size", "5px")
.text((d) => d.data.count);
});

return svg.node();
}
Insert cell
Insert cell

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.
Learn more