YouTubeにおけるYOASOBI「アイドル」関連動画の視聴回数

25:["$","title",null,{"children":"YOASOBI Idol on YouTube | tsurezure lab. こちら徒然研究室（仮称） | Observable"}] 49:T8dc,// プロットを描画 Plot.plot({ // グラフ内側の余白を設定 inset: 20, // グラフの幅を指定 width: 1200, // グラフの高さを指定 height: 675, marginBottom: 45, r: { range: [0, 29.5] }, style: { background: "rgb(250, 245, 240)", fontSize: "17px", color: "deepgray" }, x: { // tickFormat: d3.timeFormat("%-y/%-m/%-d"), // この行を追加 label: "投稿日" }, // title: "YouTubeにおけるYOASOBI「アイドル」関連動画の視聴回数", // グラフタイトルを指定 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([`YouTubeにおける\nYOASOBI「アイドル」\n関連動画投稿数の推移`], { frameAnchor: "top-right", fontSize: 50, fontFamily: "Noto Sans JP, sans-serif", // Noto Sans JP Bold を指定 fontWeight: "700", fill: "deeppink", dy: 30, lineHeight: 1.1 }), Plot.frame({ anchor: "bottom" }), Plot.image( presidents, Plot.dodgeY({ anchor: "bottom", x: "release_date", r: (datum) => Math.sqrt(datum.views) * 2, // viewsの平方根に比例してrを大きくする preserveAspectRatio: "xMidYMin slice", // try not to clip heads src: "thumbnail", // title: "title", 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}`; } }) ) ] })4a:T718,// データを定義 chart = { var data = presidents; // SVG要素の幅と高さを定義 var width = 1200; var height = 600; // SVG要素を作成 var svg = d3 .select(DOM.svg(width, height)) .style("background", "rgb(250, 245, 240)"); // グラフタイトルを追加 svg .append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .text("YouTubeにおけるYOASOBI「アイドル」関連動画の視聴回数"); // データをバインドして画像要素を作成 var images = svg .selectAll("image") .data(data) .enter() .append("image") .attr("xlink:href", function (d) { return d.thumbnail; }) .attr("width", function (d) { return Math.sqrt(d.views) * 2; }) .attr("height", function (d) { return Math.sqrt(d.views) * 2; }) .attr("preserveAspectRatio", "xMidYMin slice") .attr("x", function (d) { return d.release_date; }) .attr("y", height - 30); // ツールチップを追加 images .on("mouseover", function (event, d) { d3.select(this).style("cursor", "pointer"); var tooltip = d3 .select(svg.node().parentNode) .append("div") .style("position", "absolute") .style("z-index", "10") .style("background-color", "white") .style("border", "solid") .style("border-width", "1px") .style("border-radius", "5px") .style("padding", "5px") .text(d.title); tooltip .style("left", event.pageX + 10 + "px") .style("top", event.pageY - 28 + "px"); }) .on("mouseout", function () { d3.select(this).style("cursor", "default"); d3.select(svg.node().parentNode).select("div").remove(); }); return svg.node(); }4b:[{"id":"d597d8e54c6a023a7147dd4d322a0f099a2df70ab6ba1e003ede62982f82cf55def18780da934c23d3f7591e05222467a602fdc478fdfad602fe33a29e5d6595","href":"https://static.observableusercontent.com/files/d597d8e54c6a023a7147dd4d322a0f099a2df70ab6ba1e003ede62982f82cf55def18780da934c23d3f7591e05222467a602fdc478fdfad602fe33a29e5d6595","name":"231027_youtube_YOASOBIアイドルidol_2023-04-12T01:00:11-07:00_to_2023-10-26T20:21:00-07:00.csv","type":"text/csv","lastModified":1698425750160.289,"size":1006709},{"id":"2bd889842d7e91452e4b924fca74481f442c028781c25adab9b41abffc1202afa6a65f12d9140698b7f5e9ad2ccf945f034cf65d27b38d530b800b02ca00ab08","href":"https://static.observableusercontent.com/files/2bd889842d7e91452e4b924fca74481f442c028781c25adab9b41abffc1202afa6a65f12d9140698b7f5e9ad2ccf945f034cf65d27b38d530b800b02ca00ab08","name":"230821_youtube_yoasobiidol_2023-04-12_to_2023-08-20.csv","type":"text/csv","lastModified":1692577519692.792,"size":1131121},{"id":"015cb7342397f818997575b5b6db92c49f72ccb0f9722267af284acf59352b3fa5b972e961dc88aa2f797a0fa6e458695c3c98f34e2748882be0799140bb4bdc","href":"https://static.observableusercontent.com/files/015cb7342397f818997575b5b6db92c49f72ccb0f9722267af284acf59352b3fa5b972e961dc88aa2f797a0fa6e458695c3c98f34e2748882be0799140bb4bdc","name":"230826_youtube_yoasobiidol_2023-04-12_to_2023-08-25.csv","type":"text/csv","lastModified":1693007227348.8,"size":1104331},{"id":"5674265b93f15b276f55d9f0cb6daca9d3726113acdc9ae2cf293e47188f5a570d91278bab0d47cde6abf038a88875590cfc1586e8dd546e29b1c3c1729ca58b","href":"https://static.observableusercontent.com/files/5674265b93f15b276f55d9f0cb6daca9d3726113acdc9ae2cf293e47188f5a570d91278bab0d47cde6abf038a88875590cfc1586e8dd546e29b1c3c1729ca58b","name":"230908_youtube_yoasobiidol_2023-04-14_to_2023-09-07.csv","type":"text/csv","lastModified":1694156878075.216,"size":1269886},{"id":"7c46f5d5bfd8ee25f86e8a9cb8c55196b8d35f01dcddafdc46f8a498f6732b330fad934a7979f4125c3ead1bcce19827828050fefefe730ad2120af15c7cc91e","href":"https://static.observableusercontent.com/files/7c46f5d5bfd8ee25f86e8a9cb8c55196b8d35f01dcddafdc46f8a498f6732b330fad934a7979f4125c3ead1bcce19827828050fefefe730ad2120af15c7cc91e","name":"230908_youtube_yoasobiidol_2023-04-12_to_2023-09-07.csv","type":"text/csv","lastModified":1694162215490.232,"size":1324408}] 29:{"id":"4f5e3852865b1379","slug":null,"title":"YOASOBI Idol on YouTube","thumbnail":"78da59c6384f56b6ee6405c74e86bf4661bbb7389f0e62d2c78172fce51d528b","access_level":"public","create_time":"$D2023-08-05T18:59:55.107Z","update_time":"$D2023-12-08T18:01:07.551Z","view_time":null,"first_public_time":"$D2023-08-25T23:47:03.167Z","has_unpublished_edits":null,"fork":false,"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":221,"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"},{"type":"team","id":"59dc038720f2d6ef","login":"tsurezure-lab-ws","name":"tsurezure lab. こちら徒然研究室（仮称）","avatar_url":"https://avatars-next.observableusercontent.com/acea9591cc9d41429f95084ddae72aba731500f6a2cc2ef2c90104e712930467","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"YOASOBI Idol on YouTube","cells":[{"id":0,"value":"# YOASOBI Idol on YouTube","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"_youtube_search_results_yoasobiIdol = await FileAttachment(\"231027_youtube_YOASOBIアイドルidol_2023-04-12T01:00:11-07:00_to_2023-10-26T20:21:00-07:00.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":98,"value":"## YouTubeにおけるYOASOBI「アイドル」\n## 関連動画の視聴回数と投稿日","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":105,"value":"\n\n\n YouTubeにおけるYOASOBI「アイドル」関連動画の視聴回数\n\n\n \n

\n YouTubeにおけるYOASOBI「アイドル」関連動画の視聴回数\n

\n \n\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"// プロットを描画\nPlot.plot({\n // グラフ内側の余白を設定\n inset: 20,\n // グラフの幅を指定\n width: 1200,\n // グラフの高さを指定\n height: 675,\n r: { range: [0, 30] },\n style: `background:rgb(250, 245, 240)`,\n marks: [\n Plot.frame({ anchor: \"bottom\" }),\n Plot.image(\n presidents,\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 tip: true,\n title: (d) => {\n const date = new Date(d.release_date);\n const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1)\n .toString()\n .padStart(2, \"0\")}-${date.getDate().toString().padStart(2, \"0\")}`;\n return `${\n d.title\n }\\n視聴回数: ${d.views.toLocaleString()}\\nリリース: ${formattedDate}`;\n }\n })\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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 presidents,\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 presidents,\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});\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"presidents = _youtube_search_results_yoasobiIdol","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null