25:["$","title",null,{"children":"Spotify Genre Sunburst | tsurezure lab. こちら徒然研究室（仮称） | Observable"}] 49:T43ef,chart = { // データを分割するためのルートを作成 const root = partition(data); // 各ノードに「current」プロパティを追加し、現在の状態を保持 root.each((d) => (d.current = d)); // SVG要素を作成 const svg = d3 .create("svg") // SVGのビューボックスを設定（図形の表示領域を指定） // [x, y, width, height] の形式で指定し、ここでは正方形のサイズを指定 // .attr("viewBox", [0, 0, 675, 675]) .attr("viewBox", [-50, 0, 900, 900]) .style("font", "8px sans-serif"); // dataからコミュニティ、ジャンル、アーティストの数を取得 const counts = countElements(data); // JSONデータから最初の名前（rootの名前）を取得 const firstNodeName = data.name; // 例: dataがJSONデータのルートオブジェクトである場合 // グラフのタイトルテキストを生成し、JSONデータの最初の名前を含める const titleText = `"${firstNodeName}"のリスニングネットワークにおけるジャンル多様性`; const title = svg .append("text") .attr("x", width / 2) .attr("y", 50) .attr("text-anchor", "middle") // .style("font-size", "16px") // .style("font", "18px 'Noto Sans JP', sans-serif") .attr("style", "font-size: 18px; font-weight: bold; fill-opacity: 1.0;") .text(titleText); // タイトルの下にコミュニティ数を表示するテキストを追加 svg .append("text") .attr("x", 15) .attr("y", 80) .attr("style", "font-size: 16px; font-weight: bold; fill-opacity: 1.0;") .text(`コミュニティ数: ${counts.communityCount}`); // タイトルの下にジャンル数を表示するテキストを追加 svg .append("text") .attr("x", 15) .attr("y", 100) // Y座標を変更して改行 .attr("style", "font-size: 16px; font-weight: bold; fill-opacity: 1.0;") .text(`ジャンル数: ${counts.genreCount}`); // タイトルの下にアーティスト数を表示するテキストを追加 svg .append("text") .attr("x", 15) .attr("y", 120) // Y座標をさらに変更して改行 .attr("style", "font-size: 16px; font-weight: bold; fill-opacity: 1.0;") .text(`アーティスト数: ${counts.artistCount}`); svg .append("text") .attr("x", 10) .attr("y", 620) // Y座標をさらに変更して改行 .attr("style", "font-size: 8px; fill-opacity: 1.0;") .text( `徒然研究室（仮称）が2023年12月23日作成。Spotifyデータより${firstNodeName}を起点とした関連アーティストをpopularity 50以上で２次の繋がりまで取得して作成。` ); // グラフ要素を配置するためのグループ（g要素）を作成 const g = svg .append("g") .attr("transform", `translate(${width / 2},${width / 2})`); // パス要素を作成してデータをバインド const path = g .append("g") .selectAll("path") .data(root.descendants().slice(1)) .join("path") .attr("fill", (d) => { // 色を設定（コミュニティごとに異なる色） while (d.depth > 1) d = d.parent; return color(d.data.name); }) .attr("fill-opacity", (d) => (d.children ? 0.6 : 0.05)) .attr("d", arc) .attr("stroke", "#fff") // ストロークの色を白または他の色に設定 .attr("stroke-width", "0.3px"); // ストローク幅を0.5ピクセルに設定 // ツールチップの設定 path.append("title").text( (d) => // マウスオーバー時に表示されるテキストを設定 `${d .ancestors() .map((d) => d.data.name) .reverse() .join("/")}` ); // クリック可能な要素にカーソルを変更し、クリック時の動作を設定 path .filter((d) => d.children) .style("cursor", "pointer") .on("click", clicked); // サンバーストチャートの各ノードにフォントサイズを計算する関数を適用 root.each((d) => { d.fontSize = calculateFontSize(d); }); // ラベル要素を作成 const label = g .append("g") // グループ要素を追加 .attr("pointer-events", "none") // ポインターイベントを無効化 .attr("text-anchor", "middle") // テキストのアンカー位置を中央に設定 .style("user-select", "none") // テキストの選択を無効化 .selectAll("text") // すべてのテキスト要素を選択 .data(root.descendants().slice(1)) // データをバインド .join("text") // テキスト要素を追加 .attr("dy", "0.35em") // テキストの垂直方向の位置調整 .attr("fill-opacity", 1) // ラベルの透明度を設定（1は完全に不透明） .attr("font-size", (d) => d.fontSize) // フォントサイズを設定 .attr("transform", (d) => labelTransform(d.current)) // ラベルの位置を設定 .text((d) => d.data.name); // ラベルのテキストを設定 // // ラベル要素を作成 // const label = g // .append("g") // グループ要素を追加 // .attr("pointer-events", "none") // ポインターイベントを無効化 // .attr("text-anchor", "middle") // テキストのアンカー位置を中央に設定 // .style("user-select", "none") // テキストの選択を無効化 // .selectAll("text") // すべてのテキスト要素を選択 // .data(root.descendants().slice(1)) // データをバインド // .join("text") // テキスト要素を追加 // .attr("dy", "0.35em") // テキストの垂直方向の位置調整 // .attr("fill-opacity", (d) => +labelVisible(d.current)) // ラベルの透明度を設定 // .attr("transform", (d) => labelTransform(d.current)) // ラベルの位置を設定 // .text((d) => d.data.name); // ラベルのテキストを設定 // // ラベル要素を作成 // const label = g // .append("g") // グループ要素を追加 // .attr("pointer-events", "none") // ポインターイベントを無効化 // .attr("text-anchor", "middle") // テキストのアンカー位置を中央に設定 // .style("user-select", "none") // テキストの選択を無効化 // .selectAll("text") // すべてのテキスト要素を選択 // .data(root.descendants().slice(1)) // データをバインド // .join("text") // テキスト要素を追加 // .attr("dy", "0.35em") // テキストの垂直方向の位置調整 // .attr("fill-opacity", 1) // ラベルの透明度を設定（1は完全に不透明） // .attr("transform", (d) => labelTransform(d.current)) // ラベルの位置を設定 // .text((d) => d.data.name); // ラベルのテキストを設定 // グラフの中央に表示するテキスト要素を作成 const centerText = g .append("text") // テキスト要素を追加 .attr("class", "center-text") // クラスを指定 .attr("text-anchor", "middle") // テキストのアンカー位置を中央に設定 .attr("y", 4) // 中心からのY軸オフセット .style("font-size", "14px") // フォントサイズを設定 .style("visibility", "hidden"); // 初期状態では非表示 // ラベルのテキストをラップする関数を呼び出す label.call(wrapLabel, 15); // 1.5は行間の値（em単位） // 親要素の円を作成 const parent = g .append("circle") .datum(root) .attr("r", radius) .attr("fill", "none") .attr("pointer-events", "all") .on("click", clicked); // クリップパスを定義（サイズを大きくする） const clipPath = svg .append("clipPath") .attr("id", "clip-circle") .append("circle") .attr("cx", 0) // 中心座標 .attr("cy", 0) .attr("r", radius / 2 + 16); // 半径を大きくする // 画像を追加 const image = g .append("image") .attr( "xlink:href", // "https://i.scdn.co/im/age/ab6761610000e5eb8f4f1362bbc2ece811d3722d" // "https://i.scdn.co/image/ab6761610000e5eb649fb65d593a716596566a5e" // King Gnu // "https://i.scdn.co/image/ab6761610000e5eb7e34f1a6ce455f3e8a7a61d3" // 藤井風 // "https://i.scdn.co/image/ab6761610000e5eb75061a179925888af1477606" //大貫妙子 "https://i.scdn.co/image/ab6761610000e5eb0200ae3b8094a3b795e51f59" // Lamp ) .attr("x", -radius / 2 - 16) // 画像を中心に配置 .attr("y", -radius / 2 - 16) .attr("width", radius + 36) // 画像のサイズは円の直径に合わせる .attr("height", radius + 36) .attr("clip-path", "url(#clip-circle)") // クリップパスを適用 .style("pointer-events", "none"); // ノードの大きさに応じてフォントサイズを計算する関数 function calculateFontSize(node) { // ここでフォントサイズの計算ロジックを実装します // 例: ノードの面積に応じてフォントサイズを計算する const area = (node.y1 - node.y0) * (node.x1 - node.x0); // 面積に応じてフォントサイズを計算（最小フォントサイズを18に設定） const fontSize = Math.min(60, Math.sqrt(area) * 5) + 5; return fontSize; } // クリック時の動作を定義 function clicked(p) { parent.datum(p.parent || root); root.each( (d) => (d.target = { x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, y0: Math.max(0, d.y0 - p.depth), y1: Math.max(0, d.y1 - p.depth) }) ); const t = g.transition().duration(750); path .transition(t) .tween("data", (d) => { const i = d3.interpolate(d.current, d.target); return (t) => (d.current = i(t)); }) .filter(function (d) { return +this.getAttribute("fill-opacity") || labelVisible(d.target); }) .attr("fill-opacity", (d) => (d.children ? 0.6 : 0.05)) // 透明度を再設定 .attrTween("d", (d) => () => arc(d.current)); label .transition(t) .attr("fill-opacity", (d) => +labelVisible(d.target)) .attrTween("transform", (d) => () => labelTransform(d.current)); // クリックされたノードのデータからnameを取得してテキストに設定 centerText.text(p.data.name).style("visibility", "visible"); // 最初の階層のノードがクリックされた場合、画像を再表示 if (p.depth === 0) { image.style("visibility", "visible"); centerText.style("visibility", "hidden"); } else { image.style("visibility", "hidden"); } } // パスが表示可能かどうかを判定 function arcVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0; } // // ラベルが表示可能かどうかを判定 function labelVisible(d) { return d.y1 <= 4 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.001; //0.03 // return d.y1 >= 0.02; // 例: 0.02 はラベルを表示するための閾値 } // function labelVisible(d) { // 以下の条件を調整して、極小のノードに対してもラベルを表示 // return d.y1 >= 0.02; // 例: 0.02 はラベルを表示するための閾値 // } // ラベルの位置を変更 function labelTransform(d) { const x = (((d.x0 + d.x1) / 2) * 180) / Math.PI; const y = ((d.y0 + d.y1) / 2) * radius; return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`; } // // ラベルを適切に折り返す関数 // function wrapLabel(text, maxLength) { // text.each(function () { // const text = d3.select(this); // const words = text.text().split(/\s+/); // 空白で単語に分割 // let line = []; // let tspan = text.text(null).append("tspan").attr("x", 0).attr("y", 0); // words.forEach((word) => { // line.push(word); // tspan.text(line.join(" ")); // if (tspan.text().length > maxLength) { // line.pop(); // 現在の単語を取り除く // tspan.text(line.join(" ")); // 改行前のテキストを設定 // line = [word]; // 新しい行を開始 // tspan = text // .append("tspan") // .attr("x", 0) // .attr("y", 0) // .attr("dy", "1em") // .text(word); // } // }); // }); // } function wrapLabel(text, maxLength) { text.each(function () { const text = d3.select(this); const words = text.text().split(/\s+/); // 空白で単語に分割 let line = []; let lineNumber = 0; let tspan = text.text(null).append("tspan").attr("x", 0).attr("y", 0); words.forEach((word) => { if (lineNumber < 3) { // 最大3行まで line.push(word); tspan.text(line.join(" ")); if (tspan.text().length > maxLength) { if (lineNumber === 2) { // 3行目での処理 tspan.text(line.join(" ") + "..."); // 3行目は省略記号を追加 return; // これ以上の行は追加しない } line.pop(); // 現在の単語を取り除く tspan.text(line.join(" ")); // 改行前のテキストを設定 line = [word]; // 新しい行を開始 tspan = text .append("tspan") .attr("x", 0) .attr("y", 0) .attr("dy", ++lineNumber * 1 + "em") .text(word); } } }); }); } // // JSONデータからコミュニティ、ジャンル、アーティストの数を計算する関数 // function countElements(data) { // let communityCount = 0; // let genreCount = 0; // let artistCount = 0; // if (data && data.children) { // communityCount = data.children.length; // data.children.forEach((community) => { // if (community.children) { // genreCount += community.children.length; // community.children.forEach((genre) => { // if (genre.children) { // artistCount += genre.children.length; // } // }); // } // }); // } // return { communityCount, genreCount, artistCount }; // } // // JSONデータからコミュニティ、ジャンル、アーティストの数を計算する関数 // function countElements(data) { // let communityCount = 0; // let genreCount = 0; // const uniqueArtists = new Set(); // ユニークなアーティストを格納するセット // if (data && data.children) { // communityCount = data.children.length; // data.children.forEach((community) => { // if (community.children) { // genreCount += community.children.length; // community.children.forEach((genre) => { // if (genre.children) { // genre.children.forEach((artist) => { // if (artist.name) { // uniqueArtists.add(artist.name); // アーティスト名をセットに追加 // } // }); // } // }); // } // }); // } // return { // communityCount, // genreCount, // artistCount: uniqueArtists.size // ユニークなアーティスト数をセットのサイズから取得 // }; // } // JSONデータからコミュニティ、ジャンル、アーティストの数を計算する関数 function countElements(data) { let communityCount = 0; const uniqueGenres = new Set(); // ユニークなジャンルを格納するセット const uniqueArtists = new Set(); // ユニークなアーティストを格納するセット if (data && data.children) { communityCount = data.children.length; data.children.forEach((community) => { if (community.children) { community.children.forEach((genre) => { if (genre.name) { uniqueGenres.add(genre.name); // ジャンル名をセットに追加 } if (genre.children) { genre.children.forEach((artist) => { if (artist.name) { uniqueArtists.add(artist.name); // アーティスト名をセットに追加 } }); } }); } }); } return { communityCount, genreCount: uniqueGenres.size, // ユニークなジャンル数をセットのサイズから取得 artistCount: uniqueArtists.size // ユニークなアーティスト数をセットのサイズから取得 }; } // テキスト要素を追加 svg .append("text") .attr("stroke", "#FBFAF5") // テキストのストロークの色を赤に設定 .attr("stroke-width", 0.2) // ストロークの太さを調整 .attr("x", 15) .attr("y", 140) .attr("font-size", 12) .attr("font-weight", "bold") // .attr("fill", "blue") // テキストの色を青に設定 .text( `ジャンル数/100組: ${( (counts.genreCount / counts.artistCount) * 100 ).toFixed(1)}` ); return svg.node(); }4a:[{"id":"c7f6e1c6b20d85a6513950d7802f98be02536ddcf61e98bcc6ee42c8c7b63ae90ab2fa522db012851e045250f4da4ca6a30e70fca739ed45fb52e2549b759570","href":"https://static.observableusercontent.com/files/c7f6e1c6b20d85a6513950d7802f98be02536ddcf61e98bcc6ee42c8c7b63ae90ab2fa522db012851e045250f4da4ca6a30e70fca739ed45fb52e2549b759570","name":"231217_新しい学校のリーダーズ_sunburst@1.json","type":"application/json","lastModified":1702746685883.894,"size":63753},{"id":"62a819561f9e2f966c3b5f0bf662a98b5a3e677b7d986b58915b1608a165a300a78aa2ae45caebf420e431dd1e7bf481484defcd9e329085d5ba8f6e6832ca84","href":"https://static.observableusercontent.com/files/62a819561f9e2f966c3b5f0bf662a98b5a3e677b7d986b58915b1608a165a300a78aa2ae45caebf420e431dd1e7bf481484defcd9e329085d5ba8f6e6832ca84","name":"231217_King Gnu_sunburst@1.json","type":"application/json","lastModified":1702761151083.761,"size":28712},{"id":"74e2f7d5c75ed7658c678d4146fb7d1b04dc5eab1e8d3129617b78a157773776478bf070dbfa9fabcc81489803db861265ea57bcf510d3c12c6adbc42bb35ff9","href":"https://static.observableusercontent.com/files/74e2f7d5c75ed7658c678d4146fb7d1b04dc5eab1e8d3129617b78a157773776478bf070dbfa9fabcc81489803db861265ea57bcf510d3c12c6adbc42bb35ff9","name":"231217_藤井風_sunburst.json","type":"application/json","lastModified":1702807072132.651,"size":26992},{"id":"f2ae4bf6ee2a14cf0cbce05741a6079e03e2e3b98cc25cc73b2086a92f117e7839c9d4006fccb09345343035094dbc6c6490f5e6de7568d48b9ae610a75289fd","href":"https://static.observableusercontent.com/files/f2ae4bf6ee2a14cf0cbce05741a6079e03e2e3b98cc25cc73b2086a92f117e7839c9d4006fccb09345343035094dbc6c6490f5e6de7568d48b9ae610a75289fd","name":"231223_大貫妙子_sunburst.json","type":"application/json","lastModified":1703344289056.995,"size":30600},{"id":"04273f36492f51fe28562faee495f85520eb80051a260eb477e3d53dd775ca1e0291c9c38a30ba0c98a4fd56549ba3f06798a5426bb432a4c0d9417edaa9a66d","href":"https://static.observableusercontent.com/files/04273f36492f51fe28562faee495f85520eb80051a260eb477e3d53dd775ca1e0291c9c38a30ba0c98a4fd56549ba3f06798a5426bb432a4c0d9417edaa9a66d","name":"231223_Lamp_sunburst.json","type":"application/json","lastModified":1703359995554.977,"size":150387},{"id":"a2d24b40b233b12c5525b82e1cd2f3e35db9217a4f7282c9d0c21d40e1aabf64123e11ec744b5c194e0cae756c9b8dfd90a9f8b9a37906662f0c4b8c89e58101","href":"https://static.observableusercontent.com/files/a2d24b40b233b12c5525b82e1cd2f3e35db9217a4f7282c9d0c21d40e1aabf64123e11ec744b5c194e0cae756c9b8dfd90a9f8b9a37906662f0c4b8c89e58101","name":"231223_Lamp_sunburst@1.json","type":"application/json","lastModified":1703361682204.927,"size":38211}] 29:{"id":"4243ed05d005b2f1","slug":null,"title":"Spotify Genre Sunburst","thumbnail":"560af1b703aa6d98f7178a918062b084e1c946f8ba071dbf14a73b210d9e0454","access_level":"public","create_time":"$D2023-12-16T05:52:56.096Z","update_time":"$D2024-01-12T07:47:35.825Z","view_time":null,"first_public_time":"$D2023-12-16T05:52:56.096Z","has_unpublished_edits":null,"fork":{"id":"0d337646f6871128","slug":"zoomable-sunburst","title":"Zoomable Sunburst","owner":{"id":"700ba6e3196f655d","login":"lakshmi","name":"Lakshmi Seelam"}},"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":760,"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":"Spotify Genre Sunburst","cells":[{"id":0,"value":"md`# Spotify Genre Sunburst`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"data = FileAttachment(\"231223_Lamp_sunburst@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"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"},{"id":3,"value":"// data = FileAttachment(\"231217_King Gnu_sunburst@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"// partition = data => {\n// const root = d3.hierarchy(data)\n// .sum(d => d.value)\n// .sort((a, b) => b.value - a.value);\n// return d3.partition()\n// .size([2 * Math.PI, root.height + 1])\n// (root);\n// }\n\npartition = data => {\n // const root = d3.hierarchy(data)\n // .sum(d => 1) // すべてのノードに1という固定値を割り当てる\n // .sort((a, b) => b.value - a.value);\n\n // const root = d3.hierarchy(data)\n // .sum(d => 1) // すべてのノードに等しい重みを割り当て\n // .sort((a, b) => b.height - a.height);\n\n const root = d3.hierarchy(data)\n .sum(d => d.children ? 0 : 1) // リーフノードに1、それ以外のノードに0を割り当てる\n .sort((a, b) => b.value - a.value);\n\n\n return d3.partition()\n .size([2 * Math.PI, root.height + 1])\n (root);\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":121,"value":"color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, data.children.length + 1))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"format = d3.format(\",d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"width = 675 // 932","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"radius = width / 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"// arc = d3.arc()\n// .startAngle(d => d.x0)\n// .endAngle(d => d.x1)\n// .padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005))\n// .padRadius(radius * 1.5)\n// .innerRadius(d => d.y0 * radius)\n// .outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1))\n\n// arc = d3.arc()\n// .startAngle(d => d.x0)\n// .endAngle(d => d.x1)\n// // .padAngle() と .padRadius() を削除またはコメントアウト\n// //.padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005))\n// //.padRadius(radius * 1.5)\n// .innerRadius(d => d.y0 * radius)\n// .outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1));\n\narc = d3.arc()\n .startAngle(d => d.x0)\n .endAngle(d => d.x1)\n .innerRadius(d => d.y0 * radius)\n .outerRadius(d => d.y1 * radius); // `-1` を削除しました\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\")","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