31:T5fc, https://books.google.co.jp/ 　　　https://ja.wikipedia.org/wiki/%E3%83%8E%E3%83%BC%E3%83%99%E3%83%AB%E6%96%87%E5%AD%A6%E8%B3%9E%E5%8F%97%E8%B3%9E%E8%80%85%E3%81%AE%E4%B8%80%E8%A6%A7#%E8%A8%80%E8%AA%9E%E3%81%AB%E3%82%88%E3%82%8B%E5%88%86%E9%A1%9E https://japan.wipgroup.com/media/language-population 言語 https://ja.wikipedia.org/wiki/%E3%82%B9%E3%82%A6%E3%82%A7%E3%83%BC%E3%83%87%E3%83%B3%E8%AA%9E スウェーデン語 https://ja.wikipedia.org/wiki/%E3%83%8E%E3%83%AB%E3%82%A6%E3%82%A7%E3%83%BC%E8%AA%9E ノルウェー語 https://ja.wikipedia.org/wiki/%E3%83%87%E3%83%B3%E3%83%9E%E3%83%BC%E3%82%AF%E8%AA%9E デンマーク https://ja.wikipedia.org/wiki/%E3%82%AE%E3%83%AA%E3%82%B7%E3%82%A2%E8%AA%9E ギリシャ https://ja.wikipedia.org/wiki/%E3%83%81%E3%82%A7%E3%82%B3%E8%AA%9E チェコ https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A3%E3%83%B3%E3%83%A9%E3%83%B3%E3%83%89%E8%AA%9E フィンランド https://ja.wikipedia.org/wiki/%E3%83%98%E3%83%96%E3%83%A9%E3%82%A4%E8%AA%9E ヘブライ https://ja.wikipedia.org/wiki/%E3%83%8F%E3%83%B3%E3%82%AC%E3%83%AA%E3%83%BC%E8%AA%9E ハンガリー https://ja.wikipedia.org/wiki/%E3%82%A2%E3%82%A4%E3%82%B9%E3%83%A9%E3%83%B3%E3%83%89%E8%AA%9E アイスランド https://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AD%E3%83%B4%E3%82%A1%E3%83%B3%E3%82%B9%E8%AA%9E プロヴァンス https://ja.wikipedia.org/wiki/%E3%82%BB%E3%83%AB%E3%83%93%E3%82%A2%E8%AA%9E セルビア https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%87%E3%82%A3%E3%83%83%E3%82%B7%E3%83%A5%E8%AA%9E　イディッシュ 32:T1371,function scatter() { const margin = { top: 50, right: -10, bottom: 40, left: 130 }; // 下の余白を広げる const width = 800 - margin.left - margin.right; const height = 600 - margin.top - margin.bottom; // SVG要素の作成 const svg = d3 .create("svg") .attr("viewBox", [ 0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom ]); // スケール関数 const xScale = d3 .scaleLog() .domain([200000, d3.max(dataset, (d) => d.population)]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleLog() .domain([1, d3.max(dataset, (d) => d.number)]) .range([height - margin.bottom - 30, margin.top]); const rScale = d3.scaleSqrt().domain([0, 20]).range([0, 40]); // 横線グリッド svg .append("g") .selectAll("line") .data(yScale.ticks(3)) .join("line") //.attr("x1", xScale(0)) .attr("x1", margin.left) // グリッドの始点を左の余白に合わせる .attr("x2", xScale(d3.max(dataset, (d) => d.population))) .attr("y1", (d) => yScale(d)) .attr("y2", (d) => yScale(d)) .attr("stroke", "#ccc"); svg .append("g") .selectAll("line") .data(xScale.ticks(3)) .join("line") .attr("x1", (d) => xScale(d)) .attr("x2", (d) => xScale(d)) .attr("y1", yScale(1)) .attr("y2", yScale(d3.max(dataset, (d) => d.number))) .attr("stroke", "#ccc"); // ドットとテキスト const dots = svg .append("g") .selectAll("g") .data(dataset) .join("g") .attr( "transform", (d) => `translate(${xScale(d.population)}, ${yScale(d.number)})` ); dots .append("circle") .attr("r", 10) .attr("fill", "#4A84B8") .attr("opacity", 0.5); dots .append("text") .text((d) => d.language) // 表示したいプロパティに変更 .attr("text-anchor", "middle") .attr("y", -20) .attr("dy", "0.25em") .style("font-size", "10px") .attr("transform", (d) => d.number === d3.min(dataset, (d) => d.number) ? "rotate(-15)" : "" ) // 条件に基づいてラベルを回転 .style("pointer-events", "none"); // ドットの重なりを確認して、重なっている場合はラベルを省略 dots.each((d, i, nodes) => { const currentDot = d3.select(nodes[i]); const x1 = +currentDot.attr("transform").split(",")[0].slice(10); const y1 = +currentDot.attr("transform").split(",")[1].slice(0, -1); // 他のドットと比較 dots.each((dd, ii, nn) => { if (i !== ii) { const x2 = +d3.select(nn[ii]).attr("transform").split(",")[0].slice(10); const y2 = +d3 .select(nn[ii]) .attr("transform") .split(",")[1] .slice(0, -1); // 一定の距離以下にドットが重なっている場合はラベルを省略 if (Math.sqrt((x1 - x2) ** 2 + (y1 - y2) ** 2) < 20) { currentDot.select("text").style("visibility", "hidden"); } } }); }); tooltip .append("rect") .attr("fill", "white") .attr("stroke", "#DDDDDD") .attr("width", 145) .attr("height", 105) .attr("opacity", 0.8); // ドットにマウスが乗ったらツールチップを表示 dots .on("mouseover", function (e, d, i) { tooltip .html( `

${d.language}
人口：${d.population}
受賞数：${d.number}

