25:["$","title",null,{"children":"Clickstream of \"VIVANT\" page in Wikipedia | tsurezure lab. こちら徒然研究室（仮称） | Observable"}] 49:T1fbb,chart = { const width = 1800; // SVGの幅 const height = 2060; // SVGの高さ const format = d3.format(",.0f"); // 数値フォーマット関数 const svg = d3 .create("svg") // 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 = 210; // 左の余白 190 const marginRight = 50; // 右の余白 const effectiveWidth = width - marginLeft - marginRight; // 有効な幅 const sankey = d3 .sankey() // Sankeyダイアグラム生成器 .nodeId((d) => d.name) // ノードのIDを設定 .nodeAlign(d3[nodeAlign]) // ノードの配置方法を設定 .nodeWidth(15) // ノードの幅 .nodePadding(10) // ノード間の余白 .extent([ [1 + marginLeft, 5], // Sankeyダイアグラムの範囲（左上） [effectiveWidth - 1, height - 5] // Sankeyダイアグラムの範囲（右下） ]); // const { nodes, links } = sankey({ // nodes: data.nodes.map((d) => Object.assign({}, d)), // ノードデータをコピー // links: data.links.map((d) => Object.assign({}, d)) // リンクデータをコピー // }); // ステップ1: データの読み込み時にノードのラベルにvalueを追加 const { nodes, links } = sankey({ nodes: data.nodes.map((d) => { // valueを追加 d.value = data.links .filter((link) => link.source === d.name) .reduce((acc, curr) => acc + curr.value, 0); return 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) // x座標の開始位置 .attr("y", (d) => d.y0) // y座標の開始位置 .attr("height", (d) => d.y1 - d.y0) // 高さ .attr("width", (d) => d.x1 - d.x0) // 幅 .attr("fill", (d) => color(d.category)); // ノードのカラー // ノードにタイトルを追加 rect // .attr("stroke", "white") // ストロークカラー .attr("stroke-width", 0) // ストロークの太さを0に設定 .append("title"); // タイトルを追加 // .text((d) => `${d.name}\n${format(d.value)} 回`); // タイトルのテキスト // .text((d) => `${d.category}\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") // ラベルを含むグループを追加 // .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.category] && d.x0 >= width / 2) { // return `${d.category} ${format(targetTotals[d.category])} 回`; // } // return d.category; // }); // ステップ2: ノードに対するラベル表示の部分を変更; svg .append("g") // ラベルを含むグループを追加 .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.category] && d.x0 >= width / 2) { // return `${d.category} ${format(targetTotals[d.category])}`; // } // // ノードのラベルを表示 // return `${d.category} ${format(d.value)}`; // }); .text(function (d) { if (targetTotals[d.category] && d.x0 >= width / 2) { return `${d.category} ${format(targetTotals[d.category])}`; } // ノードのラベルを表示 return `${d.category} ${format(d.value)}`; }) // .each(function (d) { // var text = d3.select(this); // var lines = text.text().split(" "); // text.text(""); // for (var i = 0; i < lines.length; i++) { // text // .append("tspan") // .attr("x", text.attr("x")) // .attr("dy", i ? "1.2em" : 0) // .text(lines[i]); // } // }); .each(function (d) { var text = d3.select(this); var lines = text.text().split(" "); text.text(""); for (var i = 0; i < lines.length; i++) { text .append("tspan") .attr("x", text.attr("x")) .attr("dy", i ? "1.2em" : 0) .style( "font-size", `${Math.sqrt(d.y1 - d.y0) * (i == 0 ? 4 : 0.875) + 5}px` ) // フォントサイズを設定 .text(lines[i]); } }); return svg.node(); }4a:T1fc7,chart2 = { const width = 1800; // SVGの幅 const height = 2060; // SVGの高さ const format = d3.format(",.0f"); // 数値フォーマット関数 const svg = d3 .create("svg") // 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 = 250; // 左の余白 190 const marginRight = 180; // 右の余白 200 const effectiveWidth = width - marginLeft - marginRight; // 有効な幅 const sankey = d3 .sankey() // Sankeyダイアグラム生成器 .nodeId((d) => d.name) // ノードのIDを設定 .nodeAlign(d3[nodeAlign]) // ノードの配置方法を設定 .nodeWidth(15) // ノードの幅 .nodePadding(10) // ノード間の余白 .extent([ [1 + marginLeft, 5], // Sankeyダイアグラムの範囲（左上） [effectiveWidth - 1, height - 5] // Sankeyダイアグラムの範囲（右下） ]); // const { nodes, links } = sankey({ // nodes: data2.nodes.map((d) => Object.assign({}, d)), // ノードデータをコピー // links: data2.links.map((d) => Object.assign({}, d)) // リンクデータをコピー // }); // ステップ1: データの読み込み時にノードのラベルにvalueを追加 const { nodes, links } = sankey({ nodes: data2.nodes.map((d) => { // valueを追加 d.value = data2.links .filter((link) => link.source === d.name) .reduce((acc, curr) => acc + curr.value, 0); return Object.assign({}, d); }), links: data2.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) // x座標の開始位置 .attr("y", (d) => d.y0) // y座標の開始位置 .attr("height", (d) => d.y1 - d.y0) // 高さ .attr("width", (d) => d.x1 - d.x0) // 幅 .attr("fill", (d) => color(d.category)); // ノードのカラー // ノードにタイトルを追加 rect // .attr("stroke", "white") // ストロークカラー .attr("stroke-width", 0) // ストロークの太さを0に設定 .append("title"); // タイトルを追加 // .text((d) => `${d.name}\n${format(d.value)} 回`); // タイトルのテキスト // .text((d) => `${d.category}\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") // ラベルを含むグループを追加 // .selectAll("text") // .data2(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.category] && d.x0 >= width / 2) { // return `${d.category} ${format(targetTotals[d.category])} 回`; // } // return d.category; // }); // ステップ2: ノードに対するラベル表示の部分を変更; svg .append("g") // ラベルを含むグループを追加 .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.category] && d.x0 >= width / 2) { // return `${d.category} ${format(targetTotals[d.category])}`; // } // // ノードのラベルを表示 // return `${d.category} ${format(d.value)}`; // }); .text(function (d) { if (targetTotals[d.category] && d.x0 >= width / 2) { return `${d.category} ${format(targetTotals[d.category])}`; } // ノードのラベルを表示 return `${d.category} ${format(d.value)}`; }) // .each(function (d) { // var text = d3.select(this); // var lines = text.text().split(" "); // text.text(""); // for (var i = 0; i < lines.length; i++) { // text // .append("tspan") // .attr("x", text.attr("x")) // .attr("dy", i ? "1.2em" : 0) // .text(lines[i]); // } // }); .each(function (d) { var text = d3.select(this); var lines = text.text().split(" "); text.text(""); for (var i = 0; i < lines.length; i++) { text .append("tspan") .attr("x", text.attr("x")) .attr("dy", i ? "1.2em" : 0) .style( "font-size", `${Math.sqrt(d.y1 - d.y0) * (i == 0 ? 4 : 0.875) + 5}px` ) // フォントサイズを設定 .text(lines[i]); } }); return svg.node(); }4b:[{"id":"7b161262c77c530868896d417ac79300e6fe7eadba2eae76aaa74fb3629c3e9a784b6ca111a65aa494dedf1c728b672dd2f4157c2e4437eb00d6f700b37cf384","href":"https://static.observableusercontent.com/files/7b161262c77c530868896d417ac79300e6fe7eadba2eae76aaa74fb3629c3e9a784b6ca111a65aa494dedf1c728b672dd2f4157c2e4437eb00d6f700b37cf384","name":"230910_wikipedia_VIVANT_ja_type_2308@1.csv","type":"text/csv","lastModified":1694322528515.618,"size":9543},{"id":"21acb6767401da927fb5384d6fd5e38af8f76ad67cd44a20134277e18af797b82675ee519c518bad0003029b8e0b68f8a41489d768a3bf7f355bde8713bbf87e","href":"https://static.observableusercontent.com/files/21acb6767401da927fb5384d6fd5e38af8f76ad67cd44a20134277e18af797b82675ee519c518bad0003029b8e0b68f8a41489d768a3bf7f355bde8713bbf87e","name":"230910_wikipedia_VIVANT_ja_type_2308_without_search@1.csv","type":"text/csv","lastModified":1694322538028.833,"size":9419}] 29:{"id":"297eedfd04a74fee","slug":null,"title":"Clickstream of \"VIVANT\" page in Wikipedia","thumbnail":"36ad350f5b5c5ad239320b93edf6a12658509e60deb0b7b3cb23b6781fde1ff8","access_level":"public","create_time":"$D2023-09-10T05:04:11.662Z","update_time":"$D2023-09-10T05:29:14.868Z","view_time":null,"first_public_time":"$D2023-09-10T05:04:11.662Z","has_unpublished_edits":null,"fork":{"id":"533c242211ae663f","slug":null,"title":"Clickstream of \"Fujii Kaze\" page in Wikipedia","owner":{"id":"59dc038720f2d6ef","login":"tsurezure-lab-ws","name":"tsurezure lab. こちら徒然研究室（仮称）"}},"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":773,"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"},{"type":"team","id":"59dc038720f2d6ef","login":"tsurezure-lab-ws","name":"tsurezure lab. こちら徒然研究室（仮称）","avatar_url":"https://avatars-next.observableusercontent.com/acea9591cc9d41429f95084ddae72aba731500f6a2cc2ef2c90104e712930467","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Clickstream of \"VIVANT\" page in Wikipedia","cells":[{"id":0,"value":"# Clickstream of \"VIVANT\" page in Wikipedia\n### Wikipediaにおける「VIVANT」ページのクリックストリーム","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 Wikipedia「VIVANT」ページへの流入出 2023年8月\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":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"_wikipedia_fujiikaze_processed_renamed = await FileAttachment(\"230910_wikipedia_VIVANT_ja_type_2308@1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"_wikipedia_fujiikaze_processed_renamed","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 \"230910_wikipedia_VIVANT_ja_type_2308@1.csv\"\n ).csv({\n typed: true\n }); // CSVファイルを読み込み、タイプ指定でデータを取得\n\n const nodes = Array.from(\n new Set(links.flatMap((l) => [l.source, l.target])),\n (name) => ({ name, category: name.replace(/ .*/, \"\") })\n );\n // ノードデータを生成\n // - 重複を排除し、ソースとターゲットを抽出\n // - ノードオブジェクトを作成し、カテゴリーを設定\n\n return { nodes, links }; // ノードとリンクのデータを返す\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":732,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"data2 = {\n const links = await FileAttachment(\n \"230910_wikipedia_VIVANT_ja_type_2308_without_search@1.csv\"\n ).csv({\n typed: true\n }); // CSVファイルを読み込み、タイプ指定でデータを取得\n\n const nodes = Array.from(\n new Set(links.flatMap((l) => [l.source, l.target])),\n (name) => ({ name, category: name.replace(/ .*/, \"\") })\n );\n // ノードデータを生成\n // - 重複を排除し、ソースとターゲットを抽出\n // - ノードオブジェクトを作成し、カテゴリーを設定\n\n return { nodes, links }; // ノードとリンクのデータを返す\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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"}],"files":"$W4b","stdlib":"1"}} 24:null