2c:null 2d:["$","title",null,{"children":"2023年の紅白が過去最低視聴率だった原因は何？ | TMU Dataviz Class | Observable"}] 32:Tbad,//視聴率グラフ ChartShityouritu = { const height = (width * 9) / 16; const svg = d3.create("svg").attr("width", width).attr("height", height); const margin = { top: 50, right: width / 50, bottom: width / 40, left: 40 }; const xScale = d3 .scaleBand() .domain(dataset.map((d) => d.number)) .range([margin.left, width - margin.right]) .padding(0.1); const yScale = d3 .scaleLinear() .domain([0, 100]) .range([height - margin.bottom, margin.top]) .unknown(50); const xAxis = d3 .axisBottom() .scale(xScale) .tickFormat((d) => `${d}`) .tickSize(0); const yAxis = d3 .axisLeft() .scale(yScale) .tickSize(-(width - margin.left - margin.right)); svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#5C5C69"); svg .append("g") .attr("class", "xAxis") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(xAxis) .attr("color", "white") .attr("font-size", 10); svg .append("g") .attr("class", "yAxis") .attr("transform", `translate(${margin.left}, 0)`) .call(yAxis) .attr("color", "white") .attr("font-size", 15); svg .selectAll("g.xAxis, g.yAxis") .selectAll("line, path") .attr("stroke", "white") .attr("opacity", 0.8); svg .selectAll("rect.bar") .data(yeardata) .join("rect") .attr("x", (d) => xScale(d.number)) .attr("y", (d) => yScale(d.rate)) .attr("width", xScale.bandwidth()) .attr("height", (d) => yScale(0) - yScale(d.rate)) .attr("fill", (d) => wincolor(d.win)) .attr("class", "bar") .attr("opacity", (d) => (d.number >= 1 && d.number <= 12 ? 0.5 : 1)) // 透明度の設定 .style("cursor", "pointer") .on("mouseover", function (e, d, i) { tooltip .html(`

${d.year}年
${d.rate}%
${d.caption}

`) .style("visibility", "visible"); d3.select(this).attr("opacity", 0.9); }) .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", "400px"); }) .on("mouseout", function () { tooltip.html(``).style("visibility", "hidden"); d3.select(this) .transition() .attr("fill", (d) => wincolor(d.win)) .attr("opacity", (d) => (d.number >= 1 && d.number <= 12 ? 0.5 : 1)); }) .on("click", function (e, d) { // クリックされたときにURLを新しいタブで開く if (d.url) { window.open(d.url, "_blank"); } }); return svg.node(); }33:T134b,BarChartRace = (data) => { const dataset_year = data; const rectheight = 10; const fontsize = 13; const margin = { top: 50, right: 30, bottom: 20, left: 100 }; // 名前の個数を取得 const nameCount = d3.group(dataset_year, (d) => d.name).size; // 高さを計算 const height = 900 * rectheight * (nameCount / 759) + margin.top + margin.bottom; // 759は最大の名前の個数 // スケール関数 const xScale = d3 .scaleLinear() .domain([Year, Year - kosuu]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleBand() .domain(dataset_year.map((d) => d.name)) .range([margin.top, height - margin.bottom]); // 軸関数 const xAxis = d3 .axisTop() .scale(xScale) .ticks(kosuu) .tickFormat((d) => d <= 0 ? "-" : String(dataset.find((item) => item.number === d).year).slice(-2) ); // 0以下の値を"-"に置き換え、下2桁のみ表示 const yAxis = d3.axisLeft().scale(yScale); const svg = d3.create("svg").attr("width", width).attr("height", height); //背景 svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#FFFEF6"); svg .append("text") .attr("x", width - rectheight) .attr("y", 20) .attr("text-anchor", "end") // テキストを右寄せにする .attr("alignment-baseline", "hanging") // テキストを上揃えにする .attr("font-size", 10) .text("（年）"); // 方眼線の描画 const gridLines = svg.append("g").attr("class", "grid-lines"); // 横方向の方眼線 yScale.domain().forEach((d) => { gridLines .append("line") .attr("class", "horizontal") .attr("x1", margin.left) .attr("x2", width - margin.right) .attr("y1", yScale(d) + yScale.bandwidth()) .attr("y2", yScale(d) + yScale.bandwidth()) .attr("stroke", "lightgray") .attr("stroke-width", 1); }); // 横のグリッド線を描画 xScale.ticks(kosuu).forEach((tick) => { svg .append("line") .attr("x1", xScale(tick)) .attr("x2", xScale(tick)) .attr("y1", margin.top) .attr("y2", height - margin.bottom) .attr("stroke", "lightgray") .attr("stroke-dasharray", "4"); }); // 軸の描画 svg .append("g") .attr("class", "xAxis") .attr("transform", `translate(0, ${margin.top})`) .call(xAxis) .attr("font-size", fontsize); svg .append("g") .attr("class", "yAxis") .attr("transform", `translate(${margin.left}, 0)`) .call(yAxis) .attr("font-size", fontsize); svg.append("g").attr("class", "yAxis").call(yAxis); // 四角の描画 svg .selectAll("rect") .data(dataset_year) .enter() .append("rect") .attr("x", (d) => xScale(d.number)) .attr("y", (d) => yScale(d.name)) .attr("width", (width - margin.left - margin.right) / kosuu) .attr("height", rectheight) .attr("fill", (d) => GenreColor(d.Genre)) .attr("opacity", 1) .on("mouseover", function (e, d, i) { tooltip .html( `

