4d:I[132969,["$2"],"IconMark"] 25:["$","title",null,{"children":"Fujii Kaze on YouTube | tsurezure lab. こちら徒然研究室（仮称） | Observable"}] 49:T552,

YoutTubeにおける'藤井風' 'Fujii Kaze'関連の動画投稿数の推移

4a:T852,// プロットを描画 Plot.plot({ // グラフ内側の余白を設定 inset: 20, // グラフの幅を指定 width: 1200, // グラフの高さを指定 height: 675, // marginTop: 0, marginBottom: 45, // marginLeft: 110, // marginRight: 70, r: { range: [0, 36] }, style: { background: "rgb(250, 245, 240)", fontSize: "17px", color: "deepgray" }, x: { // tickFormat: d3.timeFormat("%-y/%-m/%-d"), // この行を追加 label: "投稿日" }, marks: [ // Plot.frame(), Plot.text( // グラフ内の任意の位置にテキストをプロットするコード [ `YouTubeデータより徒然研究室（仮称）作成。データ取得日は2023年8月21日。マーカーの大きさはデータ取得時の視聴回数に対応している。` ], { frameAnchor: "top-right", fontSize: 10, fontFamily: "Noto Sans JP, sans-serif", // Noto Sans JP Bold を指定 fontWeight: "300", fill: "gray", dy: 5 } ), Plot.text( [`YoutTubeにおける\n'藤井風''Fujii Kaze'関連\n動画投稿数の推移`], { frameAnchor: "top-right", fontSize: 50, fontFamily: "Noto Sans JP, sans-serif", // Noto Sans JP Bold を指定 fontWeight: "700", fill: "#2192FF", dy: 30, lineHeight: 1.1 } ), Plot.frame({ anchor: "bottom" }), Plot.image( idol_data, Plot.dodgeY({ anchor: "bottom", x: "release_date", r: (datum) => Math.sqrt(datum.views) * 2, preserveAspectRatio: "xMidYMin slice", src: "thumbnail", tip: true, title: (d) => { const date = new Date(d.release_date); const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1) .toString() .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`; return `タイトル: ${ d.title }\n視聴回数: ${d.views.toLocaleString()}\nリリース日: ${formattedDate}`; } }) ) ] })4b:Td05,// プロットを描画 Plot.plot({ // グラフ内側の余白を設定 inset: 20, // グラフの幅を指定 width: 1200, // グラフの高さを指定 height: 675, // marginTop: 0, marginBottom: 45, // marginLeft: 110, // marginRight: 70, r: { range: [0, 25] }, style: { background: "rgb(250, 245, 240)", fontSize: "17px", color: "deepgray" }, x: { // tickFormat: d3.timeFormat("%-y/%-m/%-d"), // この行を追加 label: "投稿日" }, marks: [ Plot.frame({ anchor: "bottom" }), Plot.image( idol_data, Plot.dodgeY({ anchor: "bottom", x: "release_date", r: (datum) => Math.sqrt(datum.views) * 2, preserveAspectRatio: "xMidYMin slice", src: "thumbnail", // tip: true, // title: (d) => { // const date = new Date(d.release_date); // const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1) // .toString() // .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`; // const videoId = d.link.split("v=")[1].split("&")[0]; // return `タイトル: ${ // d.title // }\n視聴回数: ${d.views.toLocaleString()}\nリリース日: ${formattedDate}\nLink: ${videoId} // )}`; // }, onMouseover: (d) => { const popup = document.getElementById("popup"); const overlay = document.getElementById("overlay"); const videoId = d.link.split("v=")[1].split("&")[0]; // const videoId = extractVideoId(d.link); const date = new Date(d.release_date); // こちらが追加された部分 // ツールチップの内容を更新 const tooltip = d3.select("#tooltip"); const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1) .toString() .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`; tooltip.select("#title").text(d.title); tooltip.select("#views").text(d.views.toLocaleString()); tooltip.select("#release_date").text(formattedDate); tooltip.select("#thumbnail").attr("src", d.thumbnail).html(`

