2c:null 2d:["$","title",null,{"children":"スイカゲームで見る最近のゲーム消費に及ぼす実況者/配信者の影響 | TMU Dataviz Class | Observable"}] 32:Tb87,{ { // SVGのサイズ設定 const width = 600; const height = 200; const margin = { top: 20, right: 30, bottom: 40, left: 30 }; // スケールの設定 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) .tickFormat(d3.timeFormat("%Y年%m月")) // 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]); // ラインジェネレータの設定 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(); } }33:T50a,{ // SVG要素の幅と高さを設定 const width = 500 + 200; 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(200,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(); }34:T1d43,graph = { // 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", "#89c3eb") // 棒グラフの色を変更 .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)); svg .append("path") .datum(dataset_s) .attr("class", "line") // この行を追加して、パスに 'line' クラスを適用します .attr("fill", "none") .attr("stroke", "pink") .attr("stroke-width", 4) .attr("d", line); // ツールチップの設定 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}
` + `平均再生数: ${formatPlayCount(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("class", "line") // `.line` クラスを適用 .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)"); function drawGraph(svg, selectedMetric) { const barOpacity = selectedMetric === "動画数" ? 1 : 0.1; const lineOpacity = selectedMetric === "平均再生数" ? 1 : 0.1; // 棒グラフの透明度を更新 svg.selectAll(".bar").style("opacity", barOpacity); // 折れ線グラフの透明度を更新 svg.selectAll(".line").style("opacity", lineOpacity); // 左右のy軸の透明度を更新 yAxisBar.style("opacity", barOpacity); yAxisLine.style("opacity", lineOpacity); } // 'graph' セル内で 'drawGraph' 関数を呼び出す際に 'svg' を渡す drawGraph(svg, selectMetric); // SVGを返す return svg.node(); }35:T1fda,{ // 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("class", "y-axis") // クラスを追加 .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("class", "y-axis-viewer") // クラスを追加 .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", "#aacf53") // 塗りつぶしの色 .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", "#aacf53") .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", "#f08300") .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); // selectedMetricに基づいて透明度を設定する関数 function setLineOpacity(metric) { const channelOpacity = metric === "チャンネル数" ? 1 : 0.2; const viewerOpacity = metric === "同時接続数" ? 1 : 0.2; svg.selectAll(".channel-line").attr("stroke-opacity", channelOpacity); svg.selectAll(".viewer-line").attr("stroke-opacity", viewerOpacity); svg.selectAll(".y-axis").attr("stroke-opacity", channelOpacity); svg.selectAll(".y-axis-viewer").attr("stroke-opacity", viewerOpacity); svg.selectAll(".y-axis text").attr("fill-opacity", channelOpacity); svg.selectAll(".y-axis-viewer text").attr("fill-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(); }36: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(); }37:T1cc1,graph1 = { // 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", "#89c3eb") // 棒グラフの色を変更 .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)); svg .append("path") .datum(dataset_s) .attr("class", "line") // この行を追加して、パスに 'line' クラスを適用します .attr("fill", "none") .attr("stroke", "pink") .attr("stroke-width", 4) .attr("d", line); // ツールチップの設定 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}
` + `平均再生数: ${formatPlayCount(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("class", "line") // `.line` クラスを適用 .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)"); function drawGraph(svg, selectedMetric) { const barOpacity = selectedMetric === "動画数" ? 1 : 0.1; const lineOpacity = selectedMetric === "平均再生数" ? 1 : 0.1; // 棒グラフの透明度を更新 svg.selectAll(".bar").style("opacity", barOpacity); // 折れ線グラフの透明度を更新 svg.selectAll(".line").style("opacity", lineOpacity); } // 'graph' セル内で 'drawGraph' 関数を呼び出す際に 'svg' を渡す drawGraph(svg, selectMetric); // SVGを返す return svg.node(); }38:Tc4f,39:T4db,{ // データセット const data923 = [ { category: "Short", value: 49 }, { category: "Nomal", value: 15 }, { category: "Archive", value: 41 } ]; // SVGのサイズとマージンの設定 const width = 450; const height = 450; const margin = 40; // 円グラフの半径を計算 const radius = Math.min(width, height) / 2 - margin; // SVG要素を作成 const svg = d3 .select("#my_dataviz") .append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", `translate(${width / 2}, ${height / 2})`); // カラースケールの設定 const color = d3 .scaleOrdinal() .domain(data923.map((d) => d.category)) .range(d3.schemeCategory10); // データを円グラフの形に変換 const pie = d3.pie().value((d) => d.value); const data_ready = pie(data923); // アークジェネレータの設定 const arc = d3.arc().innerRadius(0).outerRadius(radius); svg .selectAll("slices") .data(data_ready) .enter() .append("path") .attr("d", arc) .attr("fill", (d) => color(d.data.category)) // ここを修正 .attr("stroke", "white") .style("stroke-width", "2px") .style("opacity", 0.7); }3a: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)); }3b:[{"id":"01bc1391ffc26481640b0fb07deea21d61e6c362671bc00e2fc240c18d8fbc9f8dba28280932da6306fd24d74394b5d0f6198f2415faeb2300282ef107fdd9b0","href":"https://static.observableusercontent.com/files/01bc1391ffc26481640b0fb07deea21d61e6c362671bc00e2fc240c18d8fbc9f8dba28280932da6306fd24d74394b5d0f6198f2415faeb2300282ef107fdd9b0","name":"suikathumb.png","type":"image/png","lastModified":1706971936801.924,"size":204283},{"id":"e535151bacfeefd26239b9253b99edb83026b74f6e3e7534df07fbb89798418c2d4145b5af531aa130b0db97817425535d73e5bd5b645814f3a11f8957f1e8d7","href":"https://static.observableusercontent.com/files/e535151bacfeefd26239b9253b99edb83026b74f6e3e7534df07fbb89798418c2d4145b5af531aa130b0db97817425535d73e5bd5b645814f3a11f8957f1e8d7","name":"d5f672aaf8d60243399b854ffcb11671121f560715505cec327509d6144958cc.png","type":"image/png","lastModified":1706498958870.081,"size":995873},{"id":"a1bace55d494d3eebeec1a2b18769e60917a8dbe4312c02dc36811f230584c1800db9a9f2ab706e9f30d0e59f4a8f8c70324528b807937c95480fb8438299e68","href":"https://static.observableusercontent.com/files/a1bace55d494d3eebeec1a2b18769e60917a8dbe4312c02dc36811f230584c1800db9a9f2ab706e9f30d0e59f4a8f8c70324528b807937c95480fb8438299e68","name":"スクリーンショット 2024-01-28 23.55.57.png","type":"image/png","lastModified":1706498958870.081,"size":292467},{"id":"562e36ce0af8f4ce9d13dbbbd360940226b714aa15e21412b7f540b52d14ea18aadb211c8200f95d820ec7e969e860c96a3ac1f9a71dddaf1d2e9ac204006c68","href":"https://static.observableusercontent.com/files/562e36ce0af8f4ce9d13dbbbd360940226b714aa15e21412b7f540b52d14ea18aadb211c8200f95d820ec7e969e860c96a3ac1f9a71dddaf1d2e9ac204006c68","name":"スクリーンショット 2024-01-28 23.56.35.png","type":"image/png","lastModified":1706498958870.081,"size":286592},{"id":"c73ea14c68f93cc298ce4258ec5f103a49803a8030b2c6fc79e56b5f7d4d1cb67e3c5ca07edcadd62169a724aab923df44f4be782f874bac5d7d8bccd0008966","href":"https://static.observableusercontent.com/files/c73ea14c68f93cc298ce4258ec5f103a49803a8030b2c6fc79e56b5f7d4d1cb67e3c5ca07edcadd62169a724aab923df44f4be782f874bac5d7d8bccd0008966","name":"youtube_videos_daily.json","type":"application/json","lastModified":1706498958870.081,"size":1091010}] 30:{"id":"0e3187596a548be3","slug":"suikagame","title":"スイカゲームで見る最近のゲーム消費に及ぼす実況者/配信者の影響","thumbnail":"7f6e43a93a9f32405bf4d0f44b2419b8c95ac24fce1cec2ff488649ef2cf623f","access_level":"public","create_time":"$D2024-01-29T03:29:18.870Z","update_time":"$D2024-02-09T14:23:36.278Z","view_time":null,"first_public_time":"$D2024-01-29T03:29:18.870Z","has_unpublished_edits":null,"fork":true,"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":1857,"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":"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":0,"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":"スイカゲームで見る最近のゲーム消費に及ぼす実況者/配信者の影響","cells":[{"id":831,"value":"# スイカゲームで見る最近の
ゲーム消費に及ぼす実況者/配信者の影響 ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1785,"value":"

written by gyoeee

","pinned":false,"hidden":false,"mode":"html","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":1462,"value":"html`

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

・はじめに

・データの収集方法

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

・考察:なぜここまで影響力が大きくなったのか？","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1376,"value":"

・まとめ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1703,"value":"

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

・参考文献など","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1373,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":505,"value":"

はじめに

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

ゲーム文化において配信者/実況者の存在は今や無視して語れない。\n
ゲームの流行に強く配信者が影響した最近の例で特に象徴的なのは、昨年2023年に爆発的な流行を起こした「スイカゲーム」だ。\n
2021年にリリースされ、2023年9月初頭までのDL数はわずか2300程度であったこのゲームが、\n 配信者によって拡散され、わずか一ヶ月足らずで100万DLを達成し、Youtube分析ツールを発行している株式会社エビリーが発表した「2023年Youtube流行語大賞」で大賞を取るなど、2023年で最も「バズった」ゲームとなった。
\n VTuberやストリーマーが盛り上がっている現在、ゲームの流行に対するこうした人々の影響はさらに高まっているように思う。
こうした体感は実際どうなのか、\nこの記事ではスイカゲームを例に見ながら、実況者/配信者の影響力とそれを後押しする社会背景について考察したい。
\n\nここでいう実況者/配信者は配信サービスを利用してゲームを実況する者という括りであるため、VTuberも含めている。

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1370,"value":"
","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":"

データの収集方法

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

Youtube Data API v3からスプレッドシートにデータを取得・記入

Google Trendsからcsv取得

TwichTrackerのデータをスプレッドシートに記入

ニコニコ動画から手動で検索・記入

\n","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":"

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

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

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

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1624,"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":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"

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

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

スイカゲームのダウンロード数

","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":818,"value":"

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

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

ブレイク直前の9月7日時点から１ヶ月で100万ダウンロードを達成、その後わずか13日で200万,その6日後に300百万を達成するなど、非常に早いスパンでダウンロードがされていることがわかる。

","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":"

⚠️下図の折れ線グラフはYoutube Data API v3 を利用し、#スイカゲームと付けられた動画の\n
投稿日別の平均再生回数の推移を表したグラフである。
\n投稿動画の日付を調べ、その再生回数の推移を2023年12月末時点で算出しているため、\nあくまでも現段階で再生数の多かった動画バズった動画はいつ投稿されたかという目安にしてもらいたい。\n
\nまた、棒グラフは＃スイカゲームと付けられた動画の1日あたりの投稿数を表したものである。
\nYoutube Data API v3から動画数を取得しており、ある程度手動でも件数を集計したので概ね正確なはずだが,11月後半はややデータが不安定であることは注意。

","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})\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":1781,"value":"html`

${selectMetric}

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

※左の軸は動画の本数　右の軸は動画の再生回数
\nホバーで詳細情報が見れます

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([\"チャンネル数\", \"同時接続数\"], {\n label: \"グラフを選択\",\n value: \"チャンネル数\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1777,"value":"html`

${selectedMetric}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1005,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1673,"value":"

ホバーすると詳細情報が見れます

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

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

\nちなみに9月6日~9月7日あたりに布団ちゃんという配信者のスイカゲームの配信切り抜きが投稿され、この辺りの配信がスイカゲームの爆発的流行の元であると推測される(ちなみに元はTwichの配信だが、9/7のこの配信はマイクラを主にやっていた配信でスイカゲームをメインにプレイするものではなかった)

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

\n \n

もっとも平均再生数の多かった9月27日は、スイカゲームのスコアが7557点を超えたという旨のものである。当時スイカゲームは3000点を超えると高得点という風潮であったため、いかにそこからスコアを伸ばすかに関心が注がれていため、この動画が伸びたのだと思われる。他にもこの日は全体的に影響力のある配信者の切り抜きや配信アーカイブが上がっていたことも要因として大きいと思われる。

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

Twichだと特に顕著だが、DL数の推移のスパンが一番短かった10月10日~10月末は配信チャンネル数も同時接続数も多いゾーンとなり一番盛り上がっている場所と言える。\n

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

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

9月20-30日と11月20-30日のサムネイル一覧

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1547,"value":"viewof currentDate = Inputs.radio(Object.keys(youtube_videos_daily), {\n label: \"日付を選択\",\n value: Object.keys(youtube_videos_daily)[0]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1549,"value":"md`

\n${youtube_videos_daily[currentDate]\n .map((d) => ({ id: d.id.videoId, url: d.snippet.thumbnails.default.url }))\n .map(\n ({ id, url }) =>\n `

`\n )\n .join(\"\\n\")}\n

一方でYoutubeは9月末に動画数の最盛期を迎え、再生回数は9月末~10月末が大きな山となっている。9月中~下旬に一気に投稿数が伸び、ブームがきていることが見てとれるが、その後は11月から投稿数が横ばいになっているのが特徴的だ。
\n中身を見ると、九月の動画投稿数の多かった時は主に配信アーカイブが多めで、特にYoutubeを中心に活動する大手事務所のVtuberなどがよく配信をしている。一方11月後半の投稿動画はショート動画が圧倒的に多かった。
\nこの動画の本数と性質の変化はVTuber界隈のゲーム流行のスパンが非常に短いのが原因の一つではないかと考えている。
\nVTuberのゲーム流行は1ヶ月~２ヶ月くらいで変わる体感があるので、Youtubeで配信をするVTuber層が抜け、流行の後追いをしている一般の人が気軽にアップできるショート動画を上げる結果このようなことになるのではないか。

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

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

なぜここまで影響が？

上の通り、スイカゲームのヒットには配信者の影響がかなり強かったことが見て取れる。
\nスイカゲームは特に元が有名なゲーム会社が出しているというわけでもなかったため、影響が顕著に出た例だが、大手でもその存在を無視できない。最近のゲームはリリースされるたびに配信ガイドラインが発表されたり、下のようにサービス開始時にVTuberなどに依頼をして認知に繋げるという手段は珍しくない。

ではなぜここまで影響が大きくなったのか？その背景を考察したい。

1.コロナ禍による影響

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

\n MCR/exより\n

まず考えられるのはコロナ禍によるオンラインプラットフォームでの動画視聴時間の増加だろう。
\n 約一万人を対象にしたビデオリサーチ[MCR/ex]によるとオンラインプラットフォームでの動画視聴がコロナ禍で明確に増えていることがわかる。\n Youtubeはもちろんニコニコ動画でもゲーム実況動画の投稿数の推移を見ていくと2020年以前までは減少傾向であったのに対し、2020年からまた増加している。

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1447,"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":1683,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":627,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1457,"value":"

またゲーム自体もコロナ禍の影響を受け元々成長はしていたもののコロナ禍の影響で成長率が大きくなっている。

\n \n

経済産業省より

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

2.若い世代の購買動機の変化

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

経産省の資料によると、

\n\"総務省の調査によると、Z世代の中心となる10代は、テレビの利用時間が減少傾向にある一方で、インターネットの利用時間は大きく増加しています。\nインターネット利用時間の内訳は、約35%が動画共有サービス、約28%がSNS、約15%がゲームです。また、特定のコンテンツを好むというよりも、インフルエンサーを中心にファンコミュニティを形成し、互いにコミュニケーションするという傾向が見られます。つまり、Z世代はテレビや新聞などの従来型メディアよりも、動画共有サービスやSNS等のソーシャルメディアの消費時間が多く、インフルエンサーを中心としたコミュニティを形成する傾向があるということです。\"

\n\n とある。\n 購買動機が変化し、所謂「推し」の使っているもの、していることを自分もやって見るという人が増えたのも、実況者/配信者の影響の大きさに繋がりそうだ。\n

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

まとめ

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

　世の中はコロナ禍からある程度落ち着きを取り戻しつつあるが、コロナ禍の影響で配信者や実況者を見るようになったりゲームに手をだしてみた人が少なくないことは確かだ。動画にもゲームにも慣れ親しんだ若い世代がこれから世の中に出ていくことを考えると、今後配信者や実況者による影響はこれからも大きくなっていくのではないだろうか。

\n　一方で、スイカゲームのように配信者によってバズるゲームもあれば配信者がいなくてもバズる小規模開発のゲームもある（UNDERTALEやOMORIなど）ので、その性質の違いなどを今度は考察してみたいとも思った。

\n データを自分で取って検証していくことで、流行の原点を知れたり、盛り上がり方が形としてわかるのがとても面白いので何かがバズるたびにこういうデータをとってみるのも面白いかも知れない。機会があったらやってみてください。\n

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

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

　補足 : <疑問> 平均再生回数と動画本数のグラフについて

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

9月23日から9月24日について変化が急激なのが不自然ではあるが、一応手動で検索・数えたところ数は概ね一致していた。
\n週末などが若干影響していたのかも知れないが、これというはっきりした原因は不明。ただし同じチャンネルからの投稿が多かったので、Vtuberが自分の動画の切り抜きを出したり、他の人が配信の切り抜きをその日にあげていたりということがあるのかも知れない
\nまた、11月の急激な上昇の理由も断定はできないが、22日あたりにスイカゲームの大会があったため、切り抜き動画が増えたなどの影響も考えられる。

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

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1400,"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":1573,"value":"youtube_videos_daily = FileAttachment(\"youtube_videos_daily.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"$38","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1288,"value":"function formatPlayCount(playCount) {\n if (playCount >= 10000) {\n // 10000以上の場合、「一万」の形式で表示\n const rounded = Math.round(playCount / 1000) * 1000; // 100の位で四捨五入\n return `${(rounded / 10000).toFixed(1)}万`; // 小数点第一位まで表示\n } else {\n // 10000未満の場合、小数点以下を切り捨て\n return Math.floor(playCount);\n }\n}","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":1335,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1075,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1"}} 31:"$30:body"

目次

・はじめに

・データの収集方法

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

・考察:なぜここまで影響力が大きくなったのか？","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1376,"value":"

・まとめ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1703,"value":"

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

はじめに

データの収集方法

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

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

スイカゲームのダウンロード数

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

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

9月20-30日と11月20-30日のサムネイル一覧

なぜここまで影響が？

1.コロナ禍による影響

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

2.若い世代の購買動機の変化

まとめ

補足 : <疑問> 平均再生回数と動画本数のグラフについて

参考文献/リンク

Data

Dataset

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

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

　補足 : <疑問> 平均再生回数と動画本数のグラフについて