2b:null 2c:["$","title",null,{"children":"データで見るゲーム文化と実況者の関係 | ｷﾞｮｴｰｰｰｰｰｰｰｯ'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:T19c2,{ // SVGのサイズ設定 const width = 800; const height = 300; const margin = { top: 20, right: 70, bottom: 40, left: 50 }; // 折れ線グラフのスケール設定 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) ) .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.9) // 塗りつぶしの透明度を50%に設定 .on("mouseover", function (event, d) { tooltip .html(`日付: ${d.date}
映画数: ${d.movie}`) .style("visibility", "visible"); guideLine .attr("x1", xBar(d.date) + xBar.bandwidth() / 2) .attr("x2", xBar(d.date) + xBar.bandwidth() / 2) .attr("y1", margin.top) .attr("y2", height - margin.bottom) .style("opacity", 1); }) .on("mousemove", function (event) { tooltip .style("top", event.pageY - 10 + "px") .style("left", event.pageX + 10 + "px"); }) .on("mouseout", function () { tooltip.style("visibility", "hidden"); guideLine.style("opacity", 0); }); // 折れ線グラフのライン const line = d3 .line() .defined((d) => !isNaN(d.play_count)) .x((d) => xLine(d.date)) .y((d) => yLine(d.play_count)); // ツールチップの設定 const tooltip = d3 .select("body") .append("div") .attr("class", "mytooltip") .style("position", "absolute") .style("visibility", "hidden") .style("padding", "10px") .style("background", "rgba(255, 255, 255, 0.8)") .style("border-radius", "5px") .style("pointer-events", "none"); // ガイドラインの設定 const guideLine = svg .append("line") .style("stroke", "#aaa") .style("stroke-dasharray", "3,3") .style("opacity", 0); // 日付のフォーマット設定 const formatDate = d3.timeFormat("%m月%d日"); // SVGにマウスムーブイベントリスナーを追加 svg .on("mousemove", function (event) { const [mouseX] = d3.pointer(event, this); const xDate = xLine.invert(mouseX); // マウスX座標から日付を逆算 // 最も近い日付のデータポイントをdataset_sから特定 const playCountIndex = d3 .bisector((d) => d.date) .left(dataset_s, xDate, 1); const playCountData = dataset_s[playCountIndex - 1]; // 最も近い日付のデータポイントをdataset_s_kensuuから特定 const movieCountIndex = d3 .bisector((d) => d.date) .left(dataset_s_kensuu, xDate, 1); const movieCountData = dataset_s_kensuu[movieCountIndex - 1]; if ( playCountData && movieCountData && +playCountData.date === +movieCountData.date ) { // ツールチップの位置と内容を更新 tooltip .html( `日付: ${formatDate(playCountData.date)}
` + `動画数: ${movieCountData.movie}
` + `平均再生数: ${playCountData.play_count}` ) .style("top", event.pageY - 10 + "px") .style("left", event.pageX + 10 + "px") .style("visibility", "visible"); // ガイドラインの位置を更新 guideLine .attr("x1", xLine(playCountData.date)) .attr("x2", xLine(playCountData.date)) .attr("y1", margin.top) .attr("y2", height - margin.bottom) .style("opacity", 1); } else { // データが一致しない場合はツールチップとガイドラインを非表示に tooltip.style("visibility", "hidden"); guideLine.style("opacity", 0); } }) .on("mouseout", function () { // マウスがSVG要素から外れたときにツールチップとガイドラインを非表示に tooltip.style("visibility", "hidden"); guideLine.style("opacity", 0); }); svg .append("path") .datum(dataset_s) .attr("fill", "none") .attr("stroke", "pink") // 折れ線グラフの色を変更 .attr("stroke-width", 4) .attr("d", line); // 日付フォーマット関数を定義（例: "9月10日"） const formatDateAxis = d3.timeFormat("%m月%d日"); // X軸の設定を変更してカスタムのフォーマット関数を使用 const xAxis = d3.axisBottom(xLine).tickFormat(formatDateAxis); // 日付のフォーマット関数を設定 // X軸をSVGに追加 svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-35)"); // SVGを返す return svg.node(); }33:T1e2b,{ // SVGのサイズ設定 const width = 800; const height = 300; const margin = { top: 20, right: 70, bottom: 40, left: 50 }; const DateAdjust = d3.timeFormat("%m月%d日"); // スケールの設定 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) .tickFormat(DateAdjust) // 日付のフォーマット関数を設定 .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); // ガイドラインの追加 const guideLine = svg .append("line") .attr("stroke", "grey") // ガイドラインの色 .attr("stroke-width", 1) // ガイドラインの太さ .attr("stroke-dasharray", "3,3") // 破線スタイル .style("opacity", 0); // 初期状態では非表示 // SVGにマウスムーブイベントをバインド svg.on("mousemove", (event) => { const mouseX = d3.pointer(event, this)[0]; // マウスのX座標を取得 const date = x.invert(mouseX); // X座標から日付を逆算 // 最も近いデータポイントを見つけるための関数 const bisectDate = d3.bisector((d) => d.date).left; const index = bisectDate(dataset_s_t, date, 1); const a = dataset_s_t[index - 1]; const b = dataset_s_t[index]; const d = b && date - a.date > b.date - date ? b : a; if (d) { // ツールチップの内容を更新 tooltip .style("left", `${event.pageX + 10}px`) // ツールチップをマウスの右側に表示 .style("top", `${event.pageY - 28}px`) .style("visibility", "visible") .html( `${formatDate(d.date)}
チャンネル: ${ d.channel }
同時接続数: ${d.Viewer}` ); // ガイドラインの位置を更新 guideLine .attr("x1", x(d.date)) .attr("x2", x(d.date)) .attr("y1", margin.top) .attr("y2", height - margin.bottom) .style("opacity", 1); // ガイドラインを表示 } }); // SVGからマウスが離れたときにツールチップとガイドラインを非表示にする svg.on("mouseleave", () => { tooltip.style("visibility", "hidden"); guideLine.style("opacity", 0); // ガイドラインを非表示 }); return svg.node(); }34:T534,{ // SVG要素の幅と高さを設定 const width = 500 + 150; // 全体の幅に30ピクセルを追加 const height = dataset_s_dl.length * 30; // SVG要素を作成 const svg = d3.create("svg").attr("width", width).attr("height", height); // 全ての要素を含むためのグループを追加し、30ピクセル右に移動 const g = svg.append("g").attr("transform", "translate(150,0)"); // データの各行に対してグループ要素を作成（変更前のrowsの代わりにgを使用） const rows = g .selectAll("g") .data(dataset_s_dl) .enter() .append("g") .attr("transform", (d, i) => `translate(0, ${i * 30})`); // 各行の背景色を設定 rows .append("rect") .attr("width", width - 30) // 全体の幅から30ピクセル引く .attr("height", 28) .attr("fill", (d, i) => (i % 2 === 0 ? "#e0ebaf" : "#dcdddd")); // 各行の日付データを表示 rows .append("text") .attr("x", 10) .attr("font-family", "Noto Sans JP, sans-serif") .attr("y", 20) .text((d) => d.date); // 各行のダウンロード数データを表示 rows .append("text") .attr("font-family", "Noto Sans JP, sans-serif") .attr("x", 150) .attr("y", 20) .text((d) => d.DL); // SVG要素を返す return svg.node(); }35:Tbd8,36: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)); }37:[] 2f:{"id":"81f3a23e4151c314","slug":null,"title":"データで見るゲーム文化と実況者の関係","thumbnail":"fc1458555fb8861e545acd0dfedfd1c40e030be5afcaaaa68b952739efb51a05","access_level":"public","create_time":"$D2024-01-28T08:57:49.574Z","update_time":"$D2024-01-28T08:58:22.168Z","view_time":null,"first_public_time":"$D2024-01-28T08:57:49.574Z","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":1228,"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":"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":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":"

スイカゲームで見る配信者の影響力

\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":1187,"value":"viewof selectMetric = Inputs.select([\"平均再生数\", \"動画数\"], {\n label: \"グラフを選択\",\n value: \"平均再生数\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":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月からの投稿動画はショートや

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

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

詳しいダウンロード数の推移を取得するのは難しかったため、スイカゲームを制作した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":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":false,"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":1111,"value":"suika_DLdata = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vTJ8lS9e8-USl1IMc5UHCMpgJ_YP_TI1QguzgPM1lkk2yHKKzf9kIdd08kn0z8Px3hBCkSKqc_SfJWM/pub?gid=2073170684&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":1114,"value":"

Dataset

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":1118,"value":"dataset_s_dl = d3.csv(suika_DLdata, 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":"$35","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":1075,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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"}],"files":"$W37","stdlib":"1"}} 30:"$2f:body"

目次