${d.year}年
${d.kaisuu}回目
${d.name}
曲名:${d.song}
${d.Genre}

` ) .style("visibility", "visible"); d3.select(this).attr("opacity", 0.5); }) .on("mousemove", function (e) { // ツールチップの横幅を取得 var tooltipWidth = tooltip.node().offsetWidth; var tooltipHeight = tooltip.node().offsetHeight; // マウスのX座標によって条件分岐 var tooltipX = e.pageX < window.innerWidth / 2 ? e.pageX + 10 : e.pageX - tooltipWidth - 10; // マウスのY座標によって条件分岐 var tooltipY = e.pageY < height / 2 ? e.pageY - tooltipHeight - 10 : e.pageY + 10; // ツールチップをマウスの位置に移動 tooltip .style("top", tooltipY + "px") .style("left", tooltipX + "px") .style("width", "300px"); }) .on("mouseout", function () { tooltip.html(``).style("visibility", "hidden"); d3.select(this) .transition() .attr("fill", (d) => GenreColor(d.Genre)) .attr("opacity", 1); }); svg .append("rect") .attr("x", margin.left) .attr("y", margin.top) .attr("width", (width - margin.left - margin.right) / kosuu) .attr("height", rectheight) .attr("fill", "#e28082"); svg .selectAll("text.label") .data(dataset_year.filter((d) => d.kaisuu === 1)) .join("text") .attr("x", (d) => xScale(d.number) - rectheight) .attr("y", (d) => yScale(d.name) + rectheight) .text((d) => d.name) .attr("font-family", "sans-serif") .attr("text-anchor", "end") // 右寄せにするために "end" を指定 .attr("font-weight", "bold") .attr("font-size", 12) .attr("fill", (d) => GenreColor(d.Genre)) .attr("class", "label"); return svg.node(); }35:Ta37,stackedchart = (data, series, legend, color) => { const div = d3.create("div"); const margin = { top: 50, right: 10, bottom: 30, left: 40 }; const height = 400; const x = d3 .scaleBand() .domain(data.map((d) => d.year)) .range([margin.left, width - margin.right]) .padding(0.1); const y = d3 .scaleLinear() .domain([0, d3.max(series, (d) => d3.max(d, (d) => d[1]))]) .rangeRound([height - margin.bottom, margin.top]); const xAxis = (g) => g .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) .call((g) => g.selectAll(".domain").remove()); const yAxis = (g) => g .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(y).ticks(null, "s")) .call((g) => g.selectAll(".domain").remove()) // 水平方向のグリッド線を追加 .call((g) => g .selectAll("line") .clone() .attr("x2", width - margin.left - margin.right) .attr("stroke-opacity", 0.5) .attr("stroke-dasharray", "5,5") ); const legendContainer = div .append("div") .attr("id", "legend") .style("margin-left", `${margin.left + 10}px`); const svg = div.append("svg").attr("viewBox", [0, 0, width, height]); svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#FFFEF6"); svg.append("g").call(xAxis).attr("font-size", 20); svg.append("g").call(yAxis).attr("font-size", 15); svg .append("g") .selectAll("g") .data(series) .join("g") .attr("fill", (d) => color(d.key)) .selectAll("rect") .data((d) => d) .join("rect") .attr("x", (d, i) => x(d.data.year)) .attr("y", (d) => y(d[1])) .attr("height", (d) => y(d[0]) - y(d[1])) .attr("width", x.bandwidth()) .on("mouseover", function (event, d) { // ホバー時のイベント const genre = d3.select(this.parentNode).datum().key; const value = d[1] - d[0]; // ツールチップを表示 tooltip.html(` ${genre}
${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"); }); legendContainer.call(legend); return div.node(); }36:T638,_data_idol = (() => { const dataset = dataset23_84; const columns = [ "year", "アイドル", "ジャニーズ", "元ジャニーズ", "ハロプロ", "LDH", "48系", "韓国アイドル", "坂道" ]; return (() => { const data = Array.from( d3.group(dataset, (d) => d.year), ([year, data]) => { const genreCounts = { アイドル: 0, ジャニーズ: 0, 元ジャニーズ: 0, ハロプロ: 0, LDH: 0, "48系": 0, 韓国アイドル: 0, 坂道: 0 }; data.forEach((person) => { switch (person.Genre) { case "アイドル": genreCounts["アイドル"]++; break; case "ジャニーズ": genreCounts["ジャニーズ"]++; break; case "元ジャニーズ": genreCounts["元ジャニーズ"]++; break; case "ハロプロ": genreCounts["ハロプロ"]++; break; case "LDH": genreCounts["LDH"]++; break; case "48系": genreCounts["48系"]++; break; case "韓国アイドル": genreCounts["韓国アイドル"]++; break; case "坂道": genreCounts["坂道"]++; break; } }); return { year, ...genreCounts }; } ); data.columns = columns; return data; })(); })()37:T6a8,style = html` `38:[{"id":"6682f5c1aade12aa7a40e552379c6544a4a58ca8ab84c1da00f14e3f725da034bde6209ce77f2645ec66adb365c1c4713435a302d29e1f572af5b9354f936f24","href":"https://static.observableusercontent.com/files/6682f5c1aade12aa7a40e552379c6544a4a58ca8ab84c1da00f14e3f725da034bde6209ce77f2645ec66adb365c1c4713435a302d29e1f572af5b9354f936f24","name":"thumbnailのコピー.png","type":"image/png","lastModified":1710230270580.447,"size":89754},{"id":"e23b4f8a4390bc25b1fe01adcbe2a119b81031000e1082978cbfac94c5b0ed9e7d5211dbf07cfef5741504ae7df8de97245221292aed69980a9744cd55b7ccbe","href":"https://static.observableusercontent.com/files/e23b4f8a4390bc25b1fe01adcbe2a119b81031000e1082978cbfac94c5b0ed9e7d5211dbf07cfef5741504ae7df8de97245221292aed69980a9744cd55b7ccbe","name":"紅白 - 歌.tsv","type":"text/tab-separated-values","lastModified":1715513978090.135,"size":264162},{"id":"ca59cd306ab80df3ad347e01e852f47112d7a7cf11dc89e1954369821d2358141288ba1c4bdddeec79a14de6850338e83dd59634edd4a68006348317483a4376","href":"https://static.observableusercontent.com/files/ca59cd306ab80df3ad347e01e852f47112d7a7cf11dc89e1954369821d2358141288ba1c4bdddeec79a14de6850338e83dd59634edd4a68006348317483a4376","name":"紅白 - 年表.tsv","type":"text/tab-separated-values","lastModified":1715513981899.584,"size":20435},{"id":"f4423e342ac9f6fccc73395018eb07a6352b195d647b4dbff29198381942c9aa62aacb7c8d11968de4fbc03c4e2128ba73e01bfba650ffd36f4cbabfb62b34f2","href":"https://static.observableusercontent.com/files/f4423e342ac9f6fccc73395018eb07a6352b195d647b4dbff29198381942c9aa62aacb7c8d11968de4fbc03c4e2128ba73e01bfba650ffd36f4cbabfb62b34f2","name":"IMG_8790@1.jpg","type":"image/jpeg","lastModified":1705242158817.211,"size":43114},{"id":"78045bbdf06e42429eda6a4d07395272116aee8b1e1dee4247fefc215d4bfead8a56f6427e01a9f41313efd983f152be6ced8823cf427303e7a1d1f829b117ab","href":"https://static.observableusercontent.com/files/78045bbdf06e42429eda6a4d07395272116aee8b1e1dee4247fefc215d4bfead8a56f6427e01a9f41313efd983f152be6ced8823cf427303e7a1d1f829b117ab","name":"スクリーンショット 2024-01-15 13.29.52.png","type":"image/png","lastModified":1705293017814.394,"size":627706},{"id":"6d98666b7e9fefd880ef3ddc6130e77369ecf7caff1f1df756c898a057e9b00f515f37cf7f8ddd77059491b610251d95313ea0c37cb2942bef5e1c6f429278d4","href":"https://static.observableusercontent.com/files/6d98666b7e9fefd880ef3ddc6130e77369ecf7caff1f1df756c898a057e9b00f515f37cf7f8ddd77059491b610251d95313ea0c37cb2942bef5e1c6f429278d4","name":"スクリーンショット 2024-01-15 13.29.45 1.png","type":"image/png","lastModified":1705293018028.588,"size":1131314}] 30:{"id":"80703f490d12f04c","slug":"kouhakuhistory","title":"2023年の紅白が過去最低視聴率だった原因は何？","thumbnail":"e75f8fbaa5a46cc66a8985fc453ea2e24100b1ecd7571469d2ba80a10db98e29","access_level":"public","create_time":"$D2024-01-09T06:33:23.273Z","update_time":"$D2025-02-01T03:16:53.141Z","view_time":null,"first_public_time":"$D2024-01-09T06:33:23.273Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"fdca81b2f5eb7de5","login":"tmu-dataviz-class","name":"TMU Dataviz Class","avatar_url":"https://avatars-next.observableusercontent.com/7549232d2187bf99f5cfbd7780436d4ce1cc4257fe3eae6585b5ff10b836499b","tier":"education_2026"},"version":3651,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1f19c39809ab9f21","login":"nagayuka","name":"Nagayuka","avatar_url":"https://avatars-next.observableusercontent.com/412e84621a78b1c108dacfd573aec41893ceb4e5cba629cba46e10a5a37415c6","tier":null}],"members":[{"type":"individual","id":"1f19c39809ab9f21","login":"nagayuka","name":"Nagayuka","avatar_url":"https://avatars-next.observableusercontent.com/412e84621a78b1c108dacfd573aec41893ceb4e5cba629cba46e10a5a37415c6","tier":null,"role":"editor"},{"type":"team","id":"fdca81b2f5eb7de5","login":"tmu-dataviz-class","name":"TMU Dataviz Class","avatar_url":"https://avatars-next.observableusercontent.com/7549232d2187bf99f5cfbd7780436d4ce1cc4257fe3eae6585b5ff10b836499b","tier":"education_2026","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"e5cff4adf97497da","slug":"final-project","title":"2023 Final Project","owner":{"id":"fdca81b2f5eb7de5","login":"tmu-dataviz-class","name":"TMU Dataviz Class"}},"type":"notebook","body":{"titling":"auto","title":"2023年の紅白が過去最低視聴率だった原因は何？","cells":[{"id":0,"value":"# 2023年の紅白が過去最低視聴率だった原因は何？\n

NagakuboYuka

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3550,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3316,"value":"What was the reason for the record low viewership of the 2023 Kōhaku Uta Gassen, a long-running music show in Japan?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1696,"value":"## はじめに","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":339,"value":"昨年2023年の紅白は最低視聴率を記録した。
\n私自身も最近の紅白はどこか面白みに欠けると思っている。そう思う原因として私は二つのことを予想した。\n- K-POPアーティストの出場が増えたこと。\n- 出演者、内容が若者向けになっていること。\n\n2022年の6枠出ていた旧ジャニーズが、ジャニー喜多川氏の性加害問題により、0組になった。それにより、k-popの出場が増え、2022年の5枠から7枠に拡大した。その他、LDHなどの日本のアイドルの出演も少なく、少し韓国に寄せすぎたのではないかと考えている。
\nもう一つは、大学生の私自身もあまりよくわからない曲があり、老若男女楽しめる音楽が少ないように感じた。特に若者向けが多いように感じている。実際最近はテレビ離れが進んでいて紅白を見る人も少ないだろうから、テレビを見る高齢者層に向けたラインナップの方が視聴率はとれるのではと思っている。
\n\nこれらの予想は正しいのか、可視化して確かめる。\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":351,"value":"## データ取得","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":431,"value":"歌ごと、年ごとのデータに分けて、まとめた。\n\n歌のデータはNHK公式のホームページ「紅白歌合戦ヒストリー」からChatGPT 3.5にコピペして、セルデータに書き換えてもらった。誤字とかスペースが入っていたりして手作業で直す必要があった。\n\n年ごとのデータは、視聴率や勝敗などの情報を入れている。\n\n※詳しくデータを見たい方はスプレッドシートをご覧ください。\n\n- [NHK紅白歌合戦ヒストリー/NHK](https://www.nhk.or.jp/kouhaku/history/index.html)(2024年1月引用)\n- [視聴率](http://www1.plala.or.jp/nakaatsu/sityouritu.htm)(2024年1月引用)\n- [作成したスプレッドシート](https://docs.google.com/spreadsheets/d/1sKOykm8Vu9KKB3Xtg43IE-N3fjf1M58k015F9xlsRE4/edit?usp=sharing)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1718,"value":"## 紅白視聴率","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":745,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1721,"value":"

\n グラフの色は勝敗の色。
\n※1961年までは視聴率調査なしのため、薄く表示。
\n※リンクを押すとサイトに飛べる。
\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2315,"value":"紅白の視聴率は年々下がっていることがわかる。とはいえ、前回の2023年でも30%の視聴率を記録しているのはすごいと言える。
\n2023年のテーマはボーダレスということがわかる。これにより韓国アーティストが増えたのではと予想する。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1723,"value":"## 出演者の移り変わり","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1799,"value":"### 紅白アーティスト変移閲覧ツール","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2797,"value":"集めたデータを一覧で見ることができます。\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2855,"value":"#### 見方その１
\nそのままPlayを押して、眺める。たくさん続けて出てるアーティストが上に表示され、伸びていく様子がわかる。\n#### 見方その２\n大会の数と年数（Play横スライダー）を一番多い値にして、停止した状態で見る。どのように移り変わっているか、再び復活しているアーティストは誰なのか、などがわかる。
\n
\nその他カスタムで色々変えて見られます。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2737,"value":"html`

\n※歌データは審査に含まない特別企画等は除いている。
\n※ジャンル分けは、確実ではないものはWikipedia等から独断と偏見で決めた。
\n※日本歌手は、アイドルでもバンドでもないいわゆる歌手という人を表している。
\n※手作業でデータ集めをしたため、抜けや誤りがあることご了承ください。
\n※データの絞り込み等のカスタムは、データの処理的に上から順に変更しないとリセットされてしまいます。またplayを押すと全てリセットされてしまうので、カスタム設定は静止のみでお楽しみください。\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2569,"value":"{\n const height = 60;\n const maxRowWidth = 300; // Set your desired maximum width\n const data = [\n \"日本歌手\",\n \"演歌歌手\",\n \"バンド\",\n \"アイドル\",\n \"ジャニーズ\",\n \"元ジャニーズ\",\n \"LDH\",\n \"ハロプロ\",\n \"48系\",\n \"坂道\",\n \"韓国アイドル\",\n \"海外\"\n ];\n\n //const data = [...d3.group(dataset, (d) => d.Genre).keys()];\n\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n const g = svg\n .append(\"g\")\n .selectAll(\"g\")\n .data(data)\n .join(\"g\")\n .attr(\"transform\", (d, i) => {\n const col = Math.floor((i * 150) / maxRowWidth);\n const row = i - col * Math.floor(maxRowWidth / 150);\n return `translate(${20 + col * 150},${10 + row * 30})`;\n });\n\n g.append(\"circle\").attr(\"r\", 10).attr(\"fill\", GenreColor);\n\n g.append(\"text\")\n .attr(\"x\", 10)\n .attr(\"dy\", 6)\n .text((d) => d);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1479,"value":"viewof kosuu = Inputs.range([1, 74], {\n step: 1,\n value: 20,\n label: \"横軸:大会の数\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2810,"value":"html`

何年分表示するかを選びます。グラフの横軸の個数が変わります。\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1790,"value":"viewof detasetFilter4 = Inputs.checkbox(\n d3.group(dataset_yearFilter3, (d) => d.Genre),\n {\n label: \"絞り込み\",\n key: [...d3.group(dataset_yearFilter3, (d) => d.Genre).keys()] //keyで全部に元々チェックをいれておく\n // format: (x) =>\n // html`${x}`\n }\n)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2846,"value":"html`

表示するアーティストをジャンルごとに絞って見られます。\n\n

出演者の上からの並び順を変えることができます。\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1040,"value":"viewof Year = Scrubber(d3.union(dataset.map((d) => d.number)), {\n loop: true,\n delay: 1000,\n autoplay: false,\n format: (d) => dataset.find((item) => item.number === d).year // 表示する文字をd.yearに設定\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2849,"value":"html`

Playを押すとバーチャートレースのように、アーティストの変移がわかります。\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3647,"value":"BarChartRace(GETdataset_year)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1806,"value":"### アイドルの移り変わり","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2669,"value":"上記の可視化を使い、視聴率が最低だった原因を探す。
\n2023年はアイドルに大きな変化があったと考えたため、そこに注目して見てみる。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2328,"value":"{\n const height = 50;\n const maxRowWidth = 300; // Set your desired maximum width\n\n const data = [...d3.group(dataset_idol, (d) => d.Genre).keys()];\n\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n const g = svg\n .append(\"g\")\n .selectAll(\"g\")\n .data(data)\n .join(\"g\")\n .attr(\"transform\", (d, i) => {\n const col = Math.floor((i * 150) / maxRowWidth);\n const row = i - col * Math.floor(maxRowWidth / 150);\n return `translate(${20 + col * 150},${10 + row * 30})`;\n });\n\n g.append(\"circle\").attr(\"r\", 10).attr(\"fill\", GenreColor);\n\n g.append(\"text\")\n .attr(\"x\", 10)\n .attr(\"dy\", 6)\n .text((d) => d);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1843,"value":"idolChart(dataset_idol)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2900,"value":"70年代から80年代は個人のアイドルが多い。
\nここで活躍した個人アイドルが、のちに時間をあけて一回ポツンと出ていることも多い。
\n2000年ごろからは、女性の大人数グループが出始めている。
\n女性アイドルは大まかに、ソロ→ハロプロ→48系→坂道と順々に移行しているのではないか。
\nジャニーズはどの時代にも出ている印象である
\nK-POPアーティストは、KARA、少女時代が出演の後、一度落ち着き、ここ数年でたくさん出ていることが読み取れる。\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3487,"value":"stackedchart(data_idol, series_idol, legend_idol, GenreColor)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2322,"value":"別のグラフでも見てみる。\n2023年と、視聴率に少々山がある1984年と1998年と2013年で年代の分布がどのような感じなのか見る。
\nこのグラフで見ても、大きく移り変わっていることがわかるだろう。\n特に2023年はの韓国アイドルが、急に出てきたのにも関わらず、アイドル全体の半分ほど占めていて、明らかに増えていることがわかる。
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1038,"value":"## 出演者の年齢層","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3485,"value":"agechart = stackedchart(data, series, legend, color)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2435,"value":"出演アーティストの年齢は、2013から2023年は、25歳以下の数は割合的に増えている。しかし、若い世代が大きく増えたとはいえなさそうだ。
\n同時に60歳以上のアーティストも増えていて、これはなぜだろうか。高齢化の波がきているからなのだろうか...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2456,"value":"## まとめ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2458,"value":"紅白が若者向けになっていると思ったのは証明できなかった。2023年は前半に、私の知らないK-POPや若者向けアーティストがたくさん出ていたから、面白みに欠けると思ったのかもしれない。
\nもう一つ予想していた、韓国アイドルが増加していることは事実なことがわかったが、これが近年の視聴率低迷の原因とも言いきれなさそうだ。
\n近年はテレビ離れも加速しているため、大晦日に紅白という番組目的で観る人は減っているのかもしれない。今回明らかな結果が出なかったということは、ジャンルや年齢が重要なのではない可能性がある。わざわざ出番まで待ってみたいと思うようなファンがついているアーティストが視聴率を上げる鍵なのではないかと思った。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"## 引用\n\n紅白ヒストリー\nhttps://www.nhk.or.jp/kouhaku/history/index.html\n特別企画等は除く\n\n視聴率\nhttp://www1.plala.or.jp/nakaatsu/sityouritu.htm\n\n## 参考\nhttps://news.yahoo.co.jp/expert/articles/df4798e2ace19d45320c4df08e15a68b133154fc\n\nhttps://kerseemusic.com/archives/8085\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":349,"value":"## データ処理","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3641,"value":"untitled = await FileAttachment(\"紅白 - 年表.tsv\").tsv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"untitled","database":"$undefined"},{"id":3643,"value":"untitled1 = await FileAttachment(\"紅白 - 歌.tsv\").tsv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"untitled1","database":"$undefined"},{"id":2392,"value":"### 視聴率","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1012,"value":"wincolor = d3\n .scaleOrdinal()\n .domain([\"red\", \"white\"])\n .range([\"#ff5668\", \"#EDF2F6\"])\n .unknown(\"green\") // 未知の値に対するデフォルトの色","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2205,"value":"### 出演者","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2779,"value":"swatches([GenreColor])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"GenreColor = d3\n .scaleOrdinal()\n .domain([\n \"日本歌手\",\n \"韓国系\",\n \"韓国アイドル\",\n \"演歌歌手\",\n \"アイドル\",\n \"バンド\",\n \"顔隠し系\",\n \"ジャニーズ\",\n \"元ジャニーズ\",\n \"LDH\",\n \"48系\",\n \"AKB系\",\n \"坂道\",\n \"ハロプロ\",\n \"香港\",\n \"モンゴル\",\n \"アメリカ\",\n \"ブラジル\",\n \"フィリピン\",\n \"ソ連\",\n \"ラトビア\",\n \"イギリス\",\n \"海外\"\n ])\n .range([\n \"#e28082\", //日本\n \"#a174a1\", //韓国\n \"#d3a3d2\", //韓国アイドル\n \"#6ba3d1\", //演歌歌手\n \"#eea052\", //アイドル\n \"#ffb1b1\", //バンド\n \"#9a5332\", //顔隠し\n \"#5f84b2\", //ジャニーズ\n \"#7476ad\", //元ジャニーズ\n \"#7fc1e1\", //LDH\n \"#b7ce6a\", //48\n \"#b7ce6a\", //48\n \"#74b781\", //坂道\n \"#4fa498\", //ハロプロ\n \"#be808c\", //外国\n \"#be808c\", //モンゴル\n \"#be808c\", //外国\n \"#be808c\", //フィリピン\n \"#be808c\", //外国\n \"#be808c\", //ソ連\n \"#be808c\", //外国\n \"#be808c\", //イギリス\n \"#be808c\"\n ])\n .unknown(\"#pink\") // 未知の値に対するデフォルトの色","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1042,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1369,"value":"kosuu1 = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1271,"value":"SortYearFilter = d3.sort(dataset_yearFilter3, (a, b) => b.kaisuu - a.kaisuu)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1307,"value":"dataset_year = dataset_yearFilter3.sort((a, b) => {\n // 先にnumberで比較\n if (b.number - a.number !== 0) {\n return b.number - a.number;\n }\n\n // numberが同じ場合はkaisuuで比較\n return b.kaisuu - a.kaisuu;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1058,"value":"[...d3.group(dataset_yearFilter3, (d) => d.name).keys()]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1147,"value":"a = [...d3.filter(dataset, (d) => d.kaisuu > 5)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1157,"value":"[...d3.group(a, (d) => d.name).keys()]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1475,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"dataset_yomi1 = await d3.tsv(uri_all, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1354,"value":"dataset = d3.sort(dataset_yomi1, (a, b) => b.seiribangou - a.seiribangou)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1052,"value":"dataset_yearFilter3 = dataset.filter(\n (d) => Year - kosuu <= d.number && d.number < Year + 1\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1653,"value":"detasetFilter4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1656,"value":"dataset5 = detasetFilter4.flat()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"DataSort6 = new Map([\n [\n \"大会が新しい中順かつ出演回数が多い順\",\n [...dataset5].sort((a, b) => {\n // 先にnumberで比較\n if (b.number - a.number !== 0) {\n return b.number - a.number;\n }\n\n // numberが同じ場合はkaisuuで比較\n return b.kaisuu - a.kaisuu;\n })\n ],\n [\"大会が古い順\", [...dataset5].sort((a, b) => a.number - b.number)],\n [\"大会が新しい順\", [...dataset5].sort((a, b) => b.number - a.number)],\n [\"出演回数が多い順\", [...dataset5].sort((a, b) => b.kaisuu - a.kaisuu)]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1764,"value":"detaset7 = GETdataset_year.flat()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1402,"value":"GETdataset_year2 = (data) =>\n dataset5.sort((a, b) => {\n // 先にnumberで比較\n if (b.number - a.number !== 0) {\n return b.number - a.number;\n }\n\n // numberが同じ場合はkaisuuで比較\n return b.kaisuu - a.kaisuu;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2368,"value":"### アイドルデータ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1857,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3499,"value":"積み上げ棒グラフ関数","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2096,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2198,"value":"dataset_idol = dataset.filter(\n (d) =>\n d.Genre === \"ジャニーズ\" ||\n d.Genre === \"元ジャニーズ\" ||\n d.Genre === \"アイドル\" ||\n d.Genre === \"坂道\" ||\n d.Genre === \"韓国アイドル\" ||\n d.Genre === \"LDH\" ||\n d.Genre === \"48系\" ||\n d.Genre === \"ハロプロ\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3254,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3257,"value":"data_idol = Object.assign(_data_idol, { columns: _.keys(_data_idol[0]) })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3263,"value":"series_idol = d3.stack().keys(data_idol.columns.slice(1))(data_idol) // TODO: annotate what is actually happening here","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3260,"value":"function legend_idol(div) {\n const elements = div\n .selectAll(\"div.element\")\n .data(series_idol)\n .join(\"div.element\")\n .style(\"float\", \"left\")\n .style(\"position\", \"relative\")\n .style(\"font-family\", \"sans-serif\")\n .style(\"margin-right\", \"20px\");\n\n elements\n .append(\"span.color\")\n .style(\"position\", \"absolute\")\n .style(\"left\", 0)\n .style(\"top\", 0)\n .style(\"background\", (d) => GenreColor(d.key))\n .style(\"width\", \"10px\")\n .style(\"height\", \"80%\");\n\n elements\n .append(\"span.legend-key\")\n .style(\"margin-left\", \"12px\")\n .text((d) => d.key);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2378,"value":"### 年代別","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3227,"value":"dataset23_84 = dataset.filter(\n (d) =>\n d.number === 74 || d.number === 64 || d.number === 49 || d.number === 35\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3230,"value":"_data = (() => {\n const columns = [\n \"year\",\n \"25歳未満\",\n \"25歳以上40歳未満\",\n \"40歳以上60歳未満\",\n \"60歳以上\"\n ];\n\n return Array.from(\n d3.group(dataset23_84, (d) => d.year),\n ([year, data]) => ({\n year,\n ...(() => {\n const ageGroups = {\n \"25歳未満\": 0,\n \"25歳以上40歳未満\": 0,\n \"40歳以上60歳未満\": 0,\n \"60歳以上\": 0\n };\n data.forEach((person) => {\n const age = person.year - person.birth;\n if (age < 25) ageGroups[\"25歳未満\"]++;\n else if (age < 40) ageGroups[\"25歳以上40歳未満\"]++;\n else if (age < 60) ageGroups[\"40歳以上60歳未満\"]++;\n else ageGroups[\"60歳以上\"]++;\n });\n return ageGroups;\n })()\n })\n );\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3235,"value":"data = Object.assign(_data, { columns: _.keys(_data[0]) })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2075,"value":"series = d3.stack().keys(data.columns.slice(1))(data) // 注釈づけ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2059,"value":"function legend(div) {\n const elements = div\n .selectAll(\"div.element\")\n .data(series)\n .join(\"div.element\")\n .style(\"float\", \"left\")\n .style(\"position\", \"relative\")\n .style(\"font-family\", \"sans-serif\")\n .style(\"margin-right\", \"20px\");\n\n elements\n .append(\"span.color\")\n .style(\"position\", \"absolute\")\n .style(\"left\", 0)\n .style(\"top\", 0)\n .style(\"background\", (d) => color(d.key))\n .style(\"width\", \"10px\")\n .style(\"height\", \"80%\");\n\n elements\n .append(\"span.legend-key\")\n .style(\"margin-left\", \"12px\")\n .text((d) => d.key);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2069,"value":"color = d3\n .scaleOrdinal()\n .domain(series.map((d) => d.key))\n .range(customColors_age)\n .unknown(\"#ccc\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3583,"value":"ColorMono = [\"#7fc1e1\", \"#b2f4ff\", \"#ca8182\", \"#ffb1b1\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3587,"value":"swatches(ColorMono)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3243,"value":"customColors_age = [\n \"#ffb1b1\",\n \"#7fc1e1\",\n \"#74b781\",\n \"#eea052\",\n \"#d88161\",\n \"#be808c\",\n \"#b7ce6a\",\n \"#a174a1\",\n \"#a9a2aa\",\n \"#e3c95a\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2782,"value":"swatches(customColors_age)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":878,"value":".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2421,"value":"### スタイル","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1710,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3165,"value":"### その他","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2775,"value":"import { swatches } from \"@d3/working-with-color\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":899,"value":"tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .style(\"position\", \"absolute\")\n .style(\"z-index\", \"10\")\n .style(\"visibility\", \"hidden\")\n .style(\"padding\", \"10px\")\n .style(\"background\", \"rgba(0,0,0,0.6)\")\n .style(\"border-radius\", \"4px\")\n .style(\"color\", \"#fff\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"uri_sityouritu = `https://docs.google.com/spreadsheets/d/e/2PACX-1vQlqSCOgPFBw4JfjuiPuViyzJw6qkE-V_IS3R51uBuRbWQ8goLu2-1waKMM-BhpZn0JYTYRyXiCiGyQ/pub?gid=0&single=true&output=tsv`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"yeardata = await d3.tsv(uri_sityouritu, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1586,"value":"GETyeardata = await d3.tsv(uri_sityouritu, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"uri_all = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQlqSCOgPFBw4JfjuiPuViyzJw6qkE-V_IS3R51uBuRbWQ8goLu2-1waKMM-BhpZn0JYTYRyXiCiGyQ/pub?gid=1106359211&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"dataset_JandK = dataset.filter(\n (d) => d.Genre === \"ジャニーズ\" || d.Genre === \"k-pop\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1"}} 31:"$30:body"