`); // ツールチップの位置を更新 tooltip.style( "transform", `translate( calc(-50% + ${d.x}px), calc( -100% + ${d.y}px))` ); tooltip.style("opacity", 1); popup.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`; // 自動再生 popup.style.display = "block"; overlay.style.display = "block"; }, onMouseout: () => { const popup = document.getElementById("popup"); const overlay = document.getElementById("overlay"); const tooltip = d3.select("#tooltip"); popup.src = ""; // 動画の読み込みを止める popup.style.display = "none"; overlay.style.display = "none"; tooltip.style("opacity", 0); } }) ) ] })4c:[{"id":"913bc8d3d1c80bcdbca8013d61559edbfac4f8240b09f7817de914cf837798e9279fd400e4d74611bc589cd0fae9e4753e52d4066aa63fc043603fb4f942b95d","href":"https://static.observableusercontent.com/files/913bc8d3d1c80bcdbca8013d61559edbfac4f8240b09f7817de914cf837798e9279fd400e4d74611bc589cd0fae9e4753e52d4066aa63fc043603fb4f942b95d","name":"230822_youtube_fujiikaze_2023-06-01_2023-08-21.csv","type":"text/csv","lastModified":1692681849145.384,"size":455656}] 29:{"id":"28de25e0ce61747b","slug":null,"title":"Fujii Kaze on YouTube","thumbnail":"49ea1652ad312f946993272602b094f21e912ba9f14efb2efc77b371c47a5cf5","access_level":"public","create_time":"$D2023-08-22T05:21:47.834Z","update_time":"$D2023-09-08T07:11:28.767Z","view_time":null,"first_public_time":"$D2023-08-25T01:44:57.993Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"59dc038720f2d6ef","login":"tsurezure-lab-ws","name":"tsurezure lab. こちら徒然研究室（仮称）","avatar_url":"https://avatars-next.observableusercontent.com/acea9591cc9d41429f95084ddae72aba731500f6a2cc2ef2c90104e712930467","tier":"starter_2024","bio":"Data x Ethnography x Visualization / Python\nデータとプログラミングと可視化で文化・社会・人間の不思議を研究しています。","followed_by_you":false,"follows_you":false},"version":446,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5dc444280c822d70","login":"tsurezure-lab","name":"tsurezure lab. ","avatar_url":"https://avatars-next.observableusercontent.com/acea9591cc9d41429f95084ddae72aba731500f6a2cc2ef2c90104e712930467","tier":null,"bio":"Data x Ethnography x Visualization / Python\nデータとプログラミングと可視化で文化・社会・人間の不思議を研究しています。","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"5dc444280c822d70","login":"tsurezure-lab","name":"tsurezure lab. ","avatar_url":"https://avatars-next.observableusercontent.com/acea9591cc9d41429f95084ddae72aba731500f6a2cc2ef2c90104e712930467","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Fujii Kaze on YouTube","cells":[{"id":0,"value":"# Fujii Kaze on YouTube","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":105,"value":"$49","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"　　YouTubeデータより徒然研究室（仮称）作成。「マツケンサンバ」検索でヒットした動画が対象。マーカーの大きさはデータ取得時の視聴回数に対応している（複数回に分けて取得）。","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"_youtube_search_results_yoasobiIdol = await FileAttachment(\"230822_youtube_fujiikaze_2023-06-01_2023-08-21.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"_youtube_search_results_yoasobiIdol","database":"$undefined"},{"id":85,"value":"// プロットを描画\nPlot.plot({\n // グラフ内側の余白を設定\n inset: 20,\n // グラフの幅を指定\n width: 1200,\n // グラフの高さを指定\n height: 675,\n r: { range: [0, 40] },\n style: `background:rgb(250, 245, 240)`,\n marks: [\n Plot.frame({ anchor: \"bottom\" }),\n Plot.image(\n idol_data,\n Plot.dodgeY({\n anchor: \"bottom\",\n x: \"release_date\",\n r: (datum) => Math.sqrt(datum.views) * 2, // viewsの平方根に比例してrを大きくする\n preserveAspectRatio: \"xMidYMin slice\", // try not to clip heads\n src: \"thumbnail\",\n title: \"title\",\n tip: true,\n // 透明度を指定（0から1の値、0が完全に透明、1が不透明）\n opacity: 0.7\n })\n ),\n // \"views\"を表示するためのPlot.textを追加\n Plot.text(\n idol_data,\n Plot.dodgeY({\n anchor: \"bottom\",\n x: \"release_date\",\n r: (datum) => Math.sqrt(datum.views) * 2 + 4, // マーカーのサイズに応じて適切なオフセットを調整,\n text: \"views\"\n }),\n { field: \"views\", baseline: \"top\", dy: -10 } // \"views\"のテキストを表示する位置を調整\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"idol_data = _youtube_search_results_yoasobiIdol","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":303,"value":"viewof popup = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"// customTooltip = document.querySelector(\"#custom-tooltip\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null 3f:[["$","title","0",{"children":"Fujii Kaze on YouTube | tsurezure lab. こちら徒然研究室（仮称） | Observable"}],["$","meta","1",{"property":"og:title","content":"Fujii Kaze on YouTube"}],["$","meta","2",{"property":"og:description","content":"An Observable notebook by tsurezure lab. こちら徒然研究室（仮称）"}],["$","meta","3",{"property":"og:url","content":"https://observablehq.com/d/28de25e0ce61747b"}],["$","meta","4",{"property":"og:site_name","content":"Observable"}],["$","meta","5",{"property":"og:image","content":"https://images.observableusercontent.com/thumbnail/49ea1652ad312f946993272602b094f21e912ba9f14efb2efc77b371c47a5cf5.jpg"}],["$","meta","6",{"property":"og:image:width","content":"640"}],["$","meta","7",{"property":"og:image:height","content":"400"}],["$","meta","8",{"property":"og:type","content":"article"}],["$","meta","9",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","10",{"name":"twitter:title","content":"Fujii Kaze on YouTube"}],["$","meta","11",{"name":"twitter:description","content":"An Observable notebook by tsurezure lab. こちら徒然研究室（仮称）"}],["$","meta","12",{"name":"twitter:image","content":"https://images.observableusercontent.com/thumbnail/49ea1652ad312f946993272602b094f21e912ba9f14efb2efc77b371c47a5cf5.jpg"}],["$","meta","13",{"name":"twitter:image:width","content":"640"}],["$","meta","14",{"name":"twitter:image:height","content":"400"}],["$","link","15",{"rel":"icon","href":"/favicon.ico?favicon.2hqc0rwsy9zm6.ico","sizes":"96x96","type":"image/x-icon"}],["$","link","16",{"rel":"icon","href":"/icon.png?icon.1mhghqfpotdlb.png","sizes":"512x512","type":"image/png"}],["$","$L4d","17",{}]] 48:null