2b:null 2c:["$","title",null,{"children":"Untitled | ｷﾞｮｴｰｰｰｰｰｰｰｯ's Workspace | Observable"}] 31:Tb25,{ { // SVGのサイズ設定 const width = 900; const height = 300; const margin = { top: 20, right: 30, bottom: 40, left: 90 }; // スケールの設定 const x = d3 .scaleTime() .domain(d3.extent(dataset_k_s, (d) => d.date)) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain([0, d3.max(dataset_k_s, (d) => d.search_count)]) .nice() .range([height - margin.bottom, margin.top]); // 軸の設定 const xAxis = (g) => g.attr("transform", `translate(0,${height - margin.bottom})`).call( d3 .axisBottom(x) .ticks(width / 80) .tickSizeOuter(0) ); const yAxis = (g) => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call((g) => g.select(".domain").remove()); // SVGの作成 const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // ラインジェネレータの設定 const line = d3 .line() .defined((d) => !isNaN(d.search_count)) .x((d) => x(d.date)) .y((d) => y(d.search_count)); // 軸の描画 svg.append("g").call(xAxis); svg.append("g").call(yAxis); // データラインの描画 svg .append("path") .datum(dataset_k_s) .attr("fill", "none") .attr("stroke", "pink") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line(dataset_k_s)); // ツールチップ要素の追加 const tooltip = d3 .select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0); // マウスオーバーイベントのためのオーバーレイ // マウスオーバーイベントのためのオーバーレイを修正 svg .append("rect") .attr("class", "overlay") .attr("width", width) .attr("height", height) .style("fill", "none") // ここを追加 .style("pointer-events", "all") // ここを追加 .on("mouseover", function () { tooltip.style("display", "block"); }) .on("mouseout", function () { tooltip.style("display", "none"); }) .on("mousemove", mousemove); function mousemove(event) { const mouse = d3.pointer(event); const x0 = x.invert(mouse[0]); const i = d3.bisectLeft( dataset_k_s.map((d) => d.date), x0, 1 ); const d0 = dataset_k_s[i - 1]; const d1 = dataset_k_s[i]; const d = x0 - d0.date > d1.date - x0 ? d1 : d0; tooltip .html(`日付: ${d.date}
検索数: ${d.search_count}`) .style("left", event.pageX + 10 + "px") .style("top", event.pageY - 28 + "px"); } return svg.node(); } }32:Tb92,{ // SVGのサイズ設定 const width = 1200; const height = 600; const margin = { top: 20, right: 30, bottom: 40, left: 70 }; // 折れ線グラフと棒グラフのスケール設定（変更なし）... // 折れ線グラフのスケール設定 const xLine = d3 .scaleTime() .domain(d3.extent(dataset_s, (d) => d.date)) .range([margin.left, width - margin.right]); const yLine = d3 .scaleLinear() .domain([0, d3.max(dataset_s, (d) => d.play_count)]) .nice() .range([height - margin.bottom, margin.top]); // 棒グラフのスケール設定 const xBar = d3 .scaleBand() .domain(dataset_s_kensuu.map((d) => d.date)) .range([margin.left, width - margin.right]) .padding(0.1); const yBar = d3 .scaleLinear() .domain([0, d3.max(dataset_s_kensuu, (d) => d.movie)]) .nice() .range([height - margin.bottom, margin.top]); // SVGの作成 const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // 棒グラフの軸（左側のY軸）とグリッドライン const yAxisBar = svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yBar).tickSize(-width + margin.left + margin.right)) .call((g) => g .selectAll(".tick:not(:first-of-type) line") .attr("stroke-dasharray", "2,2") .attr("stroke-opacity", 0.1) ) .call((g) => g.select(".domain").remove()); // 折れ線グラフの軸（右側のY軸）とグリッドライン const yAxisLine = svg .append("g") .attr("transform", `translate(${width - margin.right},0)`) .call(d3.axisRight(yLine).tickSize(-width + margin.left + margin.right)) .call((g) => g .selectAll(".tick:not(:first-of-type) line") .attr("stroke-dasharray", "2,2") .attr("stroke-opacity", 0.2) ) .call((g) => g.select(".domain").remove()); // 棒グラフの棒 svg .selectAll(".bar") .data(dataset_s_kensuu) .enter() .append("rect") .attr("class", "bar") .attr("x", (d) => xBar(d.date)) .attr("y", (d) => yBar(d.movie)) .attr("width", xBar.bandwidth()) .attr("height", (d) => height - margin.bottom - yBar(d.movie)) .attr("fill", "#E6EB94") // 棒グラフの色を変更 .attr("fill-opacity", 0.6); // 塗りつぶしの透明度を50%に設定 // 折れ線グラフのライン const line = d3 .line() .defined((d) => !isNaN(d.play_count)) .x((d) => xLine(d.date)) .y((d) => yLine(d.play_count)); svg .append("path") .datum(dataset_s) .attr("fill", "none") .attr("stroke", "pink") // 折れ線グラフの色を変更 .attr("stroke-width", 2) .attr("d", line); // X軸（共通） const xAxis = svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xLine)); // xLine または xBar を使用 // SVGを返す return svg.node(); }33:T16a3,{ // SVGのサイズ設定 const width = 800; const height = 300; const margin = { top: 20, right: 70, bottom: 40, left: 50 }; // スケールの設定 const x = d3 .scaleTime() .domain(d3.extent(dataset_s_t, (d) => d.date)) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain([0, d3.max(dataset_s_t, (d) => d.channel)]) .nice() .range([height - margin.bottom, margin.top]); // 軸の設定 const xAxis = (g) => g.attr("transform", `translate(0,${height - margin.bottom})`).call( d3 .axisBottom(x) .ticks(width / 80) .tickSizeOuter(0) ); // 軸の設定 const yAxis = (g) => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(11)) // 12個の目盛りを指定（0を含むため） .call((g) => g.select(".domain").remove()) .call( (g) => g .selectAll(".tick line") .clone() // 目盛り線を複製してグリッドラインとして使用 .attr("stroke-opacity", 0.1) // グリッドラインの透明度 .attr("x2", width - margin.right - margin.left) // グリッドラインの幅 .style("stroke-dasharray", "3,3") // 破線のスタイル ); // SVGの作成 const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // ラインジェネレータの設定 const line = d3 .line() .defined((d) => !isNaN(d.channel)) .x((d) => x(d.date)) .y((d) => y(d.channel)); // 軸の描画とスタイルの設定 svg.append("g").call(xAxis).selectAll("path").style("stroke", "grey"); svg.append("g").call(yAxis).selectAll("path").style("stroke", "grey"); // 新しいY軸のスケール設定 const yViewer = d3 .scaleLinear() .domain([0, d3.max(dataset_s_t, (d) => d.Viewer)]) .nice() .range([height - margin.bottom, margin.top]); // 新しいY軸の設定（右側に配置） const yAxisViewer = (g) => g .attr("transform", `translate(${width - margin.right},0)`) .call(d3.axisRight(yViewer)) .call((g) => g.select(".domain").remove()); // 新しいY軸の描画 svg.append("g").call(yAxisViewer).selectAll("path").style("stroke", "grey"); // Viewerに基づくラインジェネレータの設定 const viewerLine = d3 .line() .defined((d) => !isNaN(d.Viewer)) .x((d) => x(d.date)) .y((d) => yViewer(d.Viewer)); // Viewerに基づくエリアジェネレータの設定 const viewerArea = d3 .area() .defined((d) => !isNaN(d.Viewer)) .x((d) => x(d.date)) .y0(yViewer(0)) // エリアの下側（Y軸の最小値に相当） .y1((d) => yViewer(d.Viewer)); // エリアの上側（ラインに相当） // Viewerのエリアの描画 svg .append("path") .datum(dataset_s_t) .attr("fill", "green") // 塗りつぶしの色 .attr("fill-opacity", 0.2) // 塗りつぶしの透明度を50%に設定 .attr("d", viewerArea); // Viewerのデータラインの描画 svg .append("path") .datum(dataset_s_t) .attr("class", "viewer-line") // クラスを追加 .attr("fill", "none") .attr("stroke", "green") .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", viewerLine); // Channelのデータラインの描画 svg .append("path") .datum(dataset_s_t) .attr("class", "channel-line") // クラスを追加 .attr("fill", "none") .attr("stroke", "#ed4f00") .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); // selectedMetricに基づいて透明度を設定する関数 function setLineOpacity(metric) { const channelOpacity = metric === "Channel" ? 1 : 0.2; const viewerOpacity = metric === "Viewer" ? 1 : 0.2; svg.selectAll(".channel-line").attr("stroke-opacity", channelOpacity); svg.selectAll(".viewer-line").attr("stroke-opacity", viewerOpacity); } // 初期状態の透明度を設定 setLineOpacity(selectedMetric); // selectedMetricの初期値でグラフを更新 updateGraph(selectedMetric); // ツールチップの設定 const tooltip = d3.select("body").append("div").attr("class", "mytooltip"); // データポイントの描画 const dataPoints = svg .selectAll(".data-point") .data(dataset_s_t) .enter() .append("circle") .attr("class", "data-point") .attr("cx", (d) => x(d.date)) .attr("cy", (d) => y(d.channel)) .attr("r", 2) // 通常時の半径 .attr("fill-opacity", "0.2") .attr("fill", "#ed4f00"); /// 日付のフォーマットを設定 const formatDate = d3.timeFormat("%Y年%m月%d日"); // ツールチップの表示関数 const showMyTooltip = (event, d) => { // 日付のフォーマット const formattedDate = formatDate(d.date); // ツールチップの内容を更新 tooltip .style("left", `${event.pageX}px`) .style("top", `${event.pageY - 28}px`) .style("visibility", "visible") .html( `${formattedDate}
チャンネル: ${d.channel}
同時接続数: ${d.Viewer}` ); // 関連するデータポイントの強調表示 d3.select(event.target).attr("r", 6); // ホバー時の半径 }; const hideMyTooltip = (event) => { tooltip.style("visibility", "hidden"); d3.select(event.target).attr("r", 2); // 通常時の半径に戻す }; // データポイントにイベントハンドラを設定 dataPoints .on("pointerenter", showMyTooltip) .on("pointermove", showMyTooltip) .on("pointerleave", hideMyTooltip); return svg.node(); }34:Tf5e,function updateGraph(selectedMetric, dataset_s_t) { if (!dataset_s_t) { console.error("dataset_s_t is undefined."); return; } // SVGのサイズ設定 const width = 800; const height = 300; const margin = { top: 20, right: 70, bottom: 40, left: 50 }; // ここでdataset_s_tを定義するか、または外部から渡されることを想定します // const dataset_s_t = [{ date: new Date(), channel: 10, Viewer: 20 }, ...]; // スケールの設定 const x = d3 .scaleTime() .domain(d3.extent(dataset_s_t, (d) => d.date)) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain([0, d3.max(dataset_s_t, (d) => d.channel)]) .nice() .range([height - margin.bottom, margin.top]); const yViewer = d3 .scaleLinear() .domain([0, d3.max(dataset_s_t, (d) => d.Viewer)]) .nice() .range([height - margin.bottom, margin.top]); // グリッドラインの表示設定 const yAxisGridDisplay = selectedMetric === "Channel" ? "block" : "none"; const yAxisViewerGridDisplay = selectedMetric === "Viewer" ? "block" : "none"; // 折れ線グラフの透明度設定 const lineOpacity = selectedMetric === "Channel" ? 1 : 0.2; const viewerLineOpacity = selectedMetric === "Viewer" ? 1 : 0.2; // SVGコンテナを選択、または新しく作成 const svg = d3.select("#graph").selectAll("svg").data([null]); const svgEnter = svg .enter() .append("svg") .attr("viewBox", [0, 0, width, height]); svgEnter.merge(svg); // X軸の描画 const xAxisG = svgEnter .append("g") .attr("transform", `translate(0,${height - margin.bottom})`); xAxisG.merge(svg.select("g.x-axis")).call( d3 .axisBottom(x) .ticks(width / 80) .tickSizeOuter(0) ); // Channel Y軸の描画 const yAxisG = svgEnter .append("g") .attr("transform", `translate(${margin.left},0)`); yAxisG .merge(svg.select("g.y-axis")) .call(d3.axisLeft(y).ticks(11)) .call((g) => g.select(".domain").remove()); // Channel Y軸のグリッドライン描画 yAxisG .selectAll(".tick line") .data([null]) .enter() .append("line") .attr("stroke-opacity", 0.1) .attr("x2", width - margin.right - margin.left) .style("stroke-dasharray", "3,3") .attr("display", yAxisGridDisplay); // Viewer Y軸の描画 const yViewerAxisG = svgEnter .append("g") .attr("transform", `translate(${width - margin.right},0)`); yViewerAxisG .merge(svg.select("g.y-viewer-axis")) .call(d3.axisRight(yViewer)) .call((g) => g.select(".domain").remove()); // Viewer Y軸のグリッドライン描画 yViewerAxisG .selectAll(".tick line") .data([null]) .enter() .append("line") .attr("stroke-opacity", 0.1) .attr("x2", -width + margin.right + margin.left) .style("stroke-dasharray", "3,3") .attr("display", yAxisViewerGridDisplay); // Channelの折れ線グラフの描画 const channelLine = d3 .line() .defined((d) => !isNaN(d.channel)) .x((d) => x(d.date)) .y((d) => y(d.channel)); svgEnter .append("path") .merge(svg.select(".channel-line")) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-opacity", lineOpacity) .attr("d", channelLine(dataset_s_t)); // Viewerの折れ線グラフの描画 const viewerLine = d3 .line() .defined((d) => !isNaN(d.Viewer)) .x((d) => x(d.date)) .y((d) => yViewer(d.Viewer)); svgEnter .append("path") .merge(svg.select(".viewer-line")) .attr("fill", "none") .attr("stroke", "green") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-opacity", viewerLineOpacity) .attr("d", viewerLine(dataset_s_t)); }35:T585,{ // SVGのサイズ設定 const width = 800; const height = 400; const margin = { top: 20, right: 30, bottom: 40, left: 70 }; // スケールの設定 const x = d3 .scaleBand() .domain(dataset_niconico.map((d) => d.year)) .range([margin.left, width - margin.right]) .padding(0.1); const y = d3 .scaleLinear() .domain([0, d3.max(dataset_niconico, (d) => d.movie)]) .nice() .range([height - margin.bottom, margin.top]); // 軸の設定 const xAxis = (g) => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)); const yAxis = (g) => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call((g) => g.select(".domain").remove()); // SVGの作成 const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // 軸の描画とスタイルの設定 svg.append("g").call(xAxis).selectAll("path").style("stroke", "grey"); svg.append("g").call(yAxis).selectAll("path").style("stroke", "grey"); // データの棒の描画 svg .selectAll("rect") .data(dataset_niconico) .enter() .append("rect") .attr("x", (d) => x(d.year)) .attr("y", (d) => y(d.movie)) .attr("height", (d) => height - margin.bottom - y(d.movie)) .attr("width", x.bandwidth()) .attr("fill", "#E6EB94"); // SVGを返す return svg.node(); }36:T9ff,37:T5d3,{ // SVGのサイズ設定 const width = 1200; const height = 600; const margin = { top: 20, right: 30, bottom: 40, left: 70 }; // スケールの設定 const x = d3 .scaleBand() .domain(dataset_s_kensuu.map((d) => d.date)) .range([margin.left, width - margin.right]) .padding(0.1); const y = d3 .scaleLinear() .domain([0, d3.max(dataset_s_kensuu, (d) => d.movie)]) .nice() .range([height - margin.bottom, margin.top]); // 軸の設定 const xAxis = (g) => g.attr("transform", `translate(0,${height - margin.bottom})`).call( d3 .axisBottom(x) .tickFormat(d3.timeFormat("%b %d")) .ticks(dataset_s_kensuu.length / 2) ); const yAxis = (g) => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call((g) => g.select(".domain").remove()); // SVGの作成 const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // 軸の描画とスタイルの設定 svg.append("g").call(xAxis).selectAll("path").style("stroke", "grey"); svg.append("g").call(yAxis).selectAll("path").style("stroke", "grey"); // データの棒の描画 svg .selectAll("rect") .data(dataset_s_kensuu) .enter() .append("rect") .attr("x", (d) => x(d.date)) .attr("y", (d) => y(d.movie)) .attr("height", (d) => y(0) - y(d.movie)) .attr("width", x.bandwidth()) .attr("fill", "#ed4f00"); // SVGを返す return svg.node(); }38:[] 2f:{"id":"59edbc1bfed47ece","slug":null,"title":"","thumbnail":"edb760dc2a1e796bd230726725ec1593804d1359ca2b0b5ee9d663f02fec79a8","access_level":"public","create_time":"$D2024-01-22T06:19:24.628Z","update_time":"$D2024-01-22T06:20:03.620Z","view_time":null,"first_public_time":"$D2024-01-22T06:19:24.628Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"8737d5b854cb0137","login":"ononarumi","name":"ｷﾞｮｴｰｰｰｰｰｰｰｯ's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/03fca6b8a4a6bc4d70c9457bcdb81fb28a164fd2f5687101e4982ba3572b3f5d","tier":"starter_2024"},"version":1073,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fb7ce0e93bdaf369","login":"ki-yoe-tu","name":"ｷﾞｮｴｰｰｰｰｰｰｰｯ","avatar_url":"https://avatars-next.observableusercontent.com/5d3d2a245db2b1e8d53c3f38c4e96bf743b61937d781a16d05e7d00947f43124","tier":null}],"members":[{"type":"individual","id":"fb7ce0e93bdaf369","login":"ki-yoe-tu","name":"ｷﾞｮｴｰｰｰｰｰｰｰｯ","avatar_url":"https://avatars-next.observableusercontent.com/5d3d2a245db2b1e8d53c3f38c4e96bf743b61937d781a16d05e7d00947f43124","tier":null,"role":"editor"},{"type":"team","id":"8737d5b854cb0137","login":"ononarumi","name":"ｷﾞｮｴｰｰｰｰｰｰｰｯ's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/03fca6b8a4a6bc4d70c9457bcdb81fb28a164fd2f5687101e4982ba3572b3f5d","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"","cells":[{"id":831,"value":"#データで見るゲーム文化と実況者の関係","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"#

データで見るゲーム文化と実況者の関係
(仮題)

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

・はじめに

・データの収集方法

・【実況者・配信者がゲームを盛り上げた例】スイカゲーム

・ゲーム実況者の歴史","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":842,"value":"

・【ゲームが実況者界隈を盛り上げた例】","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":505,"value":"

はじめに

ゲーム文化において配信者/実況者の存在は今や無視して語れない。\n
ゲームの流行に強く配信者が影響した最近の例で特に象徴的なのは、昨年2023年に爆発的な流行を起こした「スイカゲーム」だ。\n
2021年にリリースされ、2023年9月初頭までのDL数はわずか2300程度であったこのゲームが、
\n 配信者によって拡散され、わずか一ヶ月足らずで100万DLを達成し、2023年で最も「バズった」ゲームとなった。
\n ゲームと実況者文化の隆盛を　いくつかのゲームタイトルをピックアップし、データを用いて見ていきたい。

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

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

データの収集方法

この記事の中でのデータは以下の方法を用いて集計・取得している

YoutubeDataAPI

GoogleTrendsからcsv取得

ニコニコ動画の検索結果を手動で集計

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

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

1.実況者・配信者がゲームを盛り上げた例
スイカゲーム

\n はじめに、最も最近の例であり象徴的な例であるスイカゲームのデータを収集し、可視化した。\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":669,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":346,"value":"

スイカゲームの検索回数(最高検索回数を100とした相対値)

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":335,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"

これはGoogle検索でスイカゲームが検索された回数の推移のグラフである。googleの規約上詳しい回数は開示できなかったため、9月末の最多回数を100とした相対値での推移となるが、9月ごろを境に爆発的に増えていることがわかる。

9月ごろから急激な勢いで検索回数が増えているため、検索数が急増した9月から安定期に入ってきた11月までの動画本数の推移などを調べた。(下へ)

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":882,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":709,"value":"

9月から11月のYoutube平均再生回数の推移と
動画投稿本数

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":811,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":685,"value":"

⚠️下図の折れ線グラフはYoutubeDataAPIを利用し、#スイカゲームと付けられた動画の\n
投稿日別の平均再生回数の推移を表したグラフである。
\n投稿動画の日付を調べ、その再生回数の推移を2023年12月末時点で算出しているため、\nあくまでも現段階で再生数の多かった動画バズった動画はいつ投稿されたかという目安にしてもらいたい。\n
\nまた、棒グラフは＃スイカゲームと付けられた動画の1日あたりの投稿数を表したものである。

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":813,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":696,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"

※左の軸は動画の本数　右の軸は動画の再生回数

9月から11月のTwichでのスイカゲームを実況した
配信チャンネルの数と同時接続数（最大）

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":971,"value":"viewof selectedMetric = Inputs.select([\"Channel\", \"Viewer\"], {\n label: \"グラフを選択\",\n value: \"Channel\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1005,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1000,"value":"updateGraph(selectedMetric, dataset_s_t)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"

2023年9月初頭までは投稿数・平均再生回数ともに低く、世間の関心がないことがわかる。\nしかし9月6日にいきなり20万再生と話題になるような動画が投稿されたあたりから
\n平均再生数が5万回を超える(イエローの直線から上)日が増えていき、投稿動画も急激に増加している。
9月末から毎日の平均再生は低くても5万回を超えるようになった。\n

\nちなみに9月6日あたりに有名な配信者のスイカゲームの配信切り抜きが投稿され、誰が一番最初であるかは諸説あるが、この辺りの配信がスイカゲームの爆発的流行の元であると推測される

\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":761,"value":"

もっとも平均再生数の多かった9月27日は、当時スイカゲームでふたつスイカを作ること(これをダブルスイカと呼ぶ)が未達成の記録であったため、配信者は皆ダブルスイカを目指していた。9月27日付近に配信者で初めてダブルスイカを達成した人が現れ、その切り抜きが莫大な再生回数となっていたり、全体的に影響力のある配信者の切り抜きや配信アーカイブが上がっていたことが大きいと思われる。

9月は一気に投稿数が伸び、第一のブームがきている。その後11月から投稿数が増えたまま安定しているのが特徴的である
\n中身を見ると、九月の動画投稿数の多かった時は主に配信アーカイブがほとんどであり、11月からの投稿動画はショートや

スイカゲームのダウンロード数推移（概形）

詳しいダウンロード数の推移を取得するのは難しかったため、スイカゲームを制作したAladdin Xの発表からダウンロード数の推移を出した。

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

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

ゲーム実況動画本数の推移（ニコニコ動画）

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":627,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"

Data

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":975,"value":"import { select } from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"url = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vTJ8lS9e8-USl1IMc5UHCMpgJ_YP_TI1QguzgPM1lkk2yHKKzf9kIdd08kn0z8Px3hBCkSKqc_SfJWM/pub?output=csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"suika_keyword_trends = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vTJ8lS9e8-USl1IMc5UHCMpgJ_YP_TI1QguzgPM1lkk2yHKKzf9kIdd08kn0z8Px3hBCkSKqc_SfJWM/pub?gid=998994021&single=true&output=csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"SuikaGame_T = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vTJ8lS9e8-USl1IMc5UHCMpgJ_YP_TI1QguzgPM1lkk2yHKKzf9kIdd08kn0z8Px3hBCkSKqc_SfJWM/pub?gid=350882005&single=true&output=csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"SuikaGame_Y = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vTJ8lS9e8-USl1IMc5UHCMpgJ_YP_TI1QguzgPM1lkk2yHKKzf9kIdd08kn0z8Px3hBCkSKqc_SfJWM/pub?gid=389909167&single=true&output=csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"suika_kensuu = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vTJ8lS9e8-USl1IMc5UHCMpgJ_YP_TI1QguzgPM1lkk2yHKKzf9kIdd08kn0z8Px3hBCkSKqc_SfJWM/pub?gid=333921096&single=true&output=csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"niconico = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vTJ8lS9e8-USl1IMc5UHCMpgJ_YP_TI1QguzgPM1lkk2yHKKzf9kIdd08kn0z8Px3hBCkSKqc_SfJWM/pub?gid=725643241&single=true&output=csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"dataset_s_t = d3.csv(SuikaGame_T, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"dataset_s = d3.csv(SuikaGame_Y, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"dataset_k_s = d3.csv(suika_keyword_trends, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"dataset_niconico = d3.csv(niconico,d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"dataset_s_kensuu = d3.csv(suika_kensuu, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"$36","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":497,"value":"width = 1200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1071,"value":"グラフ日付綺麗に動画貼る　スイカゲームのみ　社会背景追加","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W38","stdlib":"1"}} 30:"$2f:body"

データで見るゲーム文化と実況者の関係(仮題)

目次