25:["$","title",null,{"children":"Plot: The Wealth & Health of Nations | tsurezure lab. こちら徒然研究室（仮称） | Observable"}] 49:T25cc,chart = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, 1200, 675]) // .style("font", "8px sans-serif") .attr( "style", "max-width: 100%; height: 675; font: 10px 'Noto Sans JP', sans-serif; font-weight: bold;" ); // SVGのサイズ設定 const width = 1200; const height = 675; const margin = { top: 10, right: 60, bottom: 60, left: 100 }; // 半径を一括で設定 // const rSize = 0.1; const rSize = R_range; // フォントサイズを設定 // const fSize = 0.0001; const fSize = font_range; // 軌跡の幅を設定 // const sWidth = 0.14; const sWidth = width_range; // day2から最新のget_timeを取得 const latestDate = day2; // get_timeを "m/d" 形式にフォーマット const dateFormat = d3.timeFormat("%Y-%m-%d %H:%M"); // 時刻も含む形式に変更 // 最新のget_timeを表示するテキストを追加 svg .append("text") .attr("text-anchor", "start") .attr("x", margin.left + 10) // x座標を左マージンから10px右に設定 .attr("y", margin.top + 40) // y座標を上マージンから20px下に設定 .text(`${dateFormat(latestDate)}`) // get_timeをフォーマットしてテキストに設定 .attr("font-size", "70px") // フォントサイズを設定 .attr("opacity", 0.2) // フォントサイズを設定 .attr("fill", "black"); // フォントの色を設定 svg .append("text") .attr("text-anchor", "start") .attr("x", margin.left + 10) // x座標を左マージンから10px右に設定 .attr("y", margin.top + 80) // y座標を上マージンから20px下に設定 .text(`NHK紅白歌合戦2023 on 公式YouTube`) // get_timeをフォーマットしてテキストに設定 .attr("font-size", "30px") // フォントサイズを設定 .attr("opacity", 0.2) // フォントサイズを設定 .attr("fill", "black"); // フォントの色を設定 // 軸のスケールを設定 const xScale = d3 .scaleLinear() // .domain([0, 2900000]) .domain([0, x_range]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleLinear() // .domain([0, 50000]) .domain([0, y_range]) .range([height - margin.bottom, margin.top]); // 折れ線グラフ用のラインジェネレータを作成 const lineGenerator = d3 .line() .x((d) => xScale(d.views)) .y((d) => yScale(d.likes)); // データをtitleごとにグループ化 const groupedData = d3.group( data2.filter((d) => d.get_time <= day2), (d) => d.link ); // 各グループの最新のデータポイントを取得 const latestDataPoints = Array.from(groupedData, ([key, values]) => { return values.sort( (a, b) => new Date(b.get_time) - new Date(a.get_time) )[0]; }); // ユニークなtitleの数を計算 const uniqueTitleCount = new Set(latestDataPoints.map((d) => d.title)).size; // 最新日付の全動画の合計視聴回数を計算 const totalViews = latestDataPoints.reduce((sum, d) => sum + d.views, 0); // 合計視聴回数を表示するテキストを追加 svg .append("text") .attr("text-anchor", "start") .attr("x", margin.left + 10) // x座標を左マージンから10px右に設定 .attr("y", margin.top + 120) // y座標を上マージンから120px下に設定 .text( `全歌唱動画 ${uniqueTitleCount}本の合計視聴回数: ${d3.format(",")( totalViews )} 回` ) // フォーマットした視聴回数を表示 .attr("font-size", "20px") // フォントサイズを設定 .attr("opacity", 0.2) .attr("fill", "black"); // フォントの色を設定 // 各グループごとに線セグメントを描画 groupedData.forEach((values, key) => { values.forEach((d, i) => { if (i < values.length - 1) { const nextD = values[i + 1]; svg .append("path") .attr( "d", `M ${xScale(d.views)} ${yScale(d.likes)} L ${xScale( nextD.views )} ${yScale(nextD.likes)}` ) .attr("stroke", color(key)) .attr("stroke-width", Math.sqrt(d.views) * sWidth) // 【線の太さを動的に設定】 .attr("stroke-opacity", 0.15) .attr("fill", "none"); } }); }); // 既存のcircle要素の代わりにクリップパスと画像を追加する data2 .filter((d) => d.get_time <= day2) .forEach((d) => { const isLatestDate = latestDataPoints.some( (latestD) => latestD.get_time.getTime() === d.get_time.getTime() ); // 最新の日付のデータポイントにだけクリップパスと画像を適用 if (isLatestDate) { const radius = Math.sqrt(d.views * d.likes) * rSize; // 【半径を調整】 const newRadius = radius * 1.8; // 新しい半径を1.7倍に設定 const uniqueId = `clip-${d.link}`; // クリップパスのID // クリップパスの定義 svg .append("clipPath") .attr("id", uniqueId) .append("circle") .attr("cx", xScale(d.views)) .attr("cy", yScale(d.likes)) .attr("r", radius); // 元の半径を使用 // 画像の追加 svg .append("image") .attr("xlink:href", d.thumbnail) .attr("width", newRadius * 2) // 新しい半径の2倍の幅 .attr("height", newRadius * 2) // 新しい半径の2倍の高さ .attr("x", xScale(d.views) - newRadius) // 新しい半径を使って中心を合わせる .attr("y", yScale(d.likes) - newRadius) // 新しい半径を使って中心を合わせる .attr("clip-path", `url(#${uniqueId})`) .attr("opacity", 0.6); // 透明度を設定 } // 通常の円を描画 svg .append("circle") .attr("cx", xScale(d.views)) .attr("cy", yScale(d.likes)) .attr("r", Math.sqrt(d.views * d.likes) * rSize) // 【半径を調整】 .attr("fill", color(d.link)) // titleに基づいて色を設定 .attr("fill-opacity", isLatestDate ? 0.3 : 0.1); // 透明度を設定 }); // 最新のデータポイントにラベルテキストを描画 latestDataPoints.forEach((d) => { svg .append("text") .attr("text-anchor", "middle") .attr("x", xScale(d.views)) .attr("y", yScale(d.likes)) .text(d.title_artist) // .attr("font-size", `${Math.max(0.00001 * d.views, 10)}px`) .attr("font-size", `${Math.max(fSize * d.views, 10)}px`) // 【フォントサイズを調整】 .attr("fill", "black") .attr("dy", "0.35em") // Y軸方向の調整を追加 .attr("stroke", "white") .attr("stroke-width", `${Math.max(0.000005 * d.views, 10) * 0.2}`) .attr("style", "font-weight: bold; fill-opacity: 1.0;") .style("paint-order", "stroke fill"); }); // Y軸の目盛りラベルを設定 const yAxis = svg .append("g") .attr("class", "y-axis") .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(yScale).ticks(5)) // 目盛りの数を設定 .selectAll("text") .style("font-size", "16px") .attr("fill", "#666666"); // フォントの色を設定;; // 0を非表示にするため、0の要素を選択して非表示に設定 yAxis.filter((d) => d === 0).remove(); // X軸の目盛りラベルを設定 const xAxis = svg .append("g") .attr("class", "x-axis") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(xScale).ticks(5)) // 目盛りの数を設定 .selectAll("text") .style("font-size", "16px") .attr("fill", "#666666"); // フォントの色を設定; // 0を非表示にするため、0の要素を選択して非表示に設定 xAxis.filter((d) => d === 0).remove(); // x軸のラベルを追加 svg .append("text") .attr("text-anchor", "middle") .attr("x", width / 2) // x座標をSVGの中央に設定 .attr("y", height - margin.bottom + 50) // y座標をx軸の下に設定 .text("視聴回数") // テキストを設定 .attr("font-size", "20px") // フォントサイズを設定 .attr("fill", "#666666"); // フォントの色を設定 // X軸の線を非表示にする svg.select(".x-axis").selectAll("path").remove(); // X軸の線を非表示にする svg.select(".y-axis").selectAll("path").remove(); // y軸のラベルを追加 svg .append("text") .attr("text-anchor", "middle") .attr("x", -height / 2) // x座標をy軸の左に設定 .attr("y", margin.left - 80) // y座標をSVGの上に設定 .attr("transform", "rotate(-90)") // テキストを90度回転 .text("いいね数") // テキストを設定 .attr("font-size", "20px") // フォントサイズを設定 .attr("fill", "#666666"); // フォントの色を設定; svg .append("text") .attr("x", 10) // 左から10pxの位置 .attr("y", height + 13) // 下から10pxの位置（キャプションのベースライン） .text( "YouTubeチャンネル「NHK MUSIC」データより徒然研究室（仮称）作成。マーカーの半径は視聴回数といいね数の積の平方根に比例している。" ) // キャプションのテキスト .attr("fill", "#535353") .attr( "style", "max-width: 100%; height: auto; font: 10px 'Noto Sans JP', sans-serif; font-weight: normal;" ) .style("font-size", "12px"); // フォントサイズを12pxに設定 // SVG要素を返す return svg.node(); }4a:T288d,chart2 = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, 1200, 675]) // .style("font", "8px sans-serif") .attr( "style", "max-width: 100%; height: 675; font: 10px 'Noto Sans JP', sans-serif; font-weight: bold;" ); // SVGのサイズ設定 const width = 1200; const height = 675; const margin = { top: 10, right: 60, bottom: 60, left: 100 }; // 半径を一括で設定 // const rSize = 0.1; const rSize = R_range; // フォントサイズを設定 // const fSize = 0.0001; const fSize = font_range; // 軌跡の幅を設定 // const sWidth = 0.14; const sWidth = width_range; // day2から最新のget_timeを取得 const latestDate = day2; // get_timeを "m/d" 形式にフォーマット const dateFormat = d3.timeFormat("%Y-%m-%d %H:%M"); // 時刻も含む形式に変更 // 最新のget_timeを表示するテキストを追加 svg .append("text") .attr("text-anchor", "start") .attr("x", margin.left + 10) // x座標を左マージンから10px右に設定 .attr("y", margin.top + 40) // y座標を上マージンから20px下に設定 .text(`${dateFormat(latestDate)}`) // get_timeをフォーマットしてテキストに設定 .attr("font-size", "70px") // フォントサイズを設定 .attr("opacity", 0.2) // フォントサイズを設定 .attr("fill", "black"); // フォントの色を設定 svg .append("text") .attr("text-anchor", "start") .attr("x", margin.left + 10) // x座標を左マージンから10px右に設定 .attr("y", margin.top + 80) // y座標を上マージンから20px下に設定 .text(`NHK紅白歌合戦2023 on 公式YouTube`) // get_timeをフォーマットしてテキストに設定 .attr("font-size", "30px") // フォントサイズを設定 .attr("opacity", 0.2) // フォントサイズを設定 .attr("fill", "black"); // フォントの色を設定 // 軸のスケールを設定 const xScale = d3 .scaleLinear() // .domain([0, 2900000]) .domain([0, x_range]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleLinear() // .domain([0, 50000]) .domain([0, y_range]) .range([height - margin.bottom, margin.top]); // 折れ線グラフ用のラインジェネレータを作成 const lineGenerator = d3 .line() .x((d) => xScale(d.views)) .y((d) => yScale(d.likes)); // データをtitleごとにグループ化 const groupedData = d3.group( data2.filter((d) => d.get_time <= day2), (d) => d.link ); // 各グループの最新のデータポイントを取得 const latestDataPoints = Array.from(groupedData, ([key, values]) => { return values.sort( (a, b) => new Date(b.get_time) - new Date(a.get_time) )[0]; }); // ユニークなtitleの数を計算 const uniqueTitleCount = new Set(latestDataPoints.map((d) => d.title)).size; // 最新日付の全動画の合計視聴回数を計算 const totalViews = latestDataPoints.reduce((sum, d) => sum + d.views, 0); // 合計視聴回数を表示するテキストを追加 svg .append("text") .attr("text-anchor", "start") .attr("x", margin.left + 10) // x座標を左マージンから10px右に設定 .attr("y", margin.top + 120) // y座標を上マージンから120px下に設定 .text( `全歌唱動画${uniqueTitleCount}本の合計視聴回数: ${d3.format(",")( totalViews )} 回` ) // フォーマットした視聴回数を表示 .attr("font-size", "20px") // フォントサイズを設定 .attr("opacity", 0.2) .attr("fill", "black"); // フォントの色を設定 // 各グループごとに線セグメントを描画 groupedData.forEach((values, key) => { const isSelected = checkboxes.includes(values[0].title); // グループのタイトルで選択状態を判定 values.forEach((d, i) => { if (i < values.length - 1) { const nextD = values[i + 1]; svg .append("path") .attr( "d", `M ${xScale(d.views)} ${yScale(d.likes)} L ${xScale( nextD.views )} ${yScale(nextD.likes)}` ) .attr("stroke", color(key)) .attr("stroke-width", Math.sqrt(d.views) * sWidth) // 【線の太さを動的に設定】 .attr("stroke-opacity", isSelected ? 0.4 : 0.05) // グループの選択状態に基づいて透明度を設定 .attr("fill", "none"); } }); }); // 既存のcircle要素の代わりにクリップパスと画像を追加する data2 .filter((d) => d.get_time <= day2) .forEach((d) => { const isLatestDate = latestDataPoints.some( (latestD) => latestD.get_time.getTime() === d.get_time.getTime() ); // 最新の日付のデータポイントにだけクリップパスと画像を適用 if (isLatestDate) { const radius = Math.sqrt(d.views * d.likes) * rSize; // 【半径を調整】 const newRadius = radius * 1.8; // 新しい半径を1.7倍に設定 const uniqueId = `clip-${d.link}`; // クリップパスのID // クリップパスの定義 svg .append("clipPath") .attr("id", uniqueId) .append("circle") .attr("cx", xScale(d.views)) .attr("cy", yScale(d.likes)) .attr("r", radius); // 元の半径を使用 // 画像の追加 svg .append("image") .attr("xlink:href", d.thumbnail) .attr("width", newRadius * 2) // 新しい半径の2倍の幅 .attr("height", newRadius * 2) // 新しい半径の2倍の高さ .attr("x", xScale(d.views) - newRadius) // 新しい半径を使って中心を合わせる .attr("y", yScale(d.likes) - newRadius) // 新しい半径を使って中心を合わせる .attr("clip-path", `url(#${uniqueId})`) .attr("opacity", checkboxes.includes(d.title) ? 1 : 0.15); // 透明度を設定 // ★opacityで設定 } const isSelected = checkboxes.includes(d.title); // 通常の円を描画 svg .append("circle") .attr("cx", xScale(d.views)) .attr("cy", yScale(d.likes)) .attr("r", Math.sqrt(d.views * d.likes) * rSize) // 【半径を調整】 .attr("fill", color(d.link)) // titleに基づいて色を設定 .attr("fill-opacity", isSelected ? 0.4 : 0.05); // 透明度を設定 // 白色の円を重ねて描画（透明度を調整） // svg // .append("circle") // .attr("cx", xScale(d.views)) // .attr("cy", yScale(d.likes)) // .attr("r", Math.sqrt(d.views) * rSize) // 通常の円と同じ半径を使用 // .attr("fill", "white") // .attr("fill-opacity", isSelected ? 0.0 : 0.7); // チェックボックスの状態によって透明度を変更 }); // 最新のデータポイントにラベルテキストを描画 latestDataPoints.forEach((d) => { svg .append("text") .attr("text-anchor", "middle") .attr("x", xScale(d.views)) .attr("y", yScale(d.likes)) .text(d.title_artist) // .attr("font-size", `${Math.max(0.00001 * d.views, 10)}px`) .attr("font-size", `${Math.max(fSize * d.views, 10)}px`) // 【フォントサイズを調整】 .attr("fill", "black") .attr("dy", "0.35em") // Y軸方向の調整を追加 .attr("stroke", "white") .attr("stroke-width", `${Math.max(0.000005 * d.views, 10) * 0.2}`) .attr("style", "font-weight: bold; fill-opacity: 1.0;") .style("paint-order", "stroke fill") .attr("opacity", checkboxes.includes(d.title) ? 1 : 0.2); }); // Y軸の目盛りラベルを設定 const yAxis = svg .append("g") .attr("class", "y-axis") .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(yScale).ticks(5)) // 目盛りの数を設定 .selectAll("text") .style("font-size", "16px") .attr("fill", "#666666"); // フォントの色を設定;; // 0を非表示にするため、0の要素を選択して非表示に設定 yAxis.filter((d) => d === 0).remove(); // X軸の目盛りラベルを設定 const xAxis = svg .append("g") .attr("class", "x-axis") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(xScale).ticks(5)) // 目盛りの数を設定 .selectAll("text") .style("font-size", "16px") .attr("fill", "#666666"); // フォントの色を設定; // 0を非表示にするため、0の要素を選択して非表示に設定 xAxis.filter((d) => d === 0).remove(); // x軸のラベルを追加 svg .append("text") .attr("text-anchor", "middle") .attr("x", width / 2) // x座標をSVGの中央に設定 .attr("y", height - margin.bottom + 50) // y座標をx軸の下に設定 .text("視聴回数") // テキストを設定 .attr("font-size", "20px") // フォントサイズを設定 .attr("fill", "#666666"); // フォントの色を設定 // X軸の線を非表示にする svg.select(".x-axis").selectAll("path").remove(); // X軸の線を非表示にする svg.select(".y-axis").selectAll("path").remove(); // y軸のラベルを追加 svg .append("text") .attr("text-anchor", "middle") .attr("x", -height / 2) // x座標をy軸の左に設定 .attr("y", margin.left - 80) // y座標をSVGの上に設定 .attr("transform", "rotate(-90)") // テキストを90度回転 .text("いいね数") // テキストを設定 .attr("font-size", "20px") // フォントサイズを設定 .attr("fill", "#666666"); // フォントの色を設定; svg .append("text") .attr("x", 10) // 左から10pxの位置 .attr("y", height + 13) // 下から10pxの位置（キャプションのベースライン） .text("YouTubeチャンネル「NHK MUSIC」データより徒然研究室（仮称）作成。") // キャプションのテキスト .attr("fill", "#535353") .attr( "style", "max-width: 100%; height: auto; font: 10px 'Noto Sans JP', sans-serif; font-weight: normal;" ) .style("font-size", "12px"); // フォントサイズを12pxに設定 // SVG要素を返す return svg.node(); }4b:T901,// data2 = _230110.map((d) => { // // タイトルから【と】で囲まれた部分を抽出 // const title = d.title; // const startIndex = title.indexOf("【"); // const endIndex = title.indexOf("】"); // if (startIndex !== -1 && endIndex !== -1) { // d.title_artist = title.slice(startIndex + 1, endIndex); // } else { // d.title_artist = ""; // 【】で囲まれた部分が見つからない場合は空文字列 // } // return d; // }) // 複数の「title」列の文字列を置換する処理を追加 _230110.forEach((d) => { // ここで置換前の文字列と置換後の文字列を指定 const replacements = [ { before: "【MISIA＆Rockon Social Club】「傷だらけの王者」話題を集めた今年のラグビーテーマソング【紅白】｜NHK", after: "【MISIA】" }, { before: "【MISIA＆Rockon Social Club】紅白「傷だらけの王者」話題を集めた今年のラグビーテーマソング｜NHK", after: "【MISIA】" }, { before: "【紅白特別企画】ブラックビスケッツ復活！「Timing」25年ぶり！奇跡のステージ【紅白】｜NHK", after: "【ブラックビスケッツ】" }, { before: "【紅白特別企画】ポケットビスケッツ復活！「YELLOW YELLOW HAPPY」25年ぶりの紅白【紅白】｜NHK", after: "【ポケットビスケッツ】" }, { before: "【紅白特別企画】寺尾聰「ルビーの指環」「ザ・ベストテン」12週連続1位を記録！【紅白】｜NHK", after: "【寺尾聰】" } // 他にも必要な置換ルールを追加できます ]; // 「title」列の文字列に対して置換処理を実行 replacements.forEach((replacement) => { d.title = d.title.replace(replacement.before, replacement.after); }); // タイトルから【と】で囲まれた部分を抽出 const startIndex = d.title.indexOf("【"); const endIndex = d.title.indexOf("】"); if (startIndex !== -1 && endIndex !== -1) { d.title_artist = d.title.slice(startIndex + 1, endIndex); } else { d.title_artist = ""; // 【】で囲まれた部分が見つからない場合は空文字列 } })4c:[{"id":"e2581f6c103a183e13ca276678f85e593d10348e81f483f3188d33925fb299d34375a2c0793eae75f214098d68159fc5b5d4684913d1985dcfb42d9719d3de86","href":"https://static.observableusercontent.com/files/e2581f6c103a183e13ca276678f85e593d10348e81f483f3188d33925fb299d34375a2c0793eae75f214098d68159fc5b5d4684913d1985dcfb42d9719d3de86","name":"20250101T020012.285993+0900_NHK_MUSIC.csv","type":"text/csv","lastModified":1735664915884.841,"size":12611},{"id":"15f95e34fd6b13b9c9d13aec749cfd4b0a0569e7bf05d51b1bfcd3bed9c394f88da2de91aec3e9d96a73af43a449c83b9a01d8a32ba4e7cc62979f7b8263a87e","href":"https://static.observableusercontent.com/files/15f95e34fd6b13b9c9d13aec749cfd4b0a0569e7bf05d51b1bfcd3bed9c394f88da2de91aec3e9d96a73af43a449c83b9a01d8a32ba4e7cc62979f7b8263a87e","name":"240102_1025_youtube_kouhaku_union.csv","type":"text/csv","lastModified":1704158760020.035,"size":125328},{"id":"874f2bcb0b480ba7900bbcf173749d2fc59d4207fc9b6e463d7ff5d486b1df741dcd971f9f0be9cf7b0b6be24cabab4899eb1f7ee61da28030c34f03aab3e12b","href":"https://static.observableusercontent.com/files/874f2bcb0b480ba7900bbcf173749d2fc59d4207fc9b6e463d7ff5d486b1df741dcd971f9f0be9cf7b0b6be24cabab4899eb1f7ee61da28030c34f03aab3e12b","name":"240102_1930_youtube_kouhaku_union.csv","type":"text/csv","lastModified":1704191487494.692,"size":140504},{"id":"857efefd2230f21dc1aa63f21a5197f32821f505da9f383b24c76c6034a4ac46daea525e512be3e9bdad1054b64917de3ad62bb6f1fb60092ea3e376b4fd165b","href":"https://static.observableusercontent.com/files/857efefd2230f21dc1aa63f21a5197f32821f505da9f383b24c76c6034a4ac46daea525e512be3e9bdad1054b64917de3ad62bb6f1fb60092ea3e376b4fd165b","name":"240104_1343_youtube_kouhaku_union.csv","type":"text/csv","lastModified":1704343421085.717,"size":261991},{"id":"3f99a925bf18028fda059e927092e045bcf54d871cda3dbee69ffa3fc7350ee77d7101fdd1f4cd29963be2b58074813efd4264e64868721cccab196c38b52215","href":"https://static.observableusercontent.com/files/3f99a925bf18028fda059e927092e045bcf54d871cda3dbee69ffa3fc7350ee77d7101fdd1f4cd29963be2b58074813efd4264e64868721cccab196c38b52215","name":"240104_1356_youtube_kouhaku_union.csv","type":"text/csv","lastModified":1704344183673.394,"size":246807},{"id":"ea86c5ec012eaee0f8c5966441a75670c39d972886e564f501b462523b11a9020f65757c6b2af2552d9d5bc0be7e3edcc983f930cdb50578faf65dfa3c4dfa63","href":"https://static.observableusercontent.com/files/ea86c5ec012eaee0f8c5966441a75670c39d972886e564f501b462523b11a9020f65757c6b2af2552d9d5bc0be7e3edcc983f930cdb50578faf65dfa3c4dfa63","name":"240109_0733_youtube_kouhaku_union.csv","type":"text/csv","lastModified":1704753302350.467,"size":268417},{"id":"0628f70d6b65b04b28dca1dbf6422ed901c5a98943ba9245bac6b878b796c6741649154fba7adec4c38e69b047c8c60943cfd39929bb8ffc4a902e7984d2cc45","href":"https://static.observableusercontent.com/files/0628f70d6b65b04b28dca1dbf6422ed901c5a98943ba9245bac6b878b796c6741649154fba7adec4c38e69b047c8c60943cfd39929bb8ffc4a902e7984d2cc45","name":"240104_1959_NHK MUSIC.csv","type":"text/csv","lastModified":1704366327773.811,"size":15313},{"id":"a2d57e3a2213d1dbe1548b1306cf42864bbc9f2395f296ccbbb7d38a42af1690c710634d0dbd71b48518db4a772db4d963e55b6c85df6cc284b8206b2e18f7fc","href":"https://static.observableusercontent.com/files/a2d57e3a2213d1dbe1548b1306cf42864bbc9f2395f296ccbbb7d38a42af1690c710634d0dbd71b48518db4a772db4d963e55b6c85df6cc284b8206b2e18f7fc","name":"240104_2004_youtube_kouhaku_union.csv","type":"text/csv","lastModified":1704366363567.292,"size":262003},{"id":"cfb6a7df3e04e6f39d261f5c4f2253897e31eb4bc91edde853ed2c1594579c452c40a16ff9669ebd7468a97919fb695bf42f2fbc0811470a4360c4bb0e7699b9","href":"https://static.observableusercontent.com/files/cfb6a7df3e04e6f39d261f5c4f2253897e31eb4bc91edde853ed2c1594579c452c40a16ff9669ebd7468a97919fb695bf42f2fbc0811470a4360c4bb0e7699b9","name":"240103_1102_youtube_kouhaku_union.csv","type":"text/csv","lastModified":1704247424523.528,"size":186043},{"id":"0ac6c1ee88c6ba7b2901e1b879b91de1a57c7b7b7f07259803c4c543703086e600e43fbcfff2617a99eb2eee01532c502ee44b1568a980b656330e773fba2c0f","href":"https://static.observableusercontent.com/files/0ac6c1ee88c6ba7b2901e1b879b91de1a57c7b7b7f07259803c4c543703086e600e43fbcfff2617a99eb2eee01532c502ee44b1568a980b656330e773fba2c0f","name":"240106_1220_youtube_kouhaku_union.csv","type":"text/csv","lastModified":1704511265920.29,"size":325085},{"id":"59b0c9f93ad17745d2c5ea83b098e588115c17d04a5bdbed8e26661b4205785adce4ecaa5ff6a2d7180aa0853206e9774a5cf55ff25ea4045f9cced63f818ce2","href":"https://static.observableusercontent.com/files/59b0c9f93ad17745d2c5ea83b098e588115c17d04a5bdbed8e26661b4205785adce4ecaa5ff6a2d7180aa0853206e9774a5cf55ff25ea4045f9cced63f818ce2","name":"240101_0512_NHK MUSIC.csv","type":"text/csv","lastModified":1704053615924.076,"size":15693},{"id":"e5fb2c172bba419004dce3791b8f5ef8100fbf174b899fade19b50dd6f92d07c3db3bd4a61a4e1a922412ad76b35964e89043fb67064094b8a6b2439ed1d79aa","href":"https://static.observableusercontent.com/files/e5fb2c172bba419004dce3791b8f5ef8100fbf174b899fade19b50dd6f92d07c3db3bd4a61a4e1a922412ad76b35964e89043fb67064094b8a6b2439ed1d79aa","name":"240101_0449_NHK MUSIC.csv","type":"text/csv","lastModified":1704052453591.989,"size":15211},{"id":"edc17ebc13f20cddcf74b74a3923b409363e51ab8ff0dfa9846380a8d9ab7b75f73032709fd08a34a3ddd988306f04282c598c95b8022259df5be257a8848cbe","href":"https://static.observableusercontent.com/files/edc17ebc13f20cddcf74b74a3923b409363e51ab8ff0dfa9846380a8d9ab7b75f73032709fd08a34a3ddd988306f04282c598c95b8022259df5be257a8848cbe","name":"240101_0821_youtube_kouhaku_union.csv","type":"text/csv","lastModified":1704064905851.238,"size":31218},{"id":"063de92d6447a461c7a6b3868f0b02f8a232774ad2d0e21bd3744a0c9ae06500c933e12271b6240e5176ef53e194cc2026025ad59d47f65d6922b60050b29ef4","href":"https://static.observableusercontent.com/files/063de92d6447a461c7a6b3868f0b02f8a232774ad2d0e21bd3744a0c9ae06500c933e12271b6240e5176ef53e194cc2026025ad59d47f65d6922b60050b29ef4","name":"240101_0858_youtube_kouhaku_union.csv","type":"text/csv","lastModified":1704067161764.559,"size":31219},{"id":"5ff7eba4623137056010d80bd2a426409dadf3c7a168abdf6d2d7824e7b5761d3a66b8cbd9e4743d7f23da7e01eb51d82b0444f47c8bffff9175152384bd46ef","href":"https://static.observableusercontent.com/files/5ff7eba4623137056010d80bd2a426409dadf3c7a168abdf6d2d7824e7b5761d3a66b8cbd9e4743d7f23da7e01eb51d82b0444f47c8bffff9175152384bd46ef","name":"240101_1059_youtube_kouhaku_union.csv","type":"text/csv","lastModified":1704074368014.69,"size":46812},{"id":"f53be8923823c0a96041e113dd0f62780776c7678966fad738f3344655269a4b40267f57bfb94c25c9c86f5dc3284cc39ab40df44d6fbdfdfe722615a7ebabb9","href":"https://static.observableusercontent.com/files/f53be8923823c0a96041e113dd0f62780776c7678966fad738f3344655269a4b40267f57bfb94c25c9c86f5dc3284cc39ab40df44d6fbdfdfe722615a7ebabb9","name":"240101_0602_NHK MUSIC.csv","type":"text/csv","lastModified":1704056558086.838,"size":15694},{"id":"5ff7eba4623137056010d80bd2a426409dadf3c7a168abdf6d2d7824e7b5761d3a66b8cbd9e4743d7f23da7e01eb51d82b0444f47c8bffff9175152384bd46ef","href":"https://static.observableusercontent.com/files/5ff7eba4623137056010d80bd2a426409dadf3c7a168abdf6d2d7824e7b5761d3a66b8cbd9e4743d7f23da7e01eb51d82b0444f47c8bffff9175152384bd46ef","name":"240101_1536_youtube_kouhaku_union.csv","type":"text/csv","lastModified":1704091031925.735,"size":46812},{"id":"ae75080e28567f26a8d1412ed7009d9eff6d285ab82c749ae86605d6af96cf0b85830708660a6c9fecb81dfb1f81aa4efe8b1bdf0fae74068cc90b129c90ff8f","href":"https://static.observableusercontent.com/files/ae75080e28567f26a8d1412ed7009d9eff6d285ab82c749ae86605d6af96cf0b85830708660a6c9fecb81dfb1f81aa4efe8b1bdf0fae74068cc90b129c90ff8f","name":"240101_1550_youtube_kouhaku_union.csv","type":"text/csv","lastModified":1704091843577.436,"size":62642},{"id":"e4bee03f8f6f10b60ce46f4edae2588df84e69000d9f9e9d88d8424d8fbabcb860d30145aa05786aa7065d31083e4ca78bbd268180cb605038277de6cd099ad8","href":"https://static.observableusercontent.com/files/e4bee03f8f6f10b60ce46f4edae2588df84e69000d9f9e9d88d8424d8fbabcb860d30145aa05786aa7065d31083e4ca78bbd268180cb605038277de6cd099ad8","name":"240101_2225_youtube_kouhaku_union.csv","type":"text/csv","lastModified":1704115602963.874,"size":125992},{"id":"893eed3ca851e0333f650f150816d478a9964377bcfb3315b69a6924fd836966788fdc98f50be1df92dc324c797ab55d8039e7e03d93310ba49852435841640b","href":"https://static.observableusercontent.com/files/893eed3ca851e0333f650f150816d478a9964377bcfb3315b69a6924fd836966788fdc98f50be1df92dc324c797ab55d8039e7e03d93310ba49852435841640b","name":"240117_0532_youtube_kouhaku_union.csv","type":"text/csv","lastModified":1705438848545.734,"size":468378},{"id":"85e85ea66c1fbf49e17a27974977d30323f6b52f907169bd516a6a379d6ec9c53d7d1e70337c2d0399b8522c930a82a94cf3e8ad7b1e5515e79acef63d5812ab","href":"https://static.observableusercontent.com/files/85e85ea66c1fbf49e17a27974977d30323f6b52f907169bd516a6a379d6ec9c53d7d1e70337c2d0399b8522c930a82a94cf3e8ad7b1e5515e79acef63d5812ab","name":"240113_1536_youtube_kouhaku_union.csv","type":"text/csv","lastModified":1705127787756.259,"size":390949},{"id":"808b4433c7b74806be3052163a055c3f1b3571e34693cf12c86633d1acc469afb8c100cd26e88a1a959022335109c580b41fbab11a7e90b2d81269506aea02bb","href":"https://static.observableusercontent.com/files/808b4433c7b74806be3052163a055c3f1b3571e34693cf12c86633d1acc469afb8c100cd26e88a1a959022335109c580b41fbab11a7e90b2d81269506aea02bb","name":"240113_1506_youtube_kouhaku_union.csv","type":"text/csv","lastModified":1705126057306.076,"size":397803},{"id":"295cc04908f7d75be571aa60769560a6c7efa745c3aa3fc61273df6e3ab606628b49721bca3a25219f51479ad9cccf882eb1bb6dde96f3efece72b1a01d7f538","href":"https://static.observableusercontent.com/files/295cc04908f7d75be571aa60769560a6c7efa745c3aa3fc61273df6e3ab606628b49721bca3a25219f51479ad9cccf882eb1bb6dde96f3efece72b1a01d7f538","name":"240113_2346_NHK MUSIC.csv","type":"text/csv","lastModified":1705157523685.109,"size":19491},{"id":"d4f19f6c7552020d65c724380d9be8eb074ba90c87ccc90a0813232c59a97c052c2716ea531e553f9b21dfb87bbc166794293080dd764fa519ec9d07253a23f4","href":"https://static.observableusercontent.com/files/d4f19f6c7552020d65c724380d9be8eb074ba90c87ccc90a0813232c59a97c052c2716ea531e553f9b21dfb87bbc166794293080dd764fa519ec9d07253a23f4","name":"240113_2348_youtube_kouhaku_union.csv","type":"text/csv","lastModified":1705157560209.965,"size":410306}] 29:{"id":"aedf8162005b99ae","slug":null,"title":"Plot: The Wealth & Health of Nations","thumbnail":"5431ca3d8e9a409ff0957067f6882146dbf47469f8c0326dba11b197c441155b","access_level":"public","create_time":"$D2023-12-31T19:52:39.862Z","update_time":"$D2025-01-07T14:08:43.193Z","view_time":null,"first_public_time":"$D2023-12-31T19:52:39.862Z","has_unpublished_edits":null,"fork":{"id":"d2abe8e0d9933729","slug":null,"title":"Plot: The Wealth & Health of Nations","owner":{"id":"59dc038720f2d6ef","login":"tsurezure-lab-ws","name":"tsurezure lab. こちら徒然研究室（仮称）"}},"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":1064,"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":"Plot: The Wealth & Health of Nations","cells":[{"id":0,"value":"

