25:["$","title",null,{"children":"Number of views on Wikipedia on the day of Kohaku + the day after | tsurezure lab. こちら徒然研究室（仮称） | Observable"}] 49:T534,

紅白2023 当日+翌日の Wikipedia閲覧数

4a:T216d,chart = { // チャートの寸法を指定します。 const width = 1200; // 幅を1200に設定 const height = 675; // 高さを675に設定 // 色のスケールを指定します。 const color = d3.scaleOrdinal(d3.schemeTableau10); // レイアウトを計算します。 const root = d3 .treemap() // ツリーマップレイアウトを生成 .tile(tile) // タイリング方法を指定 .size([width, height]) // サイズを指定 .padding(0.1) // パディングを設定 .round(true)( // 端を丸める d3 .hierarchy(data) // 階層データからルートを生成 .sum((d) => d.value) // 値に基づいて合計を計算 .sort((a, b) => b.value - a.value) // 値に基づいて並べ替え ); const margin = { top: 10, right: 0, bottom: 0, left: 0 }; // 余白を設定 // SVGコンテナを作成します。 const svg = d3 .create("svg") .attr("viewBox", [ 0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom ]) .attr("width", width + margin.left + margin.right) // ツリーマップと余白を考慮した高さに設定 .attr("height", height + margin.top + margin.bottom + 70) // 例: 50を追加して余裕を持たせる .attr( "style", "max-width: 100%; height: auto; font: 10px 'Noto Sans JP', sans-serif; font-weight: bold;" ); // タイトルを追加 const title = svg .append("text") // text要素をsvgに追加 .attr("class", "title") // クラス名を設定 .attr("x", width / 2) // 幅の中央に配置 .attr("y", 12) // 上から20pxの位置に配置 .attr("text-anchor", "middle") // 中央揃えに設定 .style("font-size", "39px") // フォントサイズを設定 .text("紅白歌合戦2023｜大晦日+元日の Wikipedia閲覧数") // タイトルのテキストを設定 .attr("fill", "#535353"); // ツリーマップの配置位置を調整 const treeMap = svg .append("g") // g要素を追加 .attr("transform", `translate(0, 30)`); // タイトルの下に配置するためにY座標を調整 // 階層の各リーフにセルを追加します。 const leaf = treeMap .selectAll("g") // すべてのg要素を選択 .data(root.leaves()) // リーフのデータを適用 .join("g") // g要素を追加 // .attr("filter", shadow) .attr("transform", (d) => `translate(${d.x0},${d.y0})`); // 位置を変換 // ツールチップを追加します。 const format = d3.format(",d"); // 書式を設定 const formatPercent = d3.format(".1%"); // パーセント表示の書式を設定 leaf.append("title").text( (d) => `${d .ancestors() // 先祖要素を取得 .reverse() // 配列を逆にする .map((d) => d.data.name) // 名前を抽出 .join(".")}\n${format(d.value)}\n${formatPercent(d.data.value_2)}` // 書式に従って値を追加 ); // SVGフィルターを定義します。 const shadowFilter = svg.append("filter").attr("id", "shadow"); shadowFilter .append("feDropShadow") .attr("dx", 10) // X方向の影のオフセット .attr("dy", 10) // Y方向の影のオフセット .attr("stdDeviation", 5) // 影のぼかしの大きさ .attr("flood-opacity", 0.8); // 影の透明度を薄く設定します // 色付きの長方形を追加します。 leaf .append("rect") .attr("id", (d) => (d.leafUid = DOM.uid("leaf")).id) // 各長方形に一意のIDを割り当てます .attr("fill", (d) => { while (d.depth > 1) d = d.parent; // 最上位の親まで辿り、その色を取得します return color(d.data.name); }) .attr("fill-opacity", 0.8) // 塗りの不透明度を設定します .attr("width", (d) => d.x1 - d.x0) // 長方形の幅を設定します .attr("height", (d) => d.y1 - d.y0) // 長方形の高さを設定します .attr("stroke", "#FAF5F0") // 枠線の色を設定します .attr("rx", 3) // 角の丸みを設定します .attr("ry", 3) // 角の丸みを設定します .attr("filter", (d) => checkboxes.includes(d.data.name) ? "url(#shadow)" : "" ); // checkboxesで選択された要素に対してフィルターを適用します // テキストがオーバーフローしないようにclipPathを追加します。 leaf .append("clipPath") // clipPath要素を追加 .attr("id", (d) => (d.clipUid = DOM.uid("clip")).id) // IDを設定 .append("use") // use要素を追加 .attr("xlink:href", (d) => d.leafUid.href); // href属性を設定 // 複数行のテキストを追加します。最後の行は値を表示し、特定の書式を持っています。 // まず、既存のtspan要素の数を調べる関数を作成 function countTspans(d) { return d.parentNode ? d.parentNode.childNodes.length : 0; } // テキストのフォントサイズを計算する部分 const text = leaf .append("text") .attr("fill", "#FFFFFF") .attr("fill-opacity", 0.9) .attr("clip-path", (d) => d.clipUid) .attr("font-size", (d) => { const width = d.x1 - d.x0; // セルの横幅 const name = d.data.name; // テキストの内容 // 実際にテキスト描画に使用されるフォントスタイルに合わせてテキストの幅を計算 const textWidth = getTextWidth(name, "10px 'Noto Sans JP', sans-serif"); // セルの幅と高さを考慮してフォントサイズを調整 const fontSize = Math.min((width / textWidth) * 9, height); return fontSize + "px"; }); text .selectAll(null) .data((d) => d.data.name.split(/(?=[A-Z][a-z])|\s+/g)) // 名前を単語ごとに分割 .join("tspan") .attr("x", 3) .attr("y", (d, i) => `${i * 0.9 + 1}em`) .text((d) => d); text .append("tspan") .attr("x", 3) .attr("y", (d) => { const height = d.y1 - d.y0; const textHeight = 10; // テキストの高さを固定値で設定 return height - textHeight + "px"; // 'px' 単位を使用 }) .attr("fill-opacity", 0.45) .text((d) => format(d.value)) .attr("font-size", (d) => { const width = d.x1 - d.x0; const height = d.y1 - d.y0; const name = d.data.name; const textWidth = getTextWidth(name, "10px 'Noto Sans JP', sans-serif"); // フォントサイズを計算し、32pxを超えないように制限 const fontSize = Math.min( Math.min((width / textWidth) * 10 * 0.6, height), 22 ); return fontSize + "px"; }); // テキストの幅を計算する関数 function getTextWidth(text, font) { // ここでのfontパラメータは、実際にテキスト描画に使用されるフォントスタイルを反映するように設定します。 // 例: "10px 'Noto Sans JP', sans-serif" const canvas = document.createElement("canvas"); const context = canvas.getContext("2d"); context.font = font; const metrics = context.measureText(text); return metrics.width; } // ツリーマップを更新する関数 function updateTreemap(selectedNames) { // 選択された名前に基づいてツリーマップのセルの表示を更新 svg.selectAll("rect").attr("fill-opacity", (d) => { return selectedNames.includes(d.data.name) ? opacity_range_high : opacity_range_row; }); } // 初期状態でツリーマップを表示 updateTreemap(checkboxes); // // checkboxesの値が変更されたときにツリーマップを更新 // // ObservableHQはこの依存関係を自動的に検出し、checkboxesが変更されるたびにこのコードを再実行します // Invalidations.observe(() => updateTreemap(checkboxes)); svg .append("text") .attr("x", 10) // 左から10pxの位置 .attr("y", height + 38) // 下から10pxの位置（キャプションのベースライン） .text( "Wikipediaデータより徒然研究室（仮称）が2024年1月2日作成。集計対象期間は23年12月31日と241月1日。" ) // キャプションのテキスト .attr("fill", "#535353") .attr( "style", "max-width: 100%; height: auto; font: 10px 'Noto Sans JP', sans-serif; font-weight: normal;" ) .style("font-size", "8.3px"); // フォントサイズを12pxに設定 return Object.assign(svg.node(), { scales: { color } }); // svgノードと色のスケールを返す }4b:[{"id":"d21b050c0f67b38986c55d6e6d6bb636a740fc16961db9c4efcc2b780a6fc1bafd19da6be02f69ed7d9492016a4b42ca82f37fbc0d9d9a852b3e2fdf120517bd","href":"https://static.observableusercontent.com/files/d21b050c0f67b38986c55d6e6d6bb636a740fc16961db9c4efcc2b780a6fc1bafd19da6be02f69ed7d9492016a4b42ca82f37fbc0d9d9a852b3e2fdf120517bd","name":"240102_kouhaku_2023_wikipediaAPI.json","type":"application/json","lastModified":1704166211733.756,"size":7732},{"id":"1a80a06e55be0c013dab507088f9cc5d96708e611a02634ae6c4659b25c7bc40ba99855250e1db5f036f104392beb6e731b35ce8ca11918a7506ab3473581517","href":"https://static.observableusercontent.com/files/1a80a06e55be0c013dab507088f9cc5d96708e611a02634ae6c4659b25c7bc40ba99855250e1db5f036f104392beb6e731b35ce8ca11918a7506ab3473581517","name":"240102_kouhaku_2023_wikipediaAPI@1.json","type":"application/json","lastModified":1704177329367.889,"size":7735}] 29:{"id":"d135a3fa419d2850","slug":null,"title":"Number of views on Wikipedia on the day of Kohaku + the day after","thumbnail":"ec7925f9ecb2cda19ef77a7167466f5b1da8fb0ab87a90db49bbb3bea5119a2a","access_level":"public","create_time":"$D2023-08-28T13:37:33.541Z","update_time":"$D2024-01-02T11:15:22.460Z","view_time":null,"first_public_time":"$D2023-08-28T13:37:33.541Z","has_unpublished_edits":null,"fork":{"id":"02a3fe1969c855b3","slug":null,"title":"Language Composition of Comments on Fujii Kaze - Workin' Hard","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":601,"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":"Number of views on Wikipedia on the day of Kohaku + the day after","cells":[{"id":0,"value":"# Number of views on Wikipedia on the day of Kohaku + the day after\n## Wikipediaにおける紅白当日+翌日の閲覧数","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"viewof tile = Inputs.select(\n new Map([\n [\"binary\", d3.treemapBinary],\n [\"squarify\", d3.treemapSquarify],\n [\"slice-dice\", d3.treemapSliceDice],\n [\"slice\", d3.treemapSlice],\n [\"dice\", d3.treemapDice]\n ]),\n { label: \"Tiling method\", value: d3.treemapBinary }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$49","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":484,"value":"viewof checkboxes = Inputs.checkbox(\n Array.from(new Set(data.children.map((d) => d.name))),\n { label: \"Select Artists\" }\n)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"// // デフォルトで全てにチェックが入っているようにする\n// viewof checkboxes = Inputs.checkbox(\n// Array.from(new Set(data.children.map((d) => d.name))),\n// {\n// label: \"Select Artists\",\n// value: Array.from(new Set(data.children.map((d) => d.name))) // 初期値としてすべてのカテゴリを設定\n// }\n// )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"viewof opacity_range_high = Inputs.range([0.8, 1.0], {\n label: \"Opacity\",\n step: 0.05\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"viewof opacity_range_row = Inputs.range([0, 0.3], {\n label: \"Opacity\",\n step: 0.05\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"　　YouTubeデータより徒然研究室（仮称）作成。2023年8月28日データ取得。期間はアジアツーアー開始の23年6月24日以降。対象は視聴回数上位98ヶ国。数値は視聴回数と全体おける構成比。","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"import { Swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"data = FileAttachment(\"240102_kouhaku_2023_wikipediaAPI@1.json\").json()","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