25:["$","title",null,{"children":"Ridgeline Plot of views of FujiiKaze's music on YouTube | tsurezure lab. こちら徒然研究室（仮称） | Observable"}] 49:T11d7,chart = { // SVG要素を作成し、アスペクト比を維持して表示領域を設定します const svg = d3 .create("svg") .attr("preserveAspectRatio", "xMinYMin meet") .attr("viewBox", "0 0 900 1030") // .attr("viewBox", "-90 -250 900 1030") // .style("background", mode === "dark" ? "#2e2e2e" : "#fff"); // .style("background-color", "rgb(250, 245, 240)"); // 背景色を設定します; .style("background-color", "#FBFAF5"); // 背景色を設定します; // グラデーションの開始色、中間色、終了色をカスタムカラーマップから取得 const gradientStartColor = customColorMap(0.0); // 開始色と終了色を逆に const gradientMidColor = customColorMap(0.2); const gradientEndColor = customColorMap(1.0); // 開始色と終了色を逆に // 明るいグラデーションを定義します const gradient_light = svg .append("linearGradient") .attr("id", "gradLight") .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "0%") .attr("y2", "100%"); // グラデーションの開始色を追加します gradient_light .append("stop") .attr("offset", "0%") .attr("stop-color", gradientStartColor); // グラデーションの中間色を追加します gradient_light .append("stop") .attr("offset", "60%") .attr("stop-color", gradientMidColor); // グラデーションの終了色を追加します gradient_light .append("stop") .attr("offset", "95%") .attr("stop-color", gradientEndColor); // 暗いグラデーションを定義します const gradient_dark = svg .append("linearGradient") .attr("id", "gradDark") .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "0%") .attr("y2", "100%"); // グラデーションの開始色を追加します gradient_dark .append("stop") .attr("offset", "0%") .attr("stop-color", gradientStartColor); // グラデーションの中間色を追加します gradient_dark .append("stop") .attr("offset", "60%") .attr("stop-color", gradientMidColor); // グラデーションの終了色を追加します gradient_dark .append("stop") .attr("offset", "95%") .attr("stop-color", gradientEndColor); // x軸をSVGに追加します svg.append("g").call(xAxis); // 新しいY軸を右側に追加するための設定 const yAxisRight = d3 .axisRight(y) .ticks(5) // 目盛りの数を設定 .tickSize(width); // 目盛り線の長さをグラフ全体の幅に設定 // Y軸を右側に追加 svg .append("g") .attr("class", "y-axis-right") // クラスを追加（任意） .call(yAxisRight) .attr("transform", `translate(${width},0)`); // 右側に配置 // データの各シリーズに対して要素を追加し、位置を調整します const group = svg .append("g") .selectAll("g") .data(data.series) .join("g") .attr("transform", (d) => `translate(0,${y(d.country) + 1})`); // 領域を描画します group .append("path") .attr("fill", mode === "dark" ? "url(#gradDark)" : "url(#gradLight)") .attr("fill-opacity", 0.6) .attr("d", (d) => area(d.viewss)); // 線を描画します group .append("path") .attr("fill", "none") // .attr("stroke", mode === "dark" ? "#f2e8d2" : "#544208") .attr("stroke", "black") .attr("stroke-width", 1.5) // 線の太さを設定します .attr("stroke-opacity", 0.3) // 線の透明度を設定します .attr("d", (d) => line(d.viewss)); // y軸をSVGに追加します; svg .append("g") .call(yAxis) .selectAll("text") .attr("text-anchor", "end") .attr("transform", "translate(85, -15)") .style("font-size", "22px") .style("font-weight", "bold") // .style("stroke", "rgb(250, 245, 240)") // ストロークの色を指定します .style("stroke", "white") // ストロークの色を指定します .style("opacity", 0.9) // ストロークの透明度を指定します .style("stroke-width", "0.3px"); // ストロークの太さを指定します group .append("image") // .attr("x", 200) // 画像のX座標 // .attr("y", (d, i) => i * 1 - 15) // 画像のY座標（各国の間隔を調整するためにiを使用） .attr("transform", "translate(200, -27)") .attr("width", 25) // 画像の幅 .attr("height", 25) // 画像の高さ .attr("xlink:href", (d) => d.Circle_Image_URL); // SVG要素を返します return svg.node(); }4a:Tb67,data = { const data = d3.csvParse( await FileAttachment("230920_YouTubeMC_FujiiKaze_sort.csv").text(), (d) => { // 必要なデータを読み込む return { date: new Date(d.date), country: d.country, views: +d.views, Circle_Image_URL: d.Circle_Image_URL // Circle_Image_URL列を読み込む }; } ); const dates = Array.from(d3.group(data, (d) => +d.date).keys()).sort( d3.ascending ); // 最初の10ヶ国を抽出します const top10Countries = Array.from( d3.groups(data, (d) => d.country), ([country]) => country ).slice(0, 25); return { dates: dates.map((d) => new Date(d)), series: d3 .groups(data, (d) => d.country) .filter(([country]) => top10Countries.includes(country)) // 最初の10ヶ国だけをフィルタリング .map(([country, viewss]) => { const views = new Map(viewss.map((d) => [+d.date, d.views])); const Circle_Image_URL = viewss[0].Circle_Image_URL; // 同じ国の全ての行が同じCircle_Image_URLを持つと仮定しています return { country, viewss: dates.map((d) => views.get(d)), Circle_Image_URL }; }) }; } // data = { // const data = d3.csvParse( // await FileAttachment("230920_YouTubeMC_FujiiKaze_sort.csv").text(), // (d) => { // // 必要なデータを読み込む // return { // date: new Date(d.date), // country: d.country, // views: +d.views, // Circle_Image_URL: d.Circle_Image_URL // Circle_Image_URL列を読み込む // }; // } // ); // const dates = Array.from(d3.group(data, (d) => +d.date).keys()).sort( // d3.ascending // ); // // 各国のviewsの合計を計算 // const countryViewsSum = Array.from( // d3.rollup( // data, // (v) => d3.sum(v, (d) => d.views), // (d) => d.country // ), // ([country, viewsSum]) => ({ country, viewsSum }) // ); // // viewsの合計が多い順にソート // countryViewsSum.sort((a, b) => d3.descending(a.viewsSum, b.viewsSum)); // // 上位20カ国をフィルタリング // const top20Countries = countryViewsSum.slice(0, 30).map((d) => d.country); // return { // dates: dates.map((d) => new Date(d)), // series: d3 // .groups(data, (d) => d.country) // .filter(([country]) => top20Countries.includes(country)) // 上位20カ国だけをフィルタリング // .map(([country, viewss]) => { // const views = new Map(viewss.map((d) => [+d.date, d.views])); // const Circle_Image_URL = viewss[0].Circle_Image_URL; // 同じ国の全ての行が同じCircle_Image_URLを持つと仮定しています // return { // country, // viewss: dates.map((d) => views.get(d)), // Circle_Image_URL // }; // }) // }; // }4b:[{"id":"0b7b7cfe158baa3d8552de526cb8f4b47e4f5cf438d0e25baf5f6f06fb0811e1cf3365808b2aee3a59edd237304dd6c5d9940e9374f30c6ba1791783ade0706e","href":"https://static.observableusercontent.com/files/0b7b7cfe158baa3d8552de526cb8f4b47e4f5cf438d0e25baf5f6f06fb0811e1cf3365808b2aee3a59edd237304dd6c5d9940e9374f30c6ba1791783ade0706e","name":"230920_YouTubeMC_YOASOBI_sort.csv","type":"text/csv","lastModified":1695163130918.128,"size":14972876},{"id":"ddaf037be6de8dc8405c2358d6780826b50e5bc489c3567a0c53ab76ec803caab110c942f3cca27e078f5dd3b081e92247a0ee6e79ee99a31fffad7bb77873a1","href":"https://static.observableusercontent.com/files/ddaf037be6de8dc8405c2358d6780826b50e5bc489c3567a0c53ab76ec803caab110c942f3cca27e078f5dd3b081e92247a0ee6e79ee99a31fffad7bb77873a1","name":"230920_YouTubeMC_FujiiKaze_sort.csv","type":"text/csv","lastModified":1695163196793.385,"size":11970026}] 29:{"id":"68952e3650acf9ed","slug":null,"title":"Ridgeline Plot of views of FujiiKaze's music on YouTube","thumbnail":"8b13ffa745062f14b5b60327d29eeab95a0902880d1fd395ff1276f5cb1bbecc","access_level":"public","create_time":"$D2023-09-19T22:38:50.918Z","update_time":"$D2023-09-19T23:17:58.259Z","view_time":null,"first_public_time":"$D2023-09-19T22:38:50.918Z","has_unpublished_edits":null,"fork":{"id":"c646fa2ebc24c901","slug":null,"title":"Ridgeline Plot of views of YOASOBI's music on YouTube","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":709,"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Ridgeline Plot of views of FujiiKaze's music on YouTube","cells":[{"id":521,"value":"# Ridgeline Plot of views of FujiiKaze's music on YouTube\nYouTubeにおけるFujiiKazeさんの楽曲の視聴回数推移","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":408,"value":"\n\n\n \n\n\n \n

\n YouTubeにおけるYOASOBIさんの楽曲の視聴回数推移\n

\n \n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":656,"value":"// color = d3.scaleSequential([-1, 1], d3.interpolateViridis);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"// カスタムのカラーマップ関数を作成\ncustomColorMap = (t) => {\n // tを変換して、0.2から1.0の範囲で色を生成します\n const transformedT = 0.3 + 0.8 * t; // tを変換\n const color = d3.interpolateViridis(transformedT); // 変換されたtを使用してカラーマップを生成\n return color;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"legend = Plot.legend({\n color: {\n interpolate: customColorMap, // カスタムのカラーマップ関数を指定\n domain: [0, 19560]\n },\n width: 200,\n ticks: 3, // 目盛りを10000ごとに設定\n label: \"1日あたり視聴回数 Views per day\",\n style: {\n fontSize: \"10px\"\n // backgroundColor: \"rgb(250, 245, 240)\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"\n// // handleMouseOver関数: マウスオーバー時にハイライトする処理\n// function handleMouseOver(event, d) {\n// // 選択されたシリーズのパスをハイライト\n// d3.select(this)\n// .select(\"path\")\n// .attr(\"fill-opacity\", 1.0) // ハイライト時の不透明度\n// .attr(\"stroke-opacity\", 1.0); // ハイライト時の不透明度\n// }\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"// // handleMouseOut関数: マウスアウト時にハイライトを解除する処理\n// function handleMouseOut(event, d) {\n// // 選択されたシリーズのパスのハイライトを解除\n// d3.select(this)\n// .select(\"path\")\n// .attr(\"fill-opacity\", 0.7) // 元の不透明度に戻す\n// .attr(\"stroke-opacity\", 0.5); // 元の不透明度に戻す\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"ridgelinemood2 = await FileAttachment(\"230920_YouTubeMC_FujiiKaze_sort.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"ridgelinemood2","database":"$undefined"},{"id":280,"value":"mode = Generators.observe(notify => {\n const query = matchMedia(\"(prefers-color-scheme: dark)\");\n const changed = () => notify(query.matches ? \"dark\" : \"light\");\n changed();\n query.addListener(changed);\n return () => query.removeListener(changed);\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"adj = 50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"overlap = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"width = 900 ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"height = 1030","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"margin = ({ top: 315, right: 20, bottom: 30, left: 110 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"x = d3.scaleTime()\n .domain(d3.extent(data.dates))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"y = d3.scalePoint()\n .domain(data.series.map(d => d.country))\n .range([margin.top, height - margin.bottom])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"z = d3\n .scaleLinear()\n .domain([0, d3.max(data.series, (d) => d3.max(d.viewss))])\n .nice()\n .range([0, -overlap * y.step()])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .style(\"color\", mode===\"dark\"?\"#f2e8d2\":\"#544208\")\n .call(d3.axisBottom(x)\n .ticks(width / 80)\n .tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .style(\"color\", mode===\"dark\"?\"#f2e8d2\":\"#544208\")\n .call(d3.axisLeft(y).tickSize(0).tickPadding(4))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"area = d3\n .area()\n .curve(d3.curveCatmullRom.alpha(0.5))\n .defined((d) => !isNaN(d))\n .x((d, i) => x(data.dates[i]))\n .y0(0)\n .y1((d) => z(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"line = area.lineY1()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","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