Plot: The Wealth & Health of Nations

Observable Plot › Gallery

\n\n# NHK紅白歌合戦2023 YouTube公式本番動画の視聴回数推移","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":500,"value":"viewof day2 = Scrubber(d3.sort(d3.union(data2.map((d) => d.get_time))), {\n loop: true,\n delay: 1000 / 1, //3\n format: (date) => d3.timeFormat(\"%Y-%m-%d\")(date)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1041,"value":"viewof x_range = {\n const maxViews = Math.max(...data2.map((d) => d.views));\n return Inputs.range([0, maxViews * 2.6], { label: \"Scale of X\", step: 1 });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1043,"value":"viewof y_range = {\n const maxViews = Math.max(...data2.map((d) => d.likes));\n return Inputs.range([0, maxViews * 2.5], { label: \"Scale of Y\", step: 1 });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1045,"value":"viewof font_range = {\n const maxFonts = Math.max(...data2.map((d) => d.views));\n return Inputs.range([0, maxFonts * 0.0000000000015], {\n label: \"Size of Fonts\",\n step: 0.000001\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1047,"value":"viewof width_range = {\n const maxWidths = Math.max(...data2.map((d) => d.views));\n return Inputs.range([0, maxWidths * 0.00000007], {\n label: \"Width of Paths\",\n step: 0.00001\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1054,"value":"viewof R_range = {\n const maxRs = Math.max(...data2.map((d) => d.views));\n return Inputs.range([0, maxRs * 0.00000000004], {\n label: \"Length of R\",\n step: 0.00001\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1059,"value":"viewof checkboxes = Inputs.checkbox(\n Array.from(new Set(data2.map((d) => d.title))),\n { label: \"Select Tracks\" }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"_230110 = await FileAttachment(\"240117_0532_youtube_kouhaku_union.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"_230110","database":"$undefined"},{"id":523,"value":"color = d3\n .scaleOrdinal(\n data2.map((d) => d.link),\n d3.schemeTableau10\n )\n .unknown(\"black\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"lastDefined = ({\n reduceIndex(I, X) {\n for (let i = I.length - 1; i >= 0; --i) {\n const x = X[I[i]];\n if (x != null) {\n return x; // 最初に見つかった非null値を返す\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":5,"value":"csvData = FileAttachment(\n \"20250101T020012.285993+0900_NHK_MUSIC.csv\"\n).csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"// data2 = _230110.map((d) => {\n// const parts = d.get_time.split(\"/\");\n// const year = parts[0];\n// const month = parts[1].padStart(2, \"0\");\n// const day = parts[2].padStart(2, \"0\");\n\n// d.get_time = `${year}-${month}-${day}`;\n\n// // get_time形式に変換\n// d.get_time = new Date(`${year}-${month}-${day}`);\n// return d;\n// })\n\n\n// data2 = _230110","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"// data2に代入\ndata2 = _230110.slice() // _230110のコピーを作成","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"// Noto Sans JP Blackフォントをロードする関数\nasync function loadFont() {\n return new Promise((resolve) => {\n const font = new FontFace(\n \"Noto Sans JP Black\",\n \"url(https://cdn.plot.ly/plotly-texture/fonts/v1.3/noto-sans-jp-v13-latin-700.woff)\"\n );\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"},{"id":568,"value":"\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"}],"files":"$W4c","stdlib":"1"}} 24:null