44:["$","title",null,{"children":"Visualize the movement of repatriates after the Asia-Pacific War | tsurezure lab. こちら徒然研究室（仮称） | Observable"}] 4c:T118f,chart = { const width = 1200; const height = 500; const format = d3.format(",.0f"); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr( "style", "max-width: 100%; height: auto; font: 15px 'Noto Sans JP', sans-serif; font-weight: bold;" ); const marginLeft = 240; const marginRight = 110; const effectiveWidth = width - marginLeft - marginRight; const sankey = d3 .sankey() .nodeId((d) => d.name) .nodeAlign(d3[nodeAlign]) .nodeWidth(15) .nodePadding(10) .extent([ [1 + marginLeft, 5], [effectiveWidth - 1, height - 5] ]); const { nodes, links } = sankey({ nodes: data.nodes.map((d) => Object.assign({}, d)), links: data.links.map((d) => Object.assign({}, d)) }); const color = d3.scaleOrdinal(d3.schemeCategory10); const rect = svg .append("g") .attr("stroke", "#000") .selectAll() .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) .attr("fill", (d) => color(d.category)); // ノードにタイトルを追加 rect .attr("stroke", "white") .append("title") .text((d) => `${d.name}\n${format(d.value)} 人`); const tooltip = d3 .select("body") .append("div") .attr("class", "tooltip") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden") .style("background", "white") .style("border", "solid 1px #ccc") .style("border-radius", "5px") .style("padding", "10px") .style("opacity", 0.8) .style("font", "16px 'Noto Sans JP', sans-serif"); const link = svg .append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll() .data(links) .join("g") .style("mix-blend-mode", "multiply") .on("mouseover", function (event, d) { link.style("stroke-opacity", function (linkData) { return linkData === d ? 0.9 : 0.2; }); tooltip .html(`${d.source.name} → ${d.target.name}
${format(d.value)} 人`) .style("visibility", "visible"); }) .on("mousemove", function (event) { tooltip .style("top", event.pageY - tooltip.node().offsetHeight - 10 + "px") .style("left", event.pageX - tooltip.node().offsetWidth / 2 + "px"); }) .on("mouseout", function () { tooltip.style("visibility", "hidden"); link.style("stroke-opacity", 0.5); }); const targetTotals = {}; links.forEach((link) => { if (!targetTotals[link.target.name]) { targetTotals[link.target.name] = 0; } targetTotals[link.target.name] += link.value; }); if (linkColor === "source-target") { const gradient = link .append("linearGradient") .attr("id", (d) => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", (d) => d.source.x1) .attr("x2", (d) => d.target.x0); gradient .append("stop") .attr("offset", "0%") .attr("stop-color", (d) => color(d.source.category)); gradient .append("stop") .attr("offset", "100%") .attr("stop-color", (d) => color(d.target.category)); } link .append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", (d) => linkColor === "none" ? "#aaa" : linkColor === "path" ? color(d.names.join(" → ")) : linkColor === "input" ? color(d.source.category) : linkColor === "output" ? color(d.target.category) : d.uid ) .attr("stroke-width", (d) => Math.max(1, d.width)); // ノードにラベルを追加 svg .append("g") // .attr("font-size", "17") // .attr("stroke", "white") // .attr("stroke-width", "0.2") .selectAll("text") .data(nodes) .join("text") .attr("x", (d) => (d.x0 < width / 2 ? d.x1 - 25 : d.x0 + 25)) .attr("y", (d) => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", (d) => (d.x0 < width / 2 ? "end" : "start")) .attr("fill", (d) => color(d.category)) .style("font-size", (d) => `${Math.sqrt(d.y1 - d.y0) * 3.5 + 5}px`) // この行を追加 .text((d) => { if (targetTotals[d.name] && d.x0 >= width / 2) { return `${d.name} ${format(targetTotals[d.name])} 人`; } return d.name; }); return svg.node(); }4d:T1bd9,// chart = { // // チャートの寸法を指定 // const width = 1200; // const height = 500; // // 数値のフォーマットを定義 // const format = d3.format(",.0f"); // // SVGコンテナを作成 // const svg = d3 // .create("svg") // .attr("width", width) // .attr("height", height) // .attr("viewBox", [0, 0, width, height]) // .attr( // "style", // "max-width: 100%; height: auto; font: 15px 'Noto Sans JP', sans-serif; font-weight: bold;" // ); // const marginLeft = 240; // 左の余白 // const marginRight = 110; // 右の余白 // const effectiveWidth = width - marginLeft - marginRight; // // Sankeyジェネレータを構築し、設定を適用 // const sankey = d3 // .sankey() // .nodeId((d) => d.name) // ノードのIDを定義 // .nodeAlign(d3[nodeAlign]) // ノードの配置を設定（例：d3.sankeyLeft） // .nodeWidth(15) // ノードの幅を設定 // .nodePadding(10) // ノード間のパディングを設定 // .extent([ // [1 + marginLeft, 5], // 左の余白を追加 // [effectiveWidth - 1, height - 5] // effectiveWidthを使用して右の余白を設定 // ]); // サイズとマージンを定義 // // データにジェネレータを適用 // // ノードとリンクオブジェクトのコピーを作成して、オリジナルの変更を避ける // const { nodes, links } = sankey({ // nodes: data.nodes.map((d) => Object.assign({}, d)), // links: data.links.map((d) => Object.assign({}, d)) // }); // // 色のスケールを定義 // const color = d3.scaleOrdinal(d3.schemeCategory10); // // ノードを表す長方形を作成 // const rect = svg // .append("g") // .attr("stroke", "#000") // .selectAll() // .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) // .attr("fill", (d) => color(d.category)); // 色のカテゴリに基づいて色を設定 // // ノードにタイトルを追加 // rect // .attr("stroke", "white") // .append("title") // .text((d) => `${d.name}\n${format(d.value)} 人`); // // リンクを表すパスを作成 // const link = svg // .append("g") // .attr("fill", "none") // .attr("stroke-opacity", 0.5) // .selectAll() // .data(links) // .join("g") // .style("mix-blend-mode", "multiply") // 重なったときの色の混合モードを指定 // .on("mouseover", function (event, d) { // // 他のリンクの不透明度を0.2に設定 // link.style("stroke-opacity", function (linkData) { // return linkData === d ? 0.9 : 0.2; // }); // }) // .on("mouseout", function () { // // 全てのリンクの不透明度を0.5に戻す // link.style("stroke-opacity", 0.5); // }); // const targetTotals = {}; // links.forEach((link) => { // if (!targetTotals[link.target.name]) { // targetTotals[link.target.name] = 0; // } // targetTotals[link.target.name] += link.value; // }); // // ツールチップの定義 // const tooltip = d3 // .select("body") // .append("div") // .attr("class", "tooltip") // .style("position", "absolute") // .style("z-index", "10") // .style("visibility", "hidden") // .style("background", "white") // .style("border", "solid 1px #ccc") // .style("border-radius", "5px") // .style("padding", "10px") // .style("opacity", 0.8) // .style("font", "16px 'Noto Sans JP', sans-serif"); // link // .on("mouseover", function (event, d) { // tooltip // .html(`${d.source.name} → ${d.target.name}
${format(d.value)} 人`) // .style("visibility", "visible"); // }) // .on("mousemove", function (event) { // tooltip // .style("top", event.pageY - tooltip.node().offsetHeight - 10 + "px") // .style("left", event.pageX - tooltip.node().offsetWidth / 2 + "px"); // }) // .on("mouseout", function () { // tooltip.style("visibility", "hidden"); // }); // // ... [残りのコード] // // 必要に応じて、ソース-ターゲットの色オプションのためのグラデーションを作成 // if (linkColor === "source-target") { // const gradient = link // .append("linearGradient") // .attr("id", (d) => (d.uid = DOM.uid("link")).id) // .attr("gradientUnits", "userSpaceOnUse") // .attr("x1", (d) => d.source.x1) // .attr("x2", (d) => d.target.x0); // gradient // .append("stop") // .attr("offset", "0%") // .attr("stop-color", (d) => color(d.source.category)); // gradient // .append("stop") // .attr("offset", "100%") // .attr("stop-color", (d) => color(d.target.category)); // } // // パスの形状、色、幅を設定 // link // .append("path") // .attr("d", d3.sankeyLinkHorizontal()) // .attr( // "stroke", // linkColor === "source-target" // ? (d) => d.uid // : linkColor === "source" // ? (d) => color(d.source.category) // : linkColor === "target" // ? (d) => color(d.target.category) // : linkColor // ) // .attr("stroke-width", (d) => Math.max(1, d.width)); // // リンクにタイトルを追加 // // link // // .attr("stroke", "white") // // .append("title") // // .text((d) => `${d.source.name} → ${d.target.name}\n${format(d.value)} 人`); // link // .on("mouseover", function (event, d) { // // ツールチップの内容を設定 // tooltip // .html(`${d.source.name} → ${d.target.name}
${format(d.value)} 人`) // .style("visibility", "visible"); // }) // .on("mousemove", function (event) { // // ツールチップの位置をマウスの位置に合わせて動かす // tooltip // .style("top", event.pageY - 10 + "px") // .style("left", event.pageX + 10 + "px"); // }) // .on("mouseout", function () { // // ツールチップを非表示にする // tooltip.style("visibility", "hidden"); // }); // // ノードにラベルを追加 // svg // .append("g") // // .attr("font-size", "17") // // .attr("stroke", "white") // // .attr("stroke-width", "0.2") // .selectAll("text") // .data(nodes) // .join("text") // .attr("x", (d) => (d.x0 < width / 2 ? d.x1 - 25 : d.x0 + 25)) // .attr("y", (d) => (d.y1 + d.y0) / 2) // .attr("dy", "0.35em") // .attr("text-anchor", (d) => (d.x0 < width / 2 ? "end" : "start")) // .attr("fill", (d) => color(d.category)) // .style("font-size", (d) => `${Math.sqrt(d.y1 - d.y0) * 3.5 + 5}px`) // この行を追加 // .text((d) => { // if (targetTotals[d.name] && d.x0 >= width / 2) { // return `${d.name} ${format(targetTotals[d.name])} 人`; // } // return d.name; // }); // return svg.node(); // SVGノードを返す // } 4e:[{"id":"0373b1bf86748945a83258310ade434a2fb82cb9347f3d4cbfbf781f8d0e8170378c7a78f994af8b5c0572135023edbbdfa088e52e92230fb70f1d0c49e00832","href":"https://static.observableusercontent.com/files/0373b1bf86748945a83258310ade434a2fb82cb9347f3d4cbfbf781f8d0e8170378c7a78f994af8b5c0572135023edbbdfa088e52e92230fb70f1d0c49e00832","name":"230815_太平洋戦争_引き揚げデータ@1.csv","type":"text/csv","lastModified":1692065375957.434,"size":1368}] 48:{"id":"f921db9c3a802464","slug":"repatriates","title":"Visualize the movement of repatriates after the Asia-Pacific War","thumbnail":"aa385ea1ef61e5af24940078f2733fcb270b8e2eb654be9e2512ee5db6a0de1b","access_level":"public","create_time":"$D2023-08-15T01:41:10.806Z","update_time":"$D2024-01-27T00:15:21.952Z","view_time":null,"first_public_time":"$D2023-08-15T03:40:49.794Z","has_unpublished_edits":null,"fork":{"id":"3ecaa4aaa61dc833","slug":"sankey/2","title":"Sankey diagram","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"59dc038720f2d6ef","login":"tsurezure-lab-ws","name":"tsurezure lab. こちら徒然研究室（仮称）","avatar_url":"https://avatars-next.observableusercontent.com/acea9591cc9d41429f95084ddae72aba731500f6a2cc2ef2c90104e712930467","tier":"starter_2024","bio":"Data x Ethnography x Visualization / Python\nデータとプログラミングと可視化で文化・社会・人間の不思議を研究しています。","followed_by_you":false,"follows_you":false},"version":537,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5dc444280c822d70","login":"tsurezure-lab","name":"tsurezure lab. ","avatar_url":"https://avatars-next.observableusercontent.com/acea9591cc9d41429f95084ddae72aba731500f6a2cc2ef2c90104e712930467","tier":null,"bio":"Data x Ethnography x Visualization / Python\nデータとプログラミングと可視化で文化・社会・人間の不思議を研究しています。","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"5dc444280c822d70","login":"tsurezure-lab","name":"tsurezure lab. ","avatar_url":"https://avatars-next.observableusercontent.com/acea9591cc9d41429f95084ddae72aba731500f6a2cc2ef2c90104e712930467","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Visualize the movement of repatriates after the Asia-Pacific War","cells":[{"id":0,"value":"# Visualize the movement of repatriates after the Asia-Pacific War\n### アジア・太平洋戦争後の引き揚げ者の移動を可視化してみる","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":528,"value":"viewof linkColor = Inputs.select(\n new Map([\n [\"static\", \"#aaa\"],\n [\"source-target\", \"source-target\"],\n [\"source\", \"source\"],\n [\"target\", \"target\"]\n ]),\n {\n value:\n new URLSearchParams(html``.search).get(\"color\") ||\n \"source-target\",\n label: \"Link color\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"viewof nodeAlign = Inputs.select(new Map([[\"left\", \"sankeyLeft\"], [\"right\", \"sankeyRight\"], [\"center\", \"sankeyCenter\"], [\"justify\", \"sankeyJustify\"]]), {\n value: \"sankeyJustify\",\n label: \"Node alignment\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"\n\n\n \n\n\n \n

\n アジア・太平洋戦争後の引き揚げ者の移動を可視化してみる\n

\n \n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":509,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"　　社会実情データ図録のデータより徒然研究室（仮称）がサンキーダイアグラムを作成。出国地ごとの出国人数は不明のため、便宜上港の引き揚げ人数を出国地の数で等分した。","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":249,"value":"data = {\n const links = await FileAttachment(\n \"230815_太平洋戦争_引き揚げデータ@1.csv\"\n ).csv({ typed: true });\n const nodes = Array.from(\n new Set(links.flatMap((l) => [l.source, l.target])),\n (name) => ({ name, category: name.replace(/ .*/, \"\") })\n );\n return { nodes, links };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"__ = await FileAttachment(\"230815_太平洋戦争_引き揚げデータ@1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"__","database":"$undefined"},{"id":7,"value":"// [d3-sankey](https://github.com/d3/d3-sankey) is not part of the D3 bundle\nd3 = require(\"d3@7\", \"d3-sankey@0.12\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null