25:["$","title",null,{"children":"Ridgeline Plot of views of Aoba Ichiko's music on YouTube | tsurezure lab. こちら徒然研究室（仮称） | Observable"}] 49:T1188,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)"); // 背景色を設定します; // グラデーションの開始色、中間色、終了色をカスタムカラーマップから取得 const gradientStartColor = customColorMap(1.0); // 開始色と終了色を逆に const gradientMidColor = customColorMap(0.6); const gradientEndColor = customColorMap(0.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:T4db,data = { const data = d3.csvParse( await FileAttachment("230917_YouTubeMC_Aoba_Ichiko_flags@6.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, 20); 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 }; }) }; }4b:[{"id":"1af45190bb3a1a4e24a357af62f6384948bed8481f3960d8a55457d687e7996cff0468d95aaae9330509430f6b6af837e098849bb5a92d9a21114b306cb3fe79","href":"https://static.observableusercontent.com/files/1af45190bb3a1a4e24a357af62f6384948bed8481f3960d8a55457d687e7996cff0468d95aaae9330509430f6b6af837e098849bb5a92d9a21114b306cb3fe79","name":"230917_YouTubeMC_Aoba_Ichiko_flags@5.csv","type":"text/csv","lastModified":1694974677989.071,"size":7161395},{"id":"c6f0ae4697d5f59a42f3847423025cd3f6183027cf8775ea6cbef44b14f0c3e4681fe43dc0ea1aa82ae9cde757f4cea33f6be5b5c45f0c47da976e417f2806a4","href":"https://static.observableusercontent.com/files/c6f0ae4697d5f59a42f3847423025cd3f6183027cf8775ea6cbef44b14f0c3e4681fe43dc0ea1aa82ae9cde757f4cea33f6be5b5c45f0c47da976e417f2806a4","name":"230917_YouTubeMC_Aoba_Ichiko_flags@6.csv","type":"text/csv","lastModified":1694975000972.404,"size":7162148}] 29:{"id":"111168e29cf123da","slug":null,"title":"Ridgeline Plot of views of Aoba Ichiko's music on YouTube","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-09-17T16:41:59.477Z","update_time":"$D2024-11-01T06:32:55.275Z","view_time":null,"first_public_time":"$D2023-09-17T16:41:59.477Z","has_unpublished_edits":null,"fork":{"id":"9f5e462abc281a49","slug":null,"title":"Ridgeline Plot of views of Sheena Mota'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":606,"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":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Ridgeline Plot of views of Aoba Ichiko's music on YouTube","cells":[{"id":521,"value":"# Ridgeline Plot of views of Aoba Ichiko's music on YouTube\nYouTubeにおける青葉市子さんの楽曲の視聴回数推移","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における青葉市子さんの楽曲の視聴回数推移\n

\n \n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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.interpolateGnBu(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(\"230917_YouTubeMC_Aoba_Ichiko_flags@6.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 = 9","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: 300, 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