25:["$","title",null,{"children":"Ridgeline Plot of views of Sheena Mota's music on YouTube | tsurezure lab. こちら徒然研究室（仮称） | Observable"}] 49:T1aae,chart = { // SVG要素を作成し、アスペクト比を維持して表示領域を設定します const svg = d3 .create("svg") .attr("preserveAspectRatio", "xMinYMin meet") // .attr( // "viewBox", // "-" + // adj + // " -" + // adj + // " " + // (width + adj * 2) + // " " + // (height + adj * 2) // ) .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); // // // 明るいグラデーションを定義します // // 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", "#6a915c"); // // // グラデーションの中間色を追加します // // gradient_light // // .append("stop") // // .attr("offset", "60%") // // .attr("stop-color", "#92ac7d"); // // // グラデーションの終了色を追加します // // gradient_light // // .append("stop") // // .attr("offset", "95%") // // .attr("stop-color", "#b8c8a0"); // // 暗いグラデーションを定義します // 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", "#b8c8a0"); // // グラデーションの中間色を追加します // gradient_dark // .append("stop") // .attr("offset", "60%") // .attr("stop-color", "#92ac7d"); // // グラデーションの終了色を追加します // gradient_dark // .append("stop") // .attr("offset", "95%") // .attr("stop-color", "#6a915c"); // 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})`); // .on("mouseover", handleMouseOver) // マウスオーバー時のイベントを追加 // .on("mouseout", handleMouseOut); // マウスアウト時のイベントを追加 // .attr("class", (d) => (d.country === "United States" ? "highlighted" : "")); // // 領域を描画します // group // .append("path") // .attr("fill", mode === "dark" ? "url(#gradDark)" : "url(#gradLight)") // .attr("fill-opacity", (d) => (d.country === "United States" ? 1.0 : 0.2)) // .attr("d", (d) => area(d.viewss)); // // 線を描画します // group // .append("path") // .attr("fill", "none") // .attr("stroke", (d) => // d.country === "United States" ? "white" : "rgb(250, 245, 240)" // ) // .attr("stroke-width", 2.5) // .attr("stroke-opacity", (d) => (d.country === "United States" ? 0.0 : 0.1)) // .attr("d", (d) => line(d.viewss)); // 領域を描画します group .append("path") .attr("fill", mode === "dark" ? "url(#gradDark)" : "url(#gradLight)") .attr("fill-opacity", 0.7) .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"); // ストロークの太さを指定します // SVG要素を返します return svg.node(); }4a:[{"id":"46671f33c39fed3ab8ec4f6ec9ecc0070696c65064848e82bfbdd5a6632ac913f99b7912a1cf6660d6d4fa1896d2e3eab2a4aee7ff9ea62956e0871d59ac3df9","href":"https://static.observableusercontent.com/files/46671f33c39fed3ab8ec4f6ec9ecc0070696c65064848e82bfbdd5a6632ac913f99b7912a1cf6660d6d4fa1896d2e3eab2a4aee7ff9ea62956e0871d59ac3df9","name":"230917_YouTubeMC_Shiina_Mota.csv","type":"text/csv","lastModified":1694948479155.312,"size":5153747}] 29:{"id":"9f5e462abc281a49","slug":null,"title":"Ridgeline Plot of views of Sheena Mota's music on YouTube","thumbnail":"b3065f48d03d40d9b78ce785ce7507a3c0a594f59ad84954f5b22e1ceabb10c2","access_level":"public","create_time":"$D2023-09-17T10:56:02.294Z","update_time":"$D2023-09-17T11:10:27.628Z","view_time":null,"first_public_time":"$D2023-09-17T10:56:02.294Z","has_unpublished_edits":null,"fork":{"id":"2a63594e869d25e3","slug":null,"title":"Ridgeline Plot of views of Lamp'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":540,"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":"Ridgeline Plot of views of Sheena Mota's music on YouTube","cells":[{"id":521,"value":"# Ridgeline Plot of views of Sheena Mota'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.interpolateRdPu(transformedT); // 変換されたtを使用してカラーマップを生成\n return color;\n}","pinned":false,"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, 29614]\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_Shiina_Mota.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":"data = {\n const data = d3.csvParse(\n await FileAttachment(\"230917_YouTubeMC_Shiina_Mota.csv\").text(),\n d3.autoType\n );\n const dates = Array.from(d3.group(data, (d) => +d.date).keys()).sort(\n d3.ascending\n );\n\n // 最初の10ヶ国を抽出します\n const top10Countries = Array.from(\n d3.groups(data, (d) => d.country),\n ([country]) => country\n ).slice(0, 20);\n\n return {\n dates: dates.map((d) => new Date(d)),\n series: d3\n .groups(data, (d) => d.country)\n .filter(([country]) => top10Countries.includes(country)) // 最初の10ヶ国だけをフィルタリング\n .map(([country, viewss]) => {\n const views = new Map(viewss.map((d) => [+d.date, d.views]));\n return { country, viewss: dates.map((d) => views.get(d)) };\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":"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":"$W4a","stdlib":"1"}} 24:null