` ) .style("visibility", "visible"); d3.select(this).attr("opacity", 1); }) .on("mousemove", function (e) { // ツールチップの横幅を取得 var tooltipWidth = tooltip.node().offsetWidth; // マウスのX座標によって条件分岐 var tooltipX = e.pageX < window.innerWidth / 2 ? e.pageX + 10 : e.pageX - tooltipWidth - 10; // ツールチップをマウスの位置に移動 tooltip .style("top", e.pageY + 10 + "px") .style("left", tooltipX + "px") .style("width", "200px"); }) .on("mouseout", function () { tooltip.html(``).style("visibility", "hidden"); d3.select(this).transition(); }); // 軸関数 const xAxis = d3.axisBottom().scale(xScale); const yAxis = d3.axisLeft().scale(yScale); // 軸表示 svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis); svg.append("g").attr("transform", `translate(${margin.left},0)`).call(yAxis); // テキスト svg .append("text") .attr("text-anchor", "middle") // .attr("transform", `translate(${width / 2},${height - 10})`) // 位置を調整 .attr("x", width / 2) .attr("y", height) .text("話者数"); svg .append("text") .attr("text-anchor", "middle") .attr("transform", "rotate(-90)") .attr("y", margin.left / 4) // 位置を調整 .attr("x", -height / 2) .text("受賞数"); return svg.node(); }33:T1772,function createGraph() { const margin = { top: 20, right: -10, bottom: 40, left: 130 }; // 下の余白を広げる const width = 800 - margin.left - margin.right; const height = 500 - margin.top - margin.bottom; // SVG要素の作成 const svg = d3 .create("svg") .attr("viewBox", [ 0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom ]); // 手動でoriginalの順序を指定 const originalOrder = [ "トルコ語", "スウェーデン語", "ノルウェー語", "英語", "中国語", "ハンガリー語", "ロシア語", "ポーランド語", "ドイツ語", "フランス語", "スペイン語" ]; // 一つの original に対応する言語ごとのデータを集計 const aggregatedData = d3.group(dataset2, (d) => d.original); const languageData = d3.group(dataset2, (d) => d.language); // Sort languageData based on the "area" property const sortedLanguageData = Array.from(languageData.keys()).sort((a, b) => d3.ascending(languageData.get(a)[0].area, languageData.get(b)[0].area) ); // 左側のテキストを描画 const leftTextGroup = svg .selectAll(".left-text-group") .data(originalOrder) .enter() .append("g") .attr("class", "left-text-group") .attr( "transform", (d, i) => `translate(${margin.left - 5},${ (height / originalOrder.length) * i + margin.top })` ); // 四角で囲んだラベルを描画 leftTextGroup .append("rect") .attr("width", 50) .attr("height", height / originalOrder.length) .attr("fill", colorScale2) .style("opacity", 0.5); leftTextGroup .append("text") .attr("x", 25) .attr("y", height / (2 * originalOrder.length)) .style("text-anchor", "middle") .style("alignment-baseline", "middle") .style("font-size", "7px") .style("fill", "black") .text((d) => d); // 右側のテキストを描画 const rightTextGroups = svg .selectAll(".right-text-group") .data(sortedLanguageData) // ソートされた言語データを使用 .enter() .append("g") .attr("class", "right-text-group") .attr( "transform", (d, i) => `translate(${width - margin.right - 50},${ (height / languageData.size) * i + margin.top + 15 })` ); // 各 "area" に対応する言語ごとに色を割り当てる const areaLanguageColors = {}; sortedLanguageData.forEach((language, i) => { const area = languageData.get(language)[0].area; if (!(area in areaLanguageColors)) { areaLanguageColors[area] = colorScale(area); } }); // 四角で囲んだラベルを描画 rightTextGroups .append("rect") .attr("width", 50) .attr("height", height / languageData.size) .style("fill", (d) => areaLanguageColors[languageData.get(d)[0].area]) .style("opacity", 0.5); rightTextGroups .append("text") .attr("x", 25) .attr("y", height / (2 * languageData.size)) .style("text-anchor", "middle") .style("alignment-baseline", "middle") .style("font-size", "7px") .style("fill", "black") .text((d) => d); // 曲線のジェネレータ const curveGenerator = d3.line().curve(d3.curveBasis); // パスを描画して country と language を繋げる const paths = svg .selectAll(".path") .data(dataset2) .enter() .append("path") .attr("class", "path") .attr("d", (d) => { const originalIndex = originalOrder.indexOf(d.original); const startX = margin.left + 50; const startY = (height / originalOrder.length) * originalIndex + margin.top + height / (2 * originalOrder.length); // 中央にオフセット const endX = width - margin.right - 50; const endY = (height / languageData.size) * sortedLanguageData.indexOf(d.language) + margin.top + 15; // 中央にオフセット // 曲線の制御点を計算 const controlX1 = startX + (endX - startX) / 2; const controlY1 = startY; const controlX2 = startX + (endX - startX) / 2; const controlY2 = endY; return `M ${startX} ${startY} C ${controlX1} ${controlY1}, ${controlX2} ${controlY2}, ${endX} ${endY}`; }) .attr("stroke", "gray") .attr("stroke-width", 1) .attr("fill", "none") .style("opacity", 0.5); // Hover effect leftTextGroup .on("mouseover", function (event, d) { const original = d; paths .filter((data) => data.original === original) .attr("stroke", "#9370DB") .attr("stroke-width", 5); }) .on("mouseout", function (event, d) { paths .filter((data) => data.original === d) .attr("stroke", "gray") .attr("stroke-width", 1); // Revert to the original stroke width }); // Hover effect for rightTextGroups (languages) rightTextGroups .on("mouseover", function (event, d) { const language = d; paths .filter((data) => data.language === language) .attr("stroke", "#9370DB") .attr("stroke-width", 5); }) .on("mouseout", function (event, d) { paths .filter((data) => data.language === d) .attr("stroke", "gray") .attr("stroke-width", 1); // Revert to the original stroke width }); // Add original language label svg .append("text") .attr("x", margin.left + 10) .attr("y", margin.top - 15) .style("text-anchor", "start") .style("alignment-baseline", "hanging") .style("font-size", "12px") .style("fill", "black") .text("原語"); // Add translated language label svg .append("text") .attr("x", width + margin.left - 130) .attr("y", margin.top) .style("text-anchor", "end") .style("alignment-baseline", "hanging") .style("font-size", "12px") .style("fill", "black") .text("翻訳語"); return svg.node(); }34:T15c8,function createCountryGraph() { const margin = { top: 20, right: -10, bottom: 40, left: 130 }; // 下の余白を広げる const width = 800 - margin.left - margin.right; const height = 500 - margin.top - margin.bottom; // SVG要素の作成 const svg = d3 .create("svg") .attr("viewBox", [ 0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom ]); // 手動でcountryの順序を指定 const countryOrder = [ "トルコ", "スウェーデン", "ノルウェー", "イギリス", "オーストラリア", "カナダ", "アメリカ", "中国", "ハンガリー", "ベラルーシ", "ポーランド", "フランス", "ドイツ", "ペルー" ]; const aggregatedData = d3.group(dataset2, (d) => d.country); const languageData = d3.group(dataset2, (d) => d.language); // 左側のテキストを描画 const leftTextGroup = svg .selectAll(".left-text-group") .data(countryOrder) .enter() .append("g") .attr("class", "left-text-group") .attr( "transform", (d, i) => `translate(${margin.left - 5},${ (height / countryOrder.length) * i + margin.top })` ); leftTextGroup .append("rect") .attr("width", 50) .attr("height", height / countryOrder.length) .attr("fill", colorScale3) .style("opacity", 0.5); leftTextGroup .append("text") .attr("x", 25) .attr("y", height / (2 * countryOrder.length)) .style("text-anchor", "middle") .style("alignment-baseline", "middle") .style("font-size", "7px") .style("fill", "black") .text((d) => d); // 右側のテキストを描画（言語ごとに色分けし、エリアごとにソート） const sortedLanguageData = Array.from(languageData.keys()).sort((a, b) => d3.ascending(languageData.get(a)[0].area, languageData.get(b)[0].area) ); const rightTextGroup = svg .selectAll(".right-text-group") .data(sortedLanguageData) .enter() .append("g") .attr("class", "right-text-group") .attr( "transform", (d, i) => `translate(${width - margin.right - 50},${ (height / languageData.size) * i + margin.top + 15 })` ); // 各 "area" に対応する言語ごとに色を割り当てる const areaLanguageColors = {}; sortedLanguageData.forEach((language, i) => { const area = languageData.get(language)[0].area; if (!(area in areaLanguageColors)) { areaLanguageColors[area] = colorScale(area); } }); rightTextGroup .append("rect") .attr("width", 50) .attr("height", height / languageData.size) .style("fill", (d) => areaLanguageColors[languageData.get(d)[0].area]) .style("opacity", 0.5); rightTextGroup .append("text") .attr("x", 25) .attr("y", height / (2 * languageData.size)) .style("text-anchor", "middle") .style("alignment-baseline", "middle") .style("font-size", "7px") .style("fill", "black") .text((d) => d); // パスを描画して country と language を繋げる const paths = svg .selectAll(".path") .data(dataset2) .enter() .append("path") .attr("class", "path") .attr("d", (d) => { const countryIndex = countryOrder.indexOf(d.country); const startX = margin.left + 50; const startY = (height / countryOrder.length) * countryIndex + margin.top + height / (2 * countryOrder.length); const endX = width - margin.right - 50; const endY = (height / languageData.size) * sortedLanguageData.indexOf(d.language) + margin.top + 20; const controlX1 = startX + (endX - startX) / 2; const controlY1 = startY; const controlX2 = startX + (endX - startX) / 2; const controlY2 = endY; return `M ${startX} ${startY} C ${controlX1} ${controlY1}, ${controlX2} ${controlY2}, ${endX} ${endY}`; }) .attr("stroke", "gray") .attr("stroke-width", 1) .attr("fill", "none") .style("opacity", 0.5); // Hover effect leftTextGroup .on("mouseover", function (event, d) { const country = d; paths .filter((data) => data.country === country) .attr("stroke", "#9370DB") .attr("stroke-width", 5); }) .on("mouseout", function (event, d) { paths .filter((data) => data.country === d) .attr("stroke", "gray") .attr("stroke-width", 1); }); // Hover effect for rightTextGroup (languages) rightTextGroup .on("mouseover", function (event, d) { const language = d; paths .filter((data) => data.language === language) .attr("stroke", "#9370DB") .attr("stroke-width", 5); }) .on("mouseout", function (event, d) { paths .filter((data) => data.language === d) .attr("stroke", "gray") .attr("stroke-width", 1); }); // Add original language label svg .append("text") .attr("x", margin.left + 10) .attr("y", margin.top - 15) .style("text-anchor", "start") .style("alignment-baseline", "hanging") .style("font-size", "12px") .style("fill", "black") .text("国"); // Add translated language label svg .append("text") .attr("x", width + margin.left - 130) .attr("y", margin.top) .style("text-anchor", "end") .style("alignment-baseline", "hanging") .style("font-size", "12px") .style("fill", "black") .text("翻訳語"); return svg.node(); }35:T1d6e,// Copyright 2021-2023 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/sankey-diagram function SankeyChart( { nodes, // an iterable of node objects (typically [{id}, …]); implied by links if missing links // an iterable of link objects (typically [{source, target}, …]) }, { format = ",", // a function or format specifier for values in titles align = "justify", // convenience shorthand for nodeAlign nodeId = (d) => d.id, // given d in nodes, returns a unique identifier (string) nodeGroup, // given d in nodes, returns an (ordinal) value for color nodeGroups, // an array of ordinal values representing the node groups nodeLabel, // given d in (computed) nodes, text to label the associated rect nodeTitle = (d) => `${d.id}\n${format(d.value)}`, // given d in (computed) nodes, hover text nodeAlign = align, // Sankey node alignment strategy: left, right, justify, center nodeSort, // comparator function to order nodes nodeWidth = 15, // width of node rects nodePadding = 10, // vertical separation between adjacent nodes nodeLabelPadding = 6, // horizontal separation between node and label nodeStroke = "currentColor", // stroke around node rects nodeStrokeWidth, // width of stroke around node rects, in pixels nodeStrokeOpacity, // opacity of stroke around node rects nodeStrokeLinejoin, // line join for stroke around node rects linkSource = ({ source }) => source, // given d in links, returns a node identifier string linkTarget = ({ target }) => target, // given d in links, returns a node identifier string linkValue = ({ value }) => value, // given d in links, returns the quantitative value linkPath = d3Sankey.sankeyLinkHorizontal(), // given d in (computed) links, returns the SVG path linkTitle = (d) => `${d.source.id} → ${d.target.id}\n${format(d.value)}`, // given d in (computed) links linkColor = "source-target", // source, target, source-target, or static color linkStrokeOpacity = 0.5, // link stroke opacity linkMixBlendMode = "multiply", // link blending mode colors = d3.schemeTableau10, // array of colors width = 640, // outer width, in pixels height = 400, // outer height, in pixels marginTop = 5, // top margin, in pixels marginRight = 1, // right margin, in pixels marginBottom = 5, // bottom margin, in pixels marginLeft = 1 // left margin, in pixels } = {} ) { // Convert nodeAlign from a name to a function (since d3-sankey is not part of core d3). if (typeof nodeAlign !== "function") nodeAlign = { left: d3Sankey.sankeyLeft, right: d3Sankey.sankeyRight, center: d3Sankey.sankeyCenter }[nodeAlign] ?? d3Sankey.sankeyJustify; // Compute values. const LS = d3.map(links, linkSource).map(intern); const LT = d3.map(links, linkTarget).map(intern); const LV = d3.map(links, linkValue); if (nodes === undefined) nodes = Array.from(d3.union(LS, LT), (id) => ({ id })); const N = d3.map(nodes, nodeId).map(intern); const G = nodeGroup == null ? null : d3.map(nodes, nodeGroup).map(intern); // Replace the input nodes and links with mutable objects for the simulation. nodes = d3.map(nodes, (_, i) => ({ id: N[i] })); links = d3.map(links, (_, i) => ({ source: LS[i], target: LT[i], value: LV[i] })); // Ignore a group-based linkColor option if no groups are specified. if (!G && ["source", "target", "source-target"].includes(linkColor)) linkColor = "currentColor"; // Compute default domains. if (G && nodeGroups === undefined) nodeGroups = G; // Construct the scales. const color = nodeGroup == null ? null : d3.scaleOrdinal(nodeGroups, colors); // Compute the Sankey layout. d3Sankey .sankey() .nodeId(({ index: i }) => N[i]) .nodeAlign(nodeAlign) .nodeWidth(nodeWidth) .nodePadding(nodePadding) .nodeSort(nodeSort) .extent([ [marginLeft, marginTop], [width - marginRight, height - marginBottom] ])({ nodes, links }); // Compute titles and labels using layout nodes, so as to access aggregate values. if (typeof format !== "function") format = d3.format(format); const Tl = nodeLabel === undefined ? N : nodeLabel == null ? null : d3.map(nodes, nodeLabel); const Tt = nodeTitle == null ? null : d3.map(nodes, nodeTitle); const Lt = linkTitle == null ? null : d3.map(links, linkTitle); // A unique identifier for clip paths (to avoid conflicts). const uid = `O-${Math.random().toString(16).slice(2)}`; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); const node = svg .append("g") .attr("stroke", nodeStroke) .attr("stroke-width", nodeStrokeWidth) .attr("stroke-opacity", nodeStrokeOpacity) .attr("stroke-linejoin", nodeStrokeLinejoin) .selectAll("rect") .data(nodes) .join("rect") .attr("x", (d) => d.x0) .attr("y", (d) => d.y0) .attr("height", (d) => d.y1 - d.y0) .attr("width", (d) => d.x1 - d.x0); if (G) node.attr("fill", ({ index: i }) => color(G[i])); if (Tt) node.append("title").text(({ index: i }) => Tt[i]); const link = svg .append("g") .attr("fill", "none") .attr("stroke-opacity", linkStrokeOpacity) .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", linkMixBlendMode); if (linkColor === "source-target") link .append("linearGradient") .attr("id", (d) => `${uid}-link-${d.index}`) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", (d) => d.source.x1) .attr("x2", (d) => d.target.x0) .call((gradient) => gradient .append("stop") .attr("offset", "0%") .attr("stop-color", ({ source: { index: i } }) => color(G[i])) ) .call((gradient) => gradient .append("stop") .attr("offset", "100%") .attr("stop-color", ({ target: { index: i } }) => color(G[i])) ); link .append("path") .attr("d", linkPath) .attr( "stroke", linkColor === "source-target" ? ({ index: i }) => `url(#${uid}-link-${i})` : linkColor === "source" ? ({ source: { index: i } }) => color(G[i]) : linkColor === "target" ? ({ target: { index: i } }) => color(G[i]) : linkColor ) .attr("stroke-width", ({ width }) => Math.max(1, width)) .call( Lt ? (path) => path.append("title").text(({ index: i }) => Lt[i]) : () => {} ); if (Tl) svg .append("g") .attr("font-family", "sans-serif") // .attr("font-size", 10) .attr("font-size", 16) .attr("font-weight", 600) .attr("stroke", "#fff") .attr("stroke-width", 4) .attr("paint-order", "stroke fill") .selectAll("text") .data(nodes) .join("text") .attr("x", (d) => d.x0 < width / 2 ? d.x1 + nodeLabelPadding : d.x0 - nodeLabelPadding ) .attr("y", (d) => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", (d) => (d.x0 < width / 2 ? "start" : "end")) .text(({ index: i }) => Tl[i]); function intern(value) { return value !== null && typeof value === "object" ? value.valueOf() : value; } return Object.assign(svg.node(), { scales: { color } }); }36:T137d,function createBarChart() { // グラフの寸法を設定 const margin = { top: 50, right: 50, bottom: 100, left: 100 }; const width = 700 - margin.left - margin.right; const height = 700 - margin.top - margin.bottom; // SVG を作成 const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // ツールチップ要素を作成 const tooltip = d3 .select("body") .append("div") .attr("class", "tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("background-color", "white") .style("border", "solid") .style("border-width", "1px") .style("border-radius", "5px") .style("padding", "10px"); // 各地域ごとに横棒グラフを描画 const regions = Array.from(new Set(datasetWithArea.map((d) => d.area))); const numChartsPerRow = 1; // 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 barWidth = chartWidth / 2; // 棒の幅を設定 const regionData = datasetWithArea.filter((d) => d.area === region); // 各言語の合計数を計算 const totalLanguages = regionData.length; const languageCounts = d3.rollup( regionData, (v) => v.length / totalLanguages, // 各言語の割合を計算 (d) => d.original ); const languageCountsArray = Array.from( languageCounts, ([original, count]) => ({ original, count }) ); languageCountsArray.sort((a, b) => d3.descending(a.count, b.count)); // 積み上げ横棒グラフ用のデータを作成 let cumulative = 0; for (const d of languageCountsArray) { d.start = cumulative; cumulative += d.count; d.end = cumulative; } const yScale = d3 .scaleBand() .domain(languageCountsArray.map((d) => d.original)) .range([0, chartHeight]) .padding(0.1); const xScale = d3.scaleLinear().domain([0, 1]).range([0, chartWidth]); const chartGroup = svg .append("g") .attr( "transform", `translate(${col * chartWidth * paddingFactor},${ row * chartHeight * paddingFactor })` ); // 地域名を表示 chartGroup .append("circle") .attr("cx", margin.left - 80) .attr("cy", margin.top - 16) .attr("r", 5) // 円の半径 .attr("fill", (d) => colorScale(region)); // 各地域に対応する色を設定 chartGroup .append("text") .attr("x", margin.left - 70) // テキストのx座標をmargin.leftに設定 .attr("y", margin.top - 13) // 上部に配置するため、y座標をmargin.topに設定 .attr("text-anchor", "start") .attr("fill", "black") .text(region) .attr("font-size", "10px"); // 積み上げ横棒グラフを描画 chartGroup .selectAll("rect") .data(languageCountsArray) .enter() .append("rect") .attr("x", (d) => xScale(d.start)) .attr("width", (d) => xScale(d.end) - xScale(d.start)) .attr("height", 20) // すべての帯の高さを20に設定する .attr("fill", (d) => colorScale2(d.original)) // ツールチップを表示するイベントを追加 .on("mouseover", function (event, d) { tooltip .style("visibility", "visible") .html( `

${d.original}
割合：${d3.format(".1%")(d.count)}

` ); }) .on("mousemove", function (event) { var tooltipWidth = tooltip.node().offsetWidth; // マウスのX座標によって条件分岐 var tooltipX = event.pageX < window.innerWidth / 2 ? event.pageX + 10 : event.pageX - tooltipWidth - 10; // ツールチップをマウスの位置に移動 tooltip .style("top", event.pageY + 10 + "px") .style("left", tooltipX + "px") .style("width", "200px"); }) .on("mouseout", function () { tooltip.style("visibility", "hidden"); }); // 棒の上に数値を表示 chartGroup .selectAll(".label") .data(languageCountsArray) .enter() .append("text") .attr("class", "label") .attr("x", (d) => xScale(d.start)) .attr("dy", "1em") .attr("dx", 5) .attr("text-anchor", "start") .text((d) => { if (xScale(d.end) - xScale(d.start) > 60) { return d.original; } else { return ""; } }) .attr("font-size", "8px") .attr("font-family", "sans-serif") // .attr("font-size", 10) .attr("font-weight", 600) .attr("stroke", "#fff") .attr("stroke-width", 2) .attr("paint-order", "stroke fill"); }); return svg.node(); }37:T686,38:[{"id":"00d90d054f8a75bbd9cd22dd85d050883b305961b3776af3ca032be85814b477e3afe501fae55616f2416502cc7056407a971e5a0eac52ce9ec8ab17283752d9","href":"https://static.observableusercontent.com/files/00d90d054f8a75bbd9cd22dd85d050883b305961b3776af3ca032be85814b477e3afe501fae55616f2416502cc7056407a971e5a0eac52ce9ec8ab17283752d9","name":"スライド1.jpeg","type":"image/jpeg","lastModified":1714716718728.773,"size":37635},{"id":"25a1486bcb8d51baa0b5f6dc73f7112cfeabdd2d41dd8a80d451286435c14dfa6f0afb214e60a2752795291b417665b9249d93f5284e3c0eedab1b2a785bfe37","href":"https://static.observableusercontent.com/files/25a1486bcb8d51baa0b5f6dc73f7112cfeabdd2d41dd8a80d451286435c14dfa6f0afb214e60a2752795291b417665b9249d93f5284e3c0eedab1b2a785bfe37","name":"スクリーンショット 2024-05-03 15.08.55.jpeg","type":"image/jpeg","lastModified":1714716741326.468,"size":132250},{"id":"659d295820e2c6190aac066c64ba29f46aef30b6367ece0c1f255806e7c13f1d3759485d33b4a81818789eb5ed3b9c92b08cd04850a6bbbb1ed509b394a07a99","href":"https://static.observableusercontent.com/files/659d295820e2c6190aac066c64ba29f46aef30b6367ece0c1f255806e7c13f1d3759485d33b4a81818789eb5ed3b9c92b08cd04850a6bbbb1ed509b394a07a99","name":"images-5.jpeg","type":"image/jpeg","lastModified":1714443156169.401,"size":84607}] 2f:{"title":"ノーベル文学賞作品が異なる言語圏でどのように受け入れられているか？","cells":[{"id":0,"value":"# ノーベル文学賞作品が異なる言語圏でどのように受け入れられているか？\n","pinned":false,"hidden":false,"mode":"md"},{"id":2763,"value":"

by Haruna Yamamoto

","pinned":false,"hidden":false,"mode":"md"},{"id":2878,"value":"\n

","pinned":false,"hidden":false,"mode":"html"},{"id":2891,"value":"

How are Nobel Prize in Literature works received in different linguistic communities?

","pinned":false,"hidden":false,"mode":"md"},{"id":2155,"value":"

はじめに

","pinned":false,"hidden":false,"mode":"html"},{"id":616,"value":"{\n // 画像のURLを取得\n const imageUrl = await FileAttachment(\"images-5.jpeg\").url();\n return html`

\n『ハリー・ポッター』や『ロード・オブ・ザ・リング』など、国際的に愛される作品は、その普遍的なテーマや深いメッセージにより、様々な文化や言語圏で読者に受け入れられている。例えば、ハリー・ポッターシリーズは世界80か国語に翻訳され、各国の読者と共有されている。このような文学作品が異なる言語に翻訳される際、そのプロセスは単なる言語の移し替えに留まらず、文学の普遍性や文化の交流を探求する興味深い側面も含んでいる。本の翻訳は数か月はかかると言われている。それほどの手間をかけて翻訳されているということは、原作を翻訳してまで読みたい強い思いが背景にあるのではないか。

\n\n特にノーベル文学賞は、その受賞作品が世界的に価値のある文学とされ、多くの作品が様々な言語に翻訳されている。例えば、2023年にノルウェー語で受賞した『だれか、来る』(ヨン・フォッセ)も既に和訳が公開されている。ただし、一方で翻訳されることが少ない言語も存在するだろう。

\n

そこで、この賞を受賞した作家たちの代表作品を探求し、異なる言語圏でどのように受け入れられているかについて調査する。\n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1536,"value":"

言語における受賞数と話者数の関係

","pinned":false,"hidden":false,"mode":"html"},{"id":1543,"value":"

まずはじめに1901年から2023年まで、120人が受賞したノーベル文学賞の言語における受賞数と話者数の関係を調べた。

","pinned":false,"hidden":false,"mode":"md"},{"id":2218,"value":"

\nノーベル文学賞受賞言語と話者数\n

","pinned":false,"hidden":false,"mode":"md"},{"id":3000,"value":"scatter()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1548,"value":"

散布図から弱い正の相関が見られる。このことから、一般的には話者数が多いほどノーベル文学賞を受賞しやすい傾向がある。一方で日本語・中国語は話者数に対し受賞数が少ないことがわかる。日本語・中国語やその他アジアの言語が少ないのは、ノーベル文学賞はスウェーデンのアカデミーによって授与されており、その審査プロセスが関係している可能性がある。では、受賞した作品はどのような言語圏に広まっているのだろうか。

","pinned":false,"hidden":false,"mode":"md"},{"id":1557,"value":"

原語と翻訳語の関係

","pinned":false,"hidden":false,"mode":"html"},{"id":1561,"value":"

\n データの収集方法\n

","pinned":false,"hidden":false,"mode":"html"},{"id":1567,"value":"

Google ブックスを用いて2000~2023年までのノーベル文学賞受賞者の代表作データを収集した。代表作は、一人ずつWikipediaなどで調べて決定した。代表作の元の言語、翻訳語、作者の出身国のデータを集め、スプレッドシートにまとめた。代表作は以下の通りである。

\n ","pinned":false,"hidden":false,"mode":"md"},{"id":2137,"value":"table2 = {\n var names = d3table.keys(dataset5[0]);\n const table = d3table.create(\"table\");\n\n table\n .append(\"thead\")\n .join(\"tr\")\n .selectAll(\"th\")\n .data(names)\n .join(\"th\")\n .text((d) => d)\n .style(\"background-color\", \"#f9f8f9\") // セルの背景色\n .style(\"color\", \"black\"); // 文字の色\n\n table\n .append(\"tbody\")\n .selectAll(\"tr\")\n .data(dataset5)\n .join(\"tr\")\n .selectAll(\"td\")\n .data((row) => d3table.entries(row))\n .join(\"td\")\n .text((d) => d.value);\n // テーブルを中央に寄せるスタイルを追加\n table.style(\"margin\", \"0 auto\");\n\n return table.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2107,"value":"

それらから、原語と翻訳語の関係を示すダイアグラムが下である。\n

","pinned":false,"hidden":false,"mode":"md"},{"id":2232,"value":"

\n地域の分類\n

","pinned":false,"hidden":false,"mode":"html"},{"id":2955,"value":"

分類は、以下のようになっている。全体的にヨーロッパの地域への翻訳が多かったため、ヨーロッパは細分化して分類している。

","pinned":false,"hidden":false,"mode":"md"},{"id":2081,"value":"{\n const margin = { top: 20, right: -10, bottom: 40, left: 130 }; // 下の余白を広げる\n const width = 800 - margin.left - margin.right;\n const height = 300 - margin.top - margin.bottom;\n\n // SVG要素の作成\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [\n 0,\n 0,\n width + margin.left + margin.right,\n height + margin.top + margin.bottom\n ]);\n\n const g = svg\n .append(\"g\")\n .selectAll(\"g\")\n .data(areaNames)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(300, ${20 + i * 30})`);\n\n g.append(\"text\")\n .attr(\"x\", 20)\n .attr(\"dy\", 5)\n .text((d) => d);\n\n g.append(\"circle\").attr(\"r\", 10).attr(\"fill\", colorScale);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2225,"value":"

\n原語と翻訳語の関係\n

","pinned":false,"hidden":false,"mode":"html"},{"id":2552,"value":"translationSankeyChart(translations)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1338,"value":"

このダイアグラムは、作品の原語と、翻訳語の関係を示すものである。特定の地域の言語への翻訳が少ない例が見られる。例えば、中国語の本は東ヨーロッパの言語の翻訳が少ない。フランス語の本は中東、南アジアへの翻訳が少ない。反対にドイツ語の本は多くの地域の言語に翻訳されている。

","pinned":false,"hidden":false,"mode":"md"},{"id":2567,"value":"

中国語

","pinned":false,"hidden":false,"mode":"md"},{"id":2559,"value":"translationSankeyChart(translations, { source: \"S_中国語_東アジア\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2570,"value":"

フランス語

","pinned":false,"hidden":false,"mode":"md"},{"id":2563,"value":"translationSankeyChart(translations, { source: \"S_フランス語_西ヨーロッパ\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2942,"value":"viewof selectedSouce = Inputs.select(\n d3.group(translations, (d) => d.source).keys(),\n { label: \"原語\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2940,"value":"translationSankeyChart(translations, { source: selectedSouce })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2227,"value":"

\n作者の出身国と翻訳語の関係\n

","pinned":false,"hidden":false,"mode":"html"},{"id":2574,"value":"translationSankeyChart(translations2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1342,"value":"

このダイアグラムは、作者の出身国と翻訳語の関係を示すものである。出身国と先ほどの原語の翻訳は対応していることが多い。しかし、同じ言語圏であっても出身国の地域によって、翻訳される地域も異なっている場合がある。例えば、カナダとイギリスは同じ英語圏である。しかし、イギリス出身の作者の本はほとんどの地域で受け入れられているのに対してカナダの作品は中東、南アジアの翻訳がないことがわかる。

","pinned":false,"hidden":false,"mode":"html"},{"id":2595,"value":"

カナダ

","pinned":false,"hidden":false,"mode":"md"},{"id":2582,"value":"translationSankeyChart(translations2, { source: \"S_カナダ_英語圏\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2597,"value":"

イギリス

","pinned":false,"hidden":false,"mode":"md"},{"id":2591,"value":"translationSankeyChart(translations2, { source: \"S_イギリス_英語圏\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2948,"value":"viewof selectedCountry = Inputs.select(\n d3.group(translations2, (d) => d.source).keys(),\n { label: \"出身国\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2951,"value":"translationSankeyChart(translations2, { source: selectedCountry })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1904,"value":"

翻訳と地域

","pinned":false,"hidden":false,"mode":"html"},{"id":1916,"value":"

次に先ほどの分析から中国語の本は東ヨーロッパの言語の翻訳が少なかったり、フランス語の本は中東・南アジアへの翻訳が少ないことに着目して特定の地域に対する翻訳数が少ない理由を探る。下の帯グラフは、地域ごとに翻訳された作品の原語を示すものである。

","pinned":false,"hidden":false,"mode":"html"},{"id":2230,"value":"

\n地域と翻訳されている原語の関係\n

","pinned":false,"hidden":false,"mode":"html"},{"id":2754,"value":"createBarChart()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1897,"value":"

中国語からの翻訳が少なかった東ヨーロッパの地域ではドイツ語の本が一番多く翻訳されているとわかる。次に、英語やトルコ語などが続く。

","pinned":false,"hidden":false,"mode":"html"},{"id":1900,"value":"

次に、フランス語からの翻訳が少なかった中東地域の帯グラフから英語の本が一番多く翻訳されているとわかる。次に、ドイツ語やハンガリー語などが続いている。南アジア地域では、トルコ語、ドイツ語の順に続いている。

","pinned":false,"hidden":false,"mode":"html"},{"id":1926,"value":"

このことからどちらも、地理的に近い地域の言語に翻訳されることが多いとわかる。またトルコ語は西ヨーロッパ・東ヨーロッパ・南アジア・中央アジアで3位以内にランクインしている。これはトルコがヨーロッパとアジアの境界に位置しており、両方に文学的な影響を与えている可能性がある。

","pinned":false,"hidden":false,"mode":"html"},{"id":2291,"value":"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1959,"value":"

まとめ

","pinned":false,"hidden":false,"mode":"html"},{"id":1962,"value":"

ノーベル文学賞が異なる言語圏でどのように受け入れられているかについて調査した。まず、出身国と原語の翻訳が対応している一方で、同じ言語圏でも出身国の地域によって翻訳される言語が異なることが確認された。これは文学的な影響や地域の特有の文化的背景が、翻訳の受け入れに影響を与えている可能性がある。\n

また、地理的な要素が翻訳の傾向に影響を与えていることも明らかになった。特定の地域で翻訳が少ない場合、それは地理的な距離や文学的な交流の程度に関係している可能性がある。
\n
以上の2点から、ノーベル文学賞作品は言語や地域の垣根を超えながらも、文学的な影響や地理的な要素が引き続き受け入れに影響を与えていることが分かる。

","pinned":false,"hidden":false,"mode":"html"},{"id":2129,"value":"
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
","pinned":false,"hidden":false,"mode":"html"},{"id":2795,"value":"

\n引用\n

","pinned":false,"hidden":false,"mode":"md"},{"id":626,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":2799,"value":"

\nデータ処理\n

","pinned":false,"hidden":false,"mode":"md"},{"id":974,"value":"language = [...d3.group(dataset2, (d) => d.language).keys()]","pinned":false,"hidden":false,"mode":"ojs"},{"id":875,"value":"original = [...d3.group(dataset2, (d) => d.original).keys()]","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"dataset = d3.tsv(url, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"dataset2 = d3.tsv(url2, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1787,"value":"dataset4 = d3.tsv(url3, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1842,"value":"dataset5 = d3.tsv(url4, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"d3.group(dataset2, (d) => d.person)","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"sortedGroupedData = new Map([...d3.group(dataset2, (d) => d.person).entries()])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1365,"value":"d3.group(dataset2, (d) => d.language)","pinned":false,"hidden":false,"mode":"ojs"},{"id":763,"value":"originalGroupedData = new Map([\n ...d3.group(dataset2, (d) => d.original).entries()\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"d3.tsv(url2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"url2 = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vRaLU8zep7sIkNvry7Gc_5iPsyPpufCXN1NIVDl67b6-I0GvTA3idFnLpmf9k7ZJch02m6MaCTehiRy/pub?gid=1641949120&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1785,"value":"url3 = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vRaLU8zep7sIkNvry7Gc_5iPsyPpufCXN1NIVDl67b6-I0GvTA3idFnLpmf9k7ZJch02m6MaCTehiRy/pub?gid=348311192&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1840,"value":"url4 = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vRaLU8zep7sIkNvry7Gc_5iPsyPpufCXN1NIVDl67b6-I0GvTA3idFnLpmf9k7ZJch02m6MaCTehiRy/pub?gid=1017873942&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"url = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vRaLU8zep7sIkNvry7Gc_5iPsyPpufCXN1NIVDl67b6-I0GvTA3idFnLpmf9k7ZJch02m6MaCTehiRy/pub?gid=462949775&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"d3.tsv(url)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1363,"value":"d3.group(\n dataset2,\n (d) => d.original,\n (d) => d.language\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2141,"value":"d3table = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2299,"value":"import { tooltip } from \"@2023-tmu-dataviz/kouhakuhistory\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2912,"value":"languageToArea = new Map(\n (\n await d3.tsv(\n \"https://docs.google.com/spreadsheets/d/e/2PACX-1vRaLU8zep7sIkNvry7Gc_5iPsyPpufCXN1NIVDl67b6-I0GvTA3idFnLpmf9k7ZJch02m6MaCTehiRy/pub?gid=1900919536&single=true&output=tsv\"\n )\n ).map(({ language, area }) => [language, area])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2914,"value":"countryToArea = new Map(\n (\n await d3.tsv(\n \"https://docs.google.com/spreadsheets/d/e/2PACX-1vRaLU8zep7sIkNvry7Gc_5iPsyPpufCXN1NIVDl67b6-I0GvTA3idFnLpmf9k7ZJch02m6MaCTehiRy/pub?gid=348311192&single=true&output=tsv\"\n )\n ).map(({ country, area }) => [country, area])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3005,"value":"

散布図\n

\n","pinned":false,"hidden":false,"mode":"html"},{"id":2238,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":2811,"value":"

ダイアグラム\n

\n","pinned":false,"hidden":false,"mode":"md"},{"id":1704,"value":"colorScale2 = d3\n .scaleOrdinal()\n .domain([\n \"トルコ語\",\n \"スウェーデン語\",\n \"ノルウェー語\",\n \"英語\",\n \"中国語\",\n \"ハンガリー語\",\n \"ロシア語\",\n \"ポーランド語\",\n \"ドイツ語\",\n \"フランス語\",\n \"スペイン語\"\n ])\n .range([\n \"#FFD700\",\n \"#FFA07A\",\n \"#FFA07A\",\n \"#FFB6C1\",\n \"#87CEEB\",\n \"#FF69B4\",\n \"#FF69B4\",\n \"#FF69B4\",\n \"#9E7C70\",\n \"#9E7C70\",\n \"#9370DB\"\n ])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1719,"value":"colorScale3 = d3\n .scaleOrdinal()\n\n .range([\n \"#FFB6C1\",\n \"#FFD700\",\n \"#FFD700\",\n \"#4A84B8\",\n \"#4A84B8\",\n \"#4A84B8\",\n \"#4A84B8\",\n \"#FFA07A\",\n \"#9370DB\",\n \"#9370DB\",\n \"#9370DB\",\n \"#9E7C70\",\n \"#9E7C70\",\n \"#9E7C70\"\n ])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2416,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2430,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2578,"value":"function displayCanadaGraph() {\n const svgNode = createCountryGraph(); // グラフを作成\n\n // \"中国語\"以外のパスを非表示にする\n d3.select(svgNode)\n .selectAll(\".path\")\n .filter((d) => d.country !== \"カナダ\")\n .style(\"opacity\", 0);\n\n // \"中国語\"のテキストのホバーエフェクトをトリガー\n d3.select(svgNode)\n .selectAll(\".left-text-group\")\n .filter((d) => d !== \"カナダ\")\n .dispatch(\"mouseover\");\n\n return svgNode;\n}\n\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2585,"value":"function displayukGraph() {\n const svgNode = createCountryGraph(); // グラフを作成\n\n // \"中国語\"以外のパスを非表示にする\n d3.select(svgNode)\n .selectAll(\".path\")\n .filter((d) => d.country !== \"イギリス\")\n .style(\"opacity\", 0);\n\n // \"中国語\"のテキストのホバーエフェクトをトリガー\n d3.select(svgNode)\n .selectAll(\".left-text-group\")\n .filter((d) => d !== \"イギリス\")\n .dispatch(\"mouseover\");\n\n return svgNode;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2513,"value":"area = d3.group(dataset2, (d) => d.area)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2555,"value":"// \"中国語\"のみを選択してグラフを表示する関数\nfunction displayChineseGraph() {\n const svgNode = createGraph(); // グラフを作成\n\n // \"中国語\"以外のパスを非表示にする\n d3.select(svgNode)\n .selectAll(\".path\")\n .filter((d) => d.original !== \"中国語\")\n .style(\"opacity\", 0);\n\n // \"中国語\"のテキストのホバーエフェクトをトリガー\n d3.select(svgNode)\n .selectAll(\".left-text-group\")\n .filter((d) => d !== \"中国語\")\n .dispatch(\"mouseover\");\n\n return svgNode;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2561,"value":"// \"中国語\"のみを選択してグラフを表示する関数\nfunction displayFrenchGraph() {\n const svgNode = createGraph(); // グラフを作成\n\n // \"中国語\"以外のパスを非表示にする\n d3.select(svgNode)\n .selectAll(\".path\")\n .filter((d) => d.original !== \"フランス語\")\n .style(\"opacity\", 0);\n\n // \"中国語\"のテキストのホバーエフェクトをトリガー\n d3.select(svgNode)\n .selectAll(\".left-text-group\")\n .filter((d) => d !== \"フランス語\")\n .dispatch(\"mouseover\");\n\n return svgNode;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2844,"value":"translations = dataset2\n .map((d) => ({\n source: `S_${d.original}_${languageToArea.get(d.original)}`, // add S_ to avoid circular link\n target: `${d.language}_${languageToArea.get(d.language)}`,\n value: 1,\n area: d.area\n }))\n .reduce((acc, d) => {\n const found = acc.find(\n (e) => d.source === e.source && d.target === e.target\n );\n if (found) {\n found.value++;\n } else {\n acc.push(d);\n }\n return acc;\n }, [])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2846,"value":"translations2 = dataset2\n .map((d) => ({\n source: `S_${d.country}_${countryToArea.get(d.country)}`,\n target: `${d.language}_${languageToArea.get(d.language)}`,\n value: 1\n }))\n .reduce((acc, d) => {\n const found = acc.find(\n (e) => d.source === e.source && d.target === e.target\n );\n if (found) {\n found.value++;\n } else {\n acc.push(d);\n }\n return acc;\n }, [])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2848,"value":"allSoucesAndTargets = (data) => {\n // const sources = [...new Set(d3.map(data, (d) => d.source))];\n // const targets = [...new Set(d3.map(data, (d) => d.target))];\n const sources = [...d3.group(data, (d) => d.source).keys()].map((d) =>\n d.replace(/S_/, \"\")\n );\n const targets = [...d3.group(data, (d) => d.target).keys()];\n return [...new Set([...sources, ...targets])];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2850,"value":"allSoucesAndTargets(translations)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2852,"value":"dataOfSource = (data, lang) => data.filter((d) => d.source === lang)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2908,"value":"areaNames = Array.from(new Set([...languageToArea.values()]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2902,"value":"d3Sankey = require.alias({\n \"d3-array\": d3,\n \"d3-shape\": d3,\n \"d3-sankey\": \"d3-sankey@0.12.3/dist/d3-sankey.min.js\"\n})(\"d3-sankey\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2918,"value":"colorScale = d3.scaleOrdinal().domain(areaNames).range(areaColors)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2916,"value":"areaColors = [\n // areaNamesに合わせて9色にする\n \"#FFB6C1\", // パステルピンク\n \"#FFD700\", // パステルイエロー\n \"#6B8E23\", // 裏葉色 (Urahairo) - パステルグリーン\n \"#4A84B8\", // パステルブルー\n \"#FFA07A\", // パステルオレンジ\n \"#9370DB\", // パステルパープル\n \"#9E7C70\", // 茶色\n \"#87CEEB\", // スカイブルー\n \"#FF69B4\" // パステルローズ\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2928,"value":"format = (\n (f) => (d) =>\n `${f(d)} 作品`\n)(d3.format(\"d\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2922,"value":"translationSankeyChart = (data, { source } = {}) => {\n const links = source ? data.filter((d) => d.source === source) : data;\n const height = links.length * (source ? 20 : 3);\n\n return SankeyChart(\n {\n links\n },\n {\n nodeGroup: (d) => d.id.split(\"_\").at(-1), // 地域名のみに変換\n nodeGroups: areaNames, // 配色を固定するために地域名の配列を指定\n nodeAlign: d3.sankeyJustify, // e.g., d3.sankeyJustify; set by input above,\n nodeLabel: (d) => d.id.split(\"_\").at(-2), // 言語名のみに変換\n nodePadding: 1,\n nodeStroke: \"#fff\",\n nodeWidth: 50,\n colors: areaColors, // 配色\n nodeTitle: (d) => `${d.id.split(\"_\").at(-2)}\\n${format(d.value)}`, // given d in (computed) nodes, hover text\n linkTitle: (d) =>\n `${d.source.id.split(\"_\").at(-2)} から ${d.target.id\n .split(\"_\")\n .at(-2)} へ\\n${format(d.value)}`, // given d in (computed) links\n width,\n height\n }\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2904,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2817,"value":"

\n帯グラフ\n

","pinned":false,"hidden":false,"mode":"md"},{"id":2961,"value":"// 新しいデータセットから地域情報を取得する\nfunction getArea(language) {\n return languageToArea.get(language);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2964,"value":"datasetWithArea = dataset2.map((d) => ({ ...d, area: getArea(d.language) }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2649,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":1513,"value":"$37","pinned":false,"hidden":false,"mode":"html"}],"files":"$W38","stdlib":"1","titling":"auto"}