25:["$","title",null,{"children":"YouTube Shorts Daily Ranking | tsurezure lab. こちら徒然研究室（仮称） | Observable"}] 49:T1566,chart_original = { // X軸の目盛りラベルの表示形式をカスタマイズするための関数 function formatDateCustom(date) { const day = date.getDate(); const month = date.toLocaleString("default", { month: "short" }); // 日が1の場合に改行して月を表示 if (day === 1) { return `${day}\n${month}`; } else { return day.toString(); } } const colorMapping = customColors(); // 楽曲ごとに最新の日付を特定するためのマップを作成 const latestDateByTrack = new Map(); data.forEach((d) => { const trackName = d.Track_Name; const date = new Date(d.date); if ( !latestDateByTrack.has(trackName) || date > latestDateByTrack.get(trackName) ) { latestDateByTrack.set(trackName, date); } }); const plot = Plot.plot({ width: 1200, height: 675, marginLeft: 40, marginRight: 100, marginBottom: 40, style: { background: "rgb(250, 245, 240)", fontSize: "10px", fontFamily: "Noto Sans JP ExtraBold, sans-serif", // Noto Sans JP Bold を指定 fontWeight: "bold ", color: "deepgray" }, x: { label: null, tickSize: 0, tickFormat: (d) => formatDateCustom(new Date(d)), ticks: { values: "every 1 week" } // 目盛り日付の表示間隔を設定 }, y: { label: null, tickSize: 0, tickPadding: 0, ticks: false, // 目盛りを表示するためには `true` に設定 reverse: false // tickFormat: (d) => `${d}位` // 各目盛りの値に「位」を付加 }, font: { // family: "Noto Sans JP, sans-serif" family: "Noto Sans JP ExtraBold, sans-serif", // Noto Sans JP Bold を指定 fontWeight: "bold " }, marks: [ Plot.lineY(data, { x: "date", y: "New_Rank", z: "Track_Name", stroke: (d) => customColors()[data.indexOf(d)], // stroke: (d) => colorMapping[d.Track_Name], strokeWidth: 10, opacity: 0.7, // opacity: (d) => (checkboxes.includes(d.Track_Name) ? 0.6 : 0.05), curve: "bump-x", // title: (d) => `${d.Track_Name}: ${Number(d.Periods_on_Chart)}%`, // ツールチップに職業名と割合を表示 tip: true, title: (d) => `${d.Track_Name}\n${d.Artist_Names}\n順位: ${d.Rank}\n滞在日数: ${d.Periods_on_Chart}` }), Plot.cell(data, { x: "date", y: "New_Rank", fill: (d) => customColors()[data.indexOf(d)], // fill: (d) => colorMapping[d.Track_Name], // stroke: (d) => customColors()[data.indexOf(d)], opacity: 0.5, // opacity: (d) => (checkboxes.includes(d.Track_Name) ? 1.0 : 0.15), // stroke: "white", // strokeWidth: 1, rx: 2.5, // 角を丸くする ry: 2.5, // 角を丸くする title: (d) => `${d.Track_Name}|${d.Artist_Names} Periods on Chart ${Number( d.Periods_on_Chart )}` // ツールチップに職業名と割合を表示 }), Plot.text(data, { text: (d) => { const trackName = d.Track_Name; const artistNames = d.Artist_Names; const date = new Date(d.date); // 楽曲が最新の日付をもっている場合のみ表示 if (date.getTime() === latestDateByTrack.get(trackName).getTime()) { return `${trackName}\n${artistNames}`; } else { return ""; // 最新でない場合は空の文字列を返す } }, textAnchor: "center", // fontSize: (d) => (checkboxes.includes(d.Track_Name) ? 24 : 0), fontSize: (d) => (checkboxes.includes(d.Track_Name) ? 8 : 0), y: "New_Rank", x: "data", x: (d) => { const trackName = d.Track_Name; const date = new Date(d.date); // 楽曲が最新の日付をもっている場合のみ日付をセット if (date.getTime() === latestDateByTrack.get(trackName).getTime()) { return date; } else { return null; // 最新でない場合はnullを返す } }, // fill: "black", fill: (d) => customColors()[data.indexOf(d)], stroke: "white", // str: "0.5", // opacity: "0.6", opacity: (d) => (checkboxes.includes(d.Track_Name) ? 0.6 : 0.0), fontFamily: "Noto Sans JP ExtraBold, sans-serif", fontWeight: "bold" }), Plot.text([` YouTube Shorts\n Daily Rankingの推移`], { frameAnchor: "top-left", fontSize: 40, fontFamily: "Noto Sans JP, sans-serif", // Noto Sans JP Bold を指定 fontWeight: "700", fill: "black", stroke: "white", opacity: 0.6, dy: 15, lineHeight: 1.1 }), Plot.text( // グラフ内の任意の位置にテキストをプロットするコード [ `YouTubeデータより徒然研究室（仮称）作成。データ取得日は2023年12月13日。同順位の楽曲はチャート表示順で順位を再付番している。` ], { frameAnchor: "bottom-left", fontSize: 10, // fontFamily: "Noto Sans JP, sans-serif", fontWeight: "300", fill: "rgb(60, 60, 60)", // opacity: 0.8, dy: 5 } ) ] }); return plot; }4a:T19a2,chart_gradient = { // X軸の目盛りラベルの表示形式をカスタマイズするための関数 function formatDateCustom(date) { const day = date.getDate(); const month = date.toLocaleString("default", { month: "short" }); // 日が1の場合に改行して月を表示 if (day === 1) { return `${day}\n${month}`; } else { return day.toString(); } } // カラーグラデーションを補完する関数 function interpolateColor(color1, color2, t) { const hex1 = color1.replace("#", ""); const hex2 = color2.replace("#", ""); const r1 = parseInt(hex1.substring(0, 2), 16); const g1 = parseInt(hex1.substring(2, 4), 16); const b1 = parseInt(hex1.substring(4, 6), 16); const r2 = parseInt(hex2.substring(0, 2), 16); const g2 = parseInt(hex2.substring(2, 4), 16); const b2 = parseInt(hex2.substring(4, 6), 16); const r = Math.round(r1 + (r2 - r1) * t); const g = Math.round(g1 + (g2 - g1) * t); const b = Math.round(b1 + (b2 - b1) * t); return `rgb(${r}, ${g}, ${b})`; } const colorMapping = customColors(); // 楽曲ごとに最新の日付を特定するためのマップを作成 const latestDateByTrack = new Map(); data.forEach((d) => { const trackName = d.Track_Name; const date = new Date(d.date); if ( !latestDateByTrack.has(trackName) || date > latestDateByTrack.get(trackName) ) { latestDateByTrack.set(trackName, date); } }); const plot = Plot.plot({ width: 1200, height: 675, marginLeft: 40, marginRight: 100, marginBottom: 40, style: { background: "rgb(250, 245, 240)", fontSize: "10px", fontFamily: "Noto Sans JP ExtraBold, sans-serif", // Noto Sans JP Bold を指定 fontWeight: "bold ", color: "deepgray" }, x: { label: null, tickSize: 0, tickFormat: (d) => formatDateCustom(new Date(d)), ticks: { values: "every 1 week" } // 目盛り日付の表示間隔を設定 }, y: { label: null, tickSize: 0, tickPadding: 0, ticks: false, // 目盛りを表示するためには `true` に設定 reverse: false // tickFormat: (d) => `${d}位` // 各目盛りの値に「位」を付加 }, font: { // family: "Noto Sans JP, sans-serif" family: "Noto Sans JP ExtraBold, sans-serif", // Noto Sans JP Bold を指定 fontWeight: "bold " }, marks: [ Plot.lineY(data, { x: "date", y: "New_Rank", z: "Track_Name", curve: "bump-x", stroke: (d) => { // Release_Dateの最も古い日付と最も新しい日付を取得 const minReleaseDate = new Date( Math.min(...data.map((item) => new Date(item.Release_Date))) ); const maxReleaseDate = new Date( Math.max(...data.map((item) => new Date(item.Release_Date))) ); // Release_Dateを基準に色をグラデーションさせる const releaseDate = new Date(d.Release_Date); const gradient = (releaseDate - minReleaseDate) / (maxReleaseDate - minReleaseDate); // グラデーションの色を計算 const color = interpolateColor("#0ebeff", "#ff42b3", gradient); // 新しいほど#ff42b3に、古いほど#0ebeffに近づく return color; }, strokeWidth: 10, opacity: 0.6, tip: true, title: (d) => `${d.Track_Name}\n${d.Artist_Names}\n順位: ${d.Rank}\n滞在日数: ${d.Periods_on_Chart}` }), Plot.cell(data, { x: "date", y: "New_Rank", // fill: (d) => customColors()[data.indexOf(d)], // fill: (d) => colorMapping[d.Track_Name], fill: "#00000000", // stroke: (d) => customColors()[data.indexOf(d)], stroke: "white", opacity: 0.2, // opacity: (d) => (checkboxes.includes(d.Track_Name) ? 1.0 : 0.15), // stroke: "white", // strokeWidth: 1, rx: 2.5, // 角を丸くする ry: 2.5, // 角を丸くする title: (d) => `${d.Track_Name}|${d.Artist_Names} Periods on Chart ${Number( d.Periods_on_Chart )}` // ツールチップに職業名と割合を表示 }), Plot.text(data, { text: (d) => { const trackName = d.Track_Name; const artistNames = d.Artist_Names; const date = new Date(d.date); // 楽曲が最新の日付をもっている場合のみ表示 if (date.getTime() === latestDateByTrack.get(trackName).getTime()) { return `${trackName}\n${artistNames}`; } else { return ""; // 最新でない場合は空の文字列を返す } }, textAnchor: "center", fontSize: (d) => (checkboxes.includes(d.Track_Name) ? 24 : 0), y: "New_Rank", x: "data", x: (d) => { const trackName = d.Track_Name; const date = new Date(d.date); // 楽曲が最新の日付をもっている場合のみ日付をセット if (date.getTime() === latestDateByTrack.get(trackName).getTime()) { return date; } else { return null; // 最新でない場合はnullを返す } }, fill: "black", stroke: "white", opacity: "0.9", // opacity: (d) => (checkboxes.includes(d.Track_Name) ? 1.0 : 0.0), fontFamily: "Noto Sans JP ExtraBold, sans-serif", fontWeight: "bold" }), Plot.text([` YouTube Shorts\n Daily Rankingの推移`], { frameAnchor: "top-left", fontSize: 40, fontFamily: "Noto Sans JP, sans-serif", // Noto Sans JP Bold を指定 fontWeight: "700", fill: "black", stroke: "white", opacity: 0.6, dy: 15, lineHeight: 1.1 }), Plot.text( // グラフ内の任意の位置にテキストをプロットするコード [ `YouTubeデータより徒然研究室（仮称）作成。データ取得日は2023年12月13日。同順位の楽曲はチャート表示順で順位を再付番している。` ], { frameAnchor: "bottom-left", fontSize: 10, fontFamily: "Noto Sans JP, sans-serif", // Noto Sans JP Bold を指定 fontWeight: "300", fill: "deepgray", dy: 5 } ) ] }); return plot; }4b:T5bc,// function customColors() { // const colors = [ // "#616161", // "#4285f4", // "#db4437", // "#f4b400", // "#0f9d58", // "#ab47bc", // "#00acc1", // "#ff7043", // "#9e9d24", // "#5c6bc0", // "#f06292", // "#00796b", // "#c2185b", // "#7e57c2", // "#03a9f4", // "#8bc34a", // "#fdd835", // "#fb8c00", // "#8d6e63", // "#9e9e9e", // "#607d8b" // ]; // const categories = [ // "ChatGPT(生成系AI)", // "QRコード決済", // "パリ五輪", // "国内旅行", // "無人レジ", // "新しいNISA", // "夏祭り/盆踊り/花火大会", // "日傘", // "省エネ家電", // "海外旅行", // "概念推し活/概念グッズ", // "紙ストロー/木製スプーン", // "ひとり○○/ソロ○○", // "電動キックボード", // "メンズ美容", // "ハンディファン", // "大阪･関西万博", // "オンライン診療", // "インバウンド需要の復活", // "空調服", // "EV", // "eスポーツ", // "パーソナル診断サービス", // "睡眠の質を高める商品", // "ディズニーシー・ファンタジースプリングス" // ]; // const Track_NameColors = {}; // categories.forEach((Track_Name, index) => { // Track_NameColors[Track_Name] = colors[index % colors.length]; // }); // return Track_NameColors; // }4c:[{"id":"4fd3692ca730bc1e6e2d3e88ce338b7336aa52db8e8de6fb5cfb419eb5292c86ec3fc52e5edfc89162dd5059859134036f465a749faeb91da762e661b160920f","href":"https://static.observableusercontent.com/files/4fd3692ca730bc1e6e2d3e88ce338b7336aa52db8e8de6fb5cfb419eb5292c86ec3fc52e5edfc89162dd5059859134036f465a749faeb91da762e661b160920f","name":"topshortssongs_jp_daily_231106_to_231211_merged@7.csv","type":"text/csv","lastModified":1702435231203.765,"size":328331}] 29:{"id":"8384504f8025c800","slug":null,"title":"YouTube Shorts Daily Ranking","thumbnail":"ec7925f9ecb2cda19ef77a7167466f5b1da8fb0ab87a90db49bbb3bea5119a2a","access_level":"public","create_time":"$D2023-12-13T00:09:54.737Z","update_time":"$D2024-01-31T18:40:44.023Z","view_time":null,"first_public_time":"$D2023-12-13T00:09:54.737Z","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":1447,"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":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"YouTube Shorts Daily Ranking","cells":[{"id":0,"value":"# YouTube Shorts Daily Ranking\n##","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1056,"value":"// Array.from(new Set(data.map((d) => d.Track_Name)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"\n\n\n \n\n\n\n \n

\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":1293,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1298,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1288,"value":"// viewof checkboxes = Inputs.checkbox(\n// Array.from(new Set(data.map((d) => d.Track_Name))),\n// { label: \"Select Categories\" }\n// )\n\n// デフォルトで全てにチェックが入っているようにする\nviewof checkboxes = Inputs.checkbox(\n Array.from(new Set(data.map((d) => d.Track_Name))),\n {\n label: \"Select Categories\",\n value: Array.from(new Set(data.map((d) => d.Track_Name))) // 初期値としてすべてのカテゴリを設定\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"　　ソニー生命調べ「中高生が思い描く将来についての意識調査」データより徒然研究室（仮称）作成。調査は隔年。同率同位が生じている場合は元データの表示順に順位付けを行った。","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":537,"value":"data = await FileAttachment(\"topshortssongs_jp_daily_231106_to_231211_merged@7.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"data","database":"$undefined"},{"id":542,"value":"_naritai_job_17_23_mid_ml = await FileAttachment(\"230813_naritai_job_17_23_mid_ml@3.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"_naritai_job_17_23_mid_ml","database":"$undefined"},{"id":544,"value":"_naritai_job_17_23_fm = await FileAttachment(\"230813_naritai_job_17_23_fm@3.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"_naritai_job_17_23_fm","database":"$undefined"},{"id":546,"value":"_naritai_job_17_23_mid_fm = await FileAttachment(\"230813_naritai_job_17_23_mid_fm@3.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"_naritai_job_17_23_mid_fm","database":"$undefined"},{"id":141,"value":"function customColors() {\n const uniqueCategories = Array.from(new Set(data.map((d) => d.Track_Name)));\n const colorMapping = {};\n\n // 指定された色の配列\n const distinctColors = [\n \"#616161\",\n \"#4285f4\",\n \"#db4437\",\n \"#f4b400\",\n \"#0f9d58\",\n \"#ab47bc\",\n \"#00acc1\",\n \"#ff7043\",\n \"#9e9d24\",\n \"#5c6bc0\",\n \"#f06292\",\n \"#00796b\",\n \"#c2185b\",\n \"#7e57c2\",\n \"#03a9f4\",\n \"#8bc34a\",\n \"#fdd835\",\n \"#fb8c00\",\n \"#8d6e63\",\n \"#9e9e9e\",\n \"#607d8b\"\n ];\n\n uniqueCategories.forEach((Track_Name, index) => {\n colorMapping[Track_Name] = distinctColors[index % distinctColors.length];\n });\n\n return data.map((d) => colorMapping[d.Track_Name]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":941,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"// Noto Sans JP Blackフォントをロードする関数\nasync function loadFont() {\n return new Promise((resolve) => {\n const font = new FontFace('Noto Sans JP Black', 'url(https://cdn.plot.ly/plotly-texture/fonts/v1.3/noto-sans-jp-v13-latin-700.woff)');\n font.load().then(() => {\n document.fonts.add(font);\n resolve();\n });\n });\n}","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