25:["$","title",null,{"children":"J-POP in the world excluding Japan | tsurezure lab. こちら徒然研究室（仮称） | Observable"}] 49:T2da0,chart３ = { // SVG要素の生成 const svg = d3 .create("svg") // svg要素を作成 .attr("viewBox", [0, 0, width, height]) // ビューボックスを設定 .attr("width", width) // 幅を設定 .attr("height", height) // 高さを設定 .attr( "style", "max-width: 100%; height: 675; font: 10px 'Noto Sans JP', sans-serif; font-weight: bold;" ); const color = d3.scaleOrdinal(d3.schemeTableau10); // カテゴリ10の色スキームを使用 // 影を生成するためのフィルターを作成します。 const shadow = DOM.uid("shadow"); svg .append("filter") .attr("id", shadow.id) .append("feDropShadow") .attr("flood-opacity", 0.3) .attr("dx", 0) .attr("stdDeviation", 3); // グループ要素の追加 const g = svg.append("g").attr("class", "treemap-container"); // // アーティスト名のテキストを描画 // g.selectAll("text.artist") // .data(root.children) // .join("text") // .attr("class", "artist") // .attr("x", (d) => (d.x0 + d.x1) / 2) // 子ノードの中央X座標を計算 // .attr("y", (d) => (d.y0 + d.y1) / 2) // 子ノードの中央Y座標を計算 // .attr("dy", "0.35em") // テキストを縦の中心に配置するために調整 // .style("text-anchor", "middle") // テキストを中央揃えに // .attr("fill", "gray") // フォントの色を灰色に設定 // .style("font-size", (d) => { // const cellWidth = d.x1 - d.x0; // 子ノードの横幅 // const textLength = d.data.name.length; // テキストの長さ // const isAlphabetOnly = /^[A-Za-z\s]+$/.test(d.data.name); // アルファベットのみかどうかをチェック // const isJapanese = /[\u3040-\u30FF\u3400-\u4DBF\u4E00-\u9FFF]+/.test( // d.data.name // ); // 日本語が含まれているかどうかをチェック // let fontSizeMultiplier = 1; // フォントサイズの倍率の初期値 // if (isAlphabetOnly) { // fontSizeMultiplier = 1.2; // アルファベットのみの場合は倍率を上げる // } else if (isJapanese) { // fontSizeMultiplier = 0.8; // 日本語が含まれている場合は倍率を下げる // } // const fontSize = (cellWidth / textLength) * fontSizeMultiplier; // 倍率を適用したフォントサイズを計算 // return `${fontSize}px`; // フォントサイズを設定 // }) // .text((d) => d.data.name); // 葉ノードの処理 const leaf = g .selectAll("g.leaf") // クラスが "leaf" のグループ要素を選択 .data(root.leaves()) // ルートの葉ノードをデータとしてバインド .join("g") // グループ要素を追加または既存の要素と結合 // .attr("filter", shadow) .attr("class", "leaf") // グループ要素にクラス属性 "leaf" を設定 .attr("transform", (d) => `translate(${d.x0},${d.y0})`); // グループ要素の位置を設定 // .style("font-size", 30); // フォントサイズを設定 // ツールチップのタイトルを追加 leaf .append("title") .text( (d) => `${d.parent.data.name}-${d.data.name}\n${ d.value.toLocaleString() + " Views" }` ); // 葉ノードの矩形を描画 leaf .append("rect") // .attr("fill", (d) => colorScale(d.parent.data.name)) .attr("fill", (d) => { if (d.depth === 1) { // ルートの子供（国）に対して異なる色を使用 return color(d.data.name); } else { // アーティストのセルは親の国の色を引き継ぐ while (d.depth > 2) d = d.parent; // 親を国の階層までたどる return color(d.data.name); // 親の国の色を設定 } }) .attr("opacity", 0.7) .attr("width", (d) => d.x1 - d.x0) .attr("height", (d) => d.y1 - d.y0) .attr("rx", 3) .attr("ry", 3); // 複数行のテキストを追加します。最後の行は値を表示し、特定の書式を持っています。 leaf .append("text") // text要素を追加 .attr("fill", "#FFFFFF") // フォントの色を白に設定 .attr("opacity", 0.9) .attr("clip-path", (d) => d.clipUid) // clip-pathを設定 .selectAll("tspan") // すべてのtspan要素を選択 .data( (d) => d.data.name.split(/(?=[A-Z][a-z])|\s+/g) //.concat(format(d.value / 100)) // テキストデータを処理 ) .join("tspan") // tspan要素を追加 .attr("x", 3) // x位置を設定フォルト3 .attr("y", (d, i) => (i === 0 ? "1em" : `${1 + i * 0.9}em`)) // y位置を動的に設定。1行目は1em、その後はそれに続けて配置 .attr("font-size", (d, i, nodes) => { const parent = nodes[i].parentNode.__data__; const cellWidth = parent.x1 - parent.x0; const cellHeight = parent.y1 - parent.y0; const textLength = d.length; //ラベルのテキストの文字数を加味 const fontSize = Math.min( cellWidth / textLength, cellHeight / (nodes.length + 1) ); return fontSize * 1.3 + "px"; }) .text((d) => d); // テキストを設定 // タイトルを追加 const title = svg .append("text") // text要素をsvgに追加 .attr("class", "title") // クラス名を設定 .attr("x", width / 2) // 幅の中央に配置 .attr("y", 19) // 上から20pxの位置に配置 .attr("text-anchor", "middle") // 中央揃えに設定 .style("font-size", "39px") // フォントサイズを設定 39 .text("J-POPアーティストの「日本以外での聴かれ方」を可視化してみる") // タイトルのテキストを設定 .attr("fill", "#535353"); // キャプションテキストを追加 svg .append("text") .attr("x", 10) // 左から10pxの位置 .attr("y", height + 13) // 下から10pxの位置（キャプションのベースライン） .text( "YouTubeデータより徒然研究室（仮称）作成。データ取得日は2023年10月28日。対象期間は23年9月28日から10月25日。セルの面積は各国の視聴回数に対応する。 Billboard JAPAN Global Japan Songs excl. Japan 上位10組のうち現役アーティストを分析対象とし、YouTubeデータより日本以外の99カ国を採録。" ) // キャプションのテキスト .attr("fill", "#535353") .attr( "style", "max-width: 100%; height: auto; font: 10px 'Noto Sans JP', sans-serif; font-weight: normal;" ) .style("font-size", "8.3px"); // フォントサイズを12pxに設定 // 既存のグループ要素と葉ノードをタイトルの下に移動 g.attr("transform", `translate(0, ${5})`); // y方向に5px下に移動 // 選択された国に基づいてハイライトを更新する関数 function updateHighlight(selectedCountries) { svg.selectAll("g.leaf rect").attr("opacity", (d) => { // 選択なし（配列が空）の場合はすべての透明度をデフォルトに戻す if (selectedCountries.length === 0) return 0.7; let node = d; while (node.depth > 2) node = node.parent; // depthが2より大きい間、親ノードを辿る // 選択された国に含まれていれば透明度を高くし、そうでなければ低くする return selectedCountries.includes(node.data.name) ? 0.95 : 0.2; }); } // `selectedCountry`の選択肢に基づいてツリーマップを更新 // `selectedCountry`が配列であるため、その値をそのまま渡す updateHighlight(selectedCountry); // アーティスト名のテキストを描画 g.selectAll("text.artist") .data(root.children) .join("text") .attr("class", "artist") .attr("x", (d) => (d.x0 + d.x1) / 2) // 子ノードの中央X座標を計算 .attr("y", (d) => (d.y0 + d.y1) / 2) // 子ノードの中央Y座標を計算 .attr("dy", "0.35em") // テキストを縦の中心に配置するために調整 .style("text-anchor", "middle") // テキストを中央揃えに .attr("fill", "black") // フォントの色を灰色に設定 .attr("fill-opacity", "0.5") // テキストを半透明に設定 .style("stroke", "white") // テキストのストロークを白色に設定 .style("stroke-width", "1.5px") // ストロークの太さを設定 .style("paint-order", "stroke fill") // this CSS attribute is the key (along with setting both stroke and fill) .style("font-size", (d) => { const cellWidth = d.x1 - d.x0; // 子ノードの横幅 const textLength = d.data.name.length; // テキストの長さ const isAlphabetOnly = /^[A-Za-z\s]+$/.test(d.data.name); // アルファベットのみかどうかをチェック const isJapanese = /[\u3040-\u30FF\u3400-\u4DBF\u4E00-\u9FFF]+/.test( d.data.name ); // 日本語が含まれているかどうかをチェック let fontSizeMultiplier = 1; // フォントサイズの倍率の初期値 if (isAlphabetOnly) { fontSizeMultiplier = 1.2; // アルファベットのみの場合は倍率を上げる } else if (isJapanese) { fontSizeMultiplier = 0.8; // 日本語が含まれている場合は倍率を下げる } const fontSize = (cellWidth / textLength) * fontSizeMultiplier; // 倍率を適用したフォントサイズを計算 return `${fontSize}px`; // フォントサイズを設定 }) .text((d) => d.data.name); // // アーティスト名のテキストを描画 // g.selectAll("text.artist") // .data(root.children) // .join("text") // .attr("class", "artist") // .attr("x", (d) => (d.x0 + d.x1) / 2) // 子ノードの中央X座標を計算 // .attr("y", (d) => (d.y0 + d.y1) / 2) // 子ノードの中央Y座標を計算 // .attr("dy", "0.35em") // テキストを縦の中心に配置するために調整 // .style("text-anchor", "middle") // テキストを中央揃えに // .attr("fill", "gray") // フォントの色を灰色に設定 // .attr("fill-opacity", "0.5") // テキストを半透明に設定 // .style("stroke", "white") // テキストのストロークを白色に設定 // // .style("text-shadow", "1px 1px 2px rgba(255, 255, 255, 0.5)") // アウトラインを半透明の白で描画 // .style("stroke-width", "1px") // ストロークの太さを設定 // // .style("paint-order", "nomal") // this CSS attribute is the key (along with setting both stroke and fill) // .style("font-size", (d) => { // const cellWidth = d.x1 - d.x0; // 子ノードの横幅 // const textLength = d.data.name.length; // テキストの長さ // const isAlphabetOnly = /^[A-Za-z\s]+$/.test(d.data.name); // アルファベットのみかどうかをチェック // const isJapanese = /[\u3040-\u30FF\u3400-\u4DBF\u4E00-\u9FFF]+/.test( // d.data.name // ); // 日本語が含まれているかどうかをチェック // let fontSizeMultiplier = 1; // フォントサイズの倍率の初期値 // if (isAlphabetOnly) { // fontSizeMultiplier = 1.2; // アルファベットのみの場合は倍率を上げる // } else if (isJapanese) { // fontSizeMultiplier = 0.8; // 日本語が含まれている場合は倍率を下げる // } // const fontSize = (cellWidth / textLength) * fontSizeMultiplier; // 倍率を適用したフォントサイズを計算 // return `${fontSize}px`; // フォントサイズを設定 // }) // .text((d) => d.data.name); return svg.node(); }4a:T2109,chart = { // SVG要素の生成 const svg = d3 .create("svg") // svg要素を作成 .attr("viewBox", [0, 0, width, height]) // ビューボックスを設定 .attr("width", width) // 幅を設定 .attr("height", height) // 高さを設定 .attr( "style", "max-width: 100%; height: 675; font: 10px 'Noto Sans JP', sans-serif; font-weight: bold;" ); const color = d3.scaleOrdinal(d3.schemeTableau10); // カテゴリ10の色スキームを使用 // 影を生成するためのフィルターを作成します。 const shadow = DOM.uid("shadow"); svg .append("filter") .attr("id", shadow.id) .append("feDropShadow") .attr("flood-opacity", 0.3) .attr("dx", 0) .attr("stdDeviation", 3); // グループ要素の追加 const g = svg.append("g").attr("class", "treemap-container"); // アーティスト名のテキストを描画 g.selectAll("text.artist") .data(root.children) .join("text") .attr("class", "artist") .attr("x", (d) => (d.x0 + d.x1) / 2) // 子ノードの中央X座標を計算 .attr("y", (d) => (d.y0 + d.y1) / 2) // 子ノードの中央Y座標を計算 .attr("dy", "0.35em") // テキストを縦の中心に配置するために調整 .style("text-anchor", "middle") // テキストを中央揃えに .attr("fill", "gray") // フォントの色を灰色に設定 .style("font-size", (d) => { const cellWidth = d.x1 - d.x0; // 子ノードの横幅 const textLength = d.data.name.length; // テキストの長さ const isAlphabetOnly = /^[A-Za-z\s]+$/.test(d.data.name); // アルファベットのみかどうかをチェック const isJapanese = /[\u3040-\u30FF\u3400-\u4DBF\u4E00-\u9FFF]+/.test( d.data.name ); // 日本語が含まれているかどうかをチェック let fontSizeMultiplier = 1; // フォントサイズの倍率の初期値 if (isAlphabetOnly) { fontSizeMultiplier = 1.2; // アルファベットのみの場合は倍率を上げる } else if (isJapanese) { fontSizeMultiplier = 0.8; // 日本語が含まれている場合は倍率を下げる } const fontSize = (cellWidth / textLength) * fontSizeMultiplier; // 倍率を適用したフォントサイズを計算 return `${fontSize}px`; // フォントサイズを設定 }) .text((d) => d.data.name); // 葉ノードの処理 const leaf = g .selectAll("g.leaf") // クラスが "leaf" のグループ要素を選択 .data(root.leaves()) // ルートの葉ノードをデータとしてバインド .join("g") // グループ要素を追加または既存の要素と結合 // .attr("filter", shadow) .attr("class", "leaf") // グループ要素にクラス属性 "leaf" を設定 .attr("transform", (d) => `translate(${d.x0},${d.y0})`); // グループ要素の位置を設定 // .style("font-size", 30); // フォントサイズを設定 // ツールチップのタイトルを追加 leaf .append("title") .text( (d) => `${d.parent.data.name}-${d.data.name}\n${ d.value.toLocaleString() + " Views" }` ); // 葉ノードの矩形を描画 leaf .append("rect") // .attr("fill", (d) => colorScale(d.parent.data.name)) .attr("fill", (d) => { if (d.depth === 1) { // ルートの子供（国）に対して異なる色を使用 return color(d.data.name); } else { // アーティストのセルは親の国の色を引き継ぐ while (d.depth > 2) d = d.parent; // 親を国の階層までたどる return color(d.data.name); // 親の国の色を設定 } }) .attr("opacity", 0.7) .attr("width", (d) => d.x1 - d.x0) .attr("height", (d) => d.y1 - d.y0) .attr("rx", 3) .attr("ry", 3); // 複数行のテキストを追加します。最後の行は値を表示し、特定の書式を持っています。 leaf .append("text") // text要素を追加 .attr("fill", "#FFFFFF") // フォントの色を白に設定 .attr("opacity", 0.9) .attr("clip-path", (d) => d.clipUid) // clip-pathを設定 .selectAll("tspan") // すべてのtspan要素を選択 .data( (d) => d.data.name.split(/(?=[A-Z][a-z])|\s+/g) //.concat(format(d.value / 100)) // テキストデータを処理 ) .join("tspan") // tspan要素を追加 .attr("x", 3) // x位置を設定フォルト3 .attr("y", (d, i) => (i === 0 ? "1em" : `${1 + i * 0.9}em`)) // y位置を動的に設定。1行目は1em、その後はそれに続けて配置 .attr("font-size", (d, i, nodes) => { const parent = nodes[i].parentNode.__data__; const cellWidth = parent.x1 - parent.x0; const cellHeight = parent.y1 - parent.y0; const textLength = d.length; //ラベルのテキストの文字数を加味 const fontSize = Math.min( cellWidth / textLength, cellHeight / (nodes.length + 1) ); return fontSize * 1.3 + "px"; }) .text((d) => d); // テキストを設定 // タイトルを追加 const title = svg .append("text") // text要素をsvgに追加 .attr("class", "title") // クラス名を設定 .attr("x", width / 2) // 幅の中央に配置 .attr("y", 19) // 上から20pxの位置に配置 .attr("text-anchor", "middle") // 中央揃えに設定 .style("font-size", "39px") // フォントサイズを設定 39 .text("J-POPアーティストの「日本以外での聴かれ方」を可視化してみる") // タイトルのテキストを設定 .attr("fill", "#535353"); // キャプションテキストを追加 svg .append("text") .attr("x", 10) // 左から10pxの位置 .attr("y", height + 13) // 下から10pxの位置（キャプションのベースライン） .text( "YouTubeデータより徒然研究室（仮称）作成。データ取得日は2023年10月28日。対象期間は23年9月28日から10月25日。セルの面積は各国の視聴回数に対応する。 Billboard JAPAN Global Japan Songs excl. Japan 上位10組のうち現役アーティストを分析対象とし、YouTubeデータより日本以外の99カ国を採録。" ) // キャプションのテキスト .attr("fill", "#535353") .attr( "style", "max-width: 100%; height: auto; font: 10px 'Noto Sans JP', sans-serif; font-weight: normal;" ) .style("font-size", "8.3px"); // フォントサイズを12pxに設定 // 既存のグループ要素と葉ノードをタイトルの下に移動 g.attr("transform", `translate(0, ${5})`); // y方向に5px下に移動 // // `selectedCountry`の値を参照することでリアクティブな更新をトリガーする // const country = selectedCountry.value; // // 選択された国に基づいてハイライトを更新する関数 // function updateHighlight(selectedCountry) { // svg.selectAll("g.leaf rect").attr("opacity", (d) => { // // 選択なしの場合はすべての透明度をデフォルトに戻す // if (selectedCountry === "") return 0.7; // let node = d; // while (node.depth > 2) node = node.parent; // depthが2より大きい間、親ノードを辿る // return node.data.name === selectedCountry ? 0.95 : 0.2; // 選択された国は透明度を0.7に、それ以外は0.1に // }); // } // // `selectedCountry`の選択肢に基づいてツリーマップを更新 // updateHighlight(selectedCountry); // 選択された国に基づいてハイライトを更新する関数 function updateHighlight(selectedCountries) { svg.selectAll("g.leaf rect").attr("opacity", (d) => { // 選択なし（配列が空）の場合はすべての透明度をデフォルトに戻す if (selectedCountries.length === 0) return 0.7; let node = d; while (node.depth > 2) node = node.parent; // depthが2より大きい間、親ノードを辿る // 選択された国に含まれていれば透明度を高くし、そうでなければ低くする return selectedCountries.includes(node.data.name) ? 0.95 : 0.2; }); } // `selectedCountry`の選択肢に基づいてツリーマップを更新 // `selectedCountry`が配列であるため、その値をそのまま渡す updateHighlight(selectedCountry); return svg.node(); }4b:T54c,

「J-POPでの日本以外での聴かれ方」を可視化してみる

4c:T255a,chart_2 = { // SVG要素の生成 const svg = d3 .create("svg") // svg要素を作成 .attr("viewBox", [0, 0, width, height]) // ビューボックスを設定 .attr("width", width) // 幅を設定 .attr("height", height) // 高さを設定 .attr( "style", "max-width: 100%; height: 675; font: 10px 'Noto Sans JP', sans-serif; font-weight: bold;" ); const color = d3.scaleOrdinal(d3.schemeTableau10); // カテゴリ10の色スキームを使用 // 影を生成するためのフィルターを作成します。 const shadow = DOM.uid("shadow"); svg .append("filter") .attr("id", shadow.id) .append("feDropShadow") .attr("flood-opacity", 0.3) .attr("dx", 0) .attr("stdDeviation", 3); // グループ要素の追加 const g = svg.append("g").attr("class", "treemap-container"); // // アーティスト名のテキストを描画 // g.selectAll("text.artist") // .data(root.children) // .join("text") // .attr("class", "artist") // .attr("x", (d) => (d.x0 + d.x1) / 2) // 子ノードの中央X座標を計算 // .attr("y", (d) => (d.y0 + d.y1) / 2) // 子ノードの中央Y座標を計算 // .attr("dy", "0.35em") // テキストを縦の中心に配置するために調整 // .style("text-anchor", "middle") // テキストを中央揃えに // .attr("fill", "gray") // フォントの色を灰色に設定 // .style("font-size", (d) => { // const cellWidth = d.x1 - d.x0; // 子ノードの横幅 // const textLength = d.data.name.length; // テキストの長さ // const isAlphabetOnly = /^[A-Za-z\s]+$/.test(d.data.name); // アルファベットのみかどうかをチェック // const isJapanese = /[\u3040-\u30FF\u3400-\u4DBF\u4E00-\u9FFF]+/.test( // d.data.name // ); // 日本語が含まれているかどうかをチェック // let fontSizeMultiplier = 1; // フォントサイズの倍率の初期値 // if (isAlphabetOnly) { // fontSizeMultiplier = 1.2; // アルファベットのみの場合は倍率を上げる // } else if (isJapanese) { // fontSizeMultiplier = 0.8; // 日本語が含まれている場合は倍率を下げる // } // const fontSize = (cellWidth / textLength) * fontSizeMultiplier; // 倍率を適用したフォントサイズを計算 // return `${fontSize}px`; // フォントサイズを設定 // }) // .text((d) => d.data.name); // 葉ノードの処理 const leaf = g .selectAll("g.leaf") // クラスが "leaf" のグループ要素を選択 .data(root.leaves()) // ルートの葉ノードをデータとしてバインド .join("g") // グループ要素を追加または既存の要素と結合 // .attr("filter", shadow) .attr("class", "leaf") // グループ要素にクラス属性 "leaf" を設定 .attr("transform", (d) => `translate(${d.x0},${d.y0})`); // グループ要素の位置を設定 // .style("font-size", 30); // フォントサイズを設定 // ツールチップのタイトルを追加 leaf .append("title") .text( (d) => `${d.parent.data.name}-${d.data.name}\n${ d.value.toLocaleString() + " Views" }` ); // 葉ノードの矩形を描画 leaf .append("rect") // .attr("fill", (d) => colorScale(d.parent.data.name)) .attr("fill", (d) => { if (d.depth === 1) { // ルートの子供（国）に対して異なる色を使用 return color(d.data.name); } else { // アーティストのセルは親の国の色を引き継ぐ while (d.depth > 2) d = d.parent; // 親を国の階層までたどる return color(d.data.name); // 親の国の色を設定 } }) .attr("opacity", 0.7) .attr("width", (d) => d.x1 - d.x0) .attr("height", (d) => d.y1 - d.y0) .attr("rx", 3) .attr("ry", 3); // 複数行のテキストを追加します。最後の行は値を表示し、特定の書式を持っています。 leaf .append("text") // text要素を追加 .attr("fill", "#FFFFFF") // フォントの色を白に設定 .attr("opacity", 0.9) .attr("clip-path", (d) => d.clipUid) // clip-pathを設定 .selectAll("tspan") // すべてのtspan要素を選択 .data( (d) => d.data.name.split(/(?=[A-Z][a-z])|\s+/g) //.concat(format(d.value / 100)) // テキストデータを処理 ) .join("tspan") // tspan要素を追加 .attr("x", 3) // x位置を設定フォルト3 .attr("y", (d, i) => (i === 0 ? "1em" : `${1 + i * 0.9}em`)) // y位置を動的に設定。1行目は1em、その後はそれに続けて配置 .attr("font-size", (d, i, nodes) => { const parent = nodes[i].parentNode.__data__; const cellWidth = parent.x1 - parent.x0; const cellHeight = parent.y1 - parent.y0; const textLength = d.length; //ラベルのテキストの文字数を加味 const fontSize = Math.min( cellWidth / textLength, cellHeight / (nodes.length + 1) ); return fontSize * 1.3 + "px"; }) .text((d) => d); // テキストを設定 // タイトルを追加 const title = svg .append("text") // text要素をsvgに追加 .attr("class", "title") // クラス名を設定 .attr("x", width / 2) // 幅の中央に配置 .attr("y", 19) // 上から20pxの位置に配置 .attr("text-anchor", "middle") // 中央揃えに設定 .style("font-size", "39px") // フォントサイズを設定 39 .text("J-POPアーティストの「日本以外での聴かれ方」を可視化してみる") // タイトルのテキストを設定 .attr("fill", "#535353"); // キャプションテキストを追加 svg .append("text") .attr("x", 10) // 左から10pxの位置 .attr("y", height + 13) // 下から10pxの位置（キャプションのベースライン） .text( "YouTubeデータより徒然研究室（仮称）作成。データ取得日は2023年10月28日。対象期間は23年9月28日から10月25日。セルの面積は各国の視聴回数に対応する。 Billboard JAPAN Global Japan Songs excl. Japan 上位10組のうち現役アーティストを分析対象とし、YouTubeデータより日本以外の99カ国を採録。" ) // キャプションのテキスト .attr("fill", "#535353") .attr( "style", "max-width: 100%; height: auto; font: 10px 'Noto Sans JP', sans-serif; font-weight: normal;" ) .style("font-size", "8.3px"); // フォントサイズを12pxに設定 // 既存のグループ要素と葉ノードをタイトルの下に移動 g.attr("transform", `translate(0, ${5})`); // y方向に5px下に移動 // 選択された国に基づいてハイライトを更新する関数 function updateHighlight(selectedArtists) { svg.selectAll("g.leaf rect").attr("opacity", (d) => { // 選択なし（配列が空）の場合はすべての透明度をデフォルトに戻す if (selectedArtists.length === 0) return 0.7; let node = d; while (node.depth > 1) node = node.parent; // depthが2より大きい間、親ノードを辿る // 選択された国に含まれていれば透明度を高くし、そうでなければ低くする return selectedArtists.includes(node.data.name) ? 0.85 : 0.2; }); } // `selectedCountry`の選択肢に基づいてツリーマップを更新 // `selectedCountry`が配列であるため、その値をそのまま渡す updateHighlight(selectedArtist); // アーティスト名のテキストを描画 g.selectAll("text.artist") .data(root.children) .join("text") .attr("class", "artist") .attr("x", (d) => (d.x0 + d.x1) / 2) // 子ノードの中央X座標を計算 .attr("y", (d) => (d.y0 + d.y1) / 2) // 子ノードの中央Y座標を計算 .attr("dy", "0.35em") // テキストを縦の中心に配置するために調整 .style("text-anchor", "middle") // テキストを中央揃えに .attr("fill", "black") // フォントの色を灰色に設定 .attr("fill-opacity", "0.5") // テキストを半透明に設定 .style("stroke", "white") // テキストのストロークを白色に設定 .style("stroke-width", "1.5px") // ストロークの太さを設定 .style("paint-order", "stroke fill") // this CSS attribute is the key (along with setting both stroke and fill) .style("font-size", (d) => { const cellWidth = d.x1 - d.x0; // 子ノードの横幅 const textLength = d.data.name.length; // テキストの長さ const isAlphabetOnly = /^[A-Za-z\s]+$/.test(d.data.name); // アルファベットのみかどうかをチェック const isJapanese = /[\u3040-\u30FF\u3400-\u4DBF\u4E00-\u9FFF]+/.test( d.data.name ); // 日本語が含まれているかどうかをチェック let fontSizeMultiplier = 1; // フォントサイズの倍率の初期値 if (isAlphabetOnly) { fontSizeMultiplier = 1.2; // アルファベットのみの場合は倍率を上げる } else if (isJapanese) { fontSizeMultiplier = 0.8; // 日本語が含まれている場合は倍率を下げる } const fontSize = (cellWidth / textLength) * fontSizeMultiplier; // 倍率を適用したフォントサイズを計算 return `${fontSize}px`; // フォントサイズを設定 }) .text((d) => d.data.name); return svg.node(); }4d:[{"id":"a2e30d445aa454244eb76d504b0d49c952d155e2e96aedd22d6c67e55532ba7645cc73448f2776dc2ca0dc1ac7ad7ff3a2b1d7ba2e439ea10dee47869aefd009","href":"https://static.observableusercontent.com/files/a2e30d445aa454244eb76d504b0d49c952d155e2e96aedd22d6c67e55532ba7645cc73448f2776dc2ca0dc1ac7ad7ff3a2b1d7ba2e439ea10dee47869aefd009","name":"tree_map_data.json","type":"application/json","lastModified":1698540033689.162,"size":197463}] 29:{"id":"77842a3460771351","slug":null,"title":"J-POP in the world excluding Japan","thumbnail":"ec7925f9ecb2cda19ef77a7167466f5b1da8fb0ab87a90db49bbb3bea5119a2a","access_level":"public","create_time":"$D2023-10-29T00:40:10.968Z","update_time":"$D2023-12-20T04:49:23.910Z","view_time":null,"first_public_time":"$D2023-10-29T00:40:10.968Z","has_unpublished_edits":null,"fork":{"id":"95b3c8e9725e7c68","slug":"d3-treemap","title":"D3 Treemap","owner":{"id":"e402cd73fdb98cc0","login":"frscott","name":"Scott"}},"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":384,"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":"J-POP in the world excluding Japan","cells":[{"id":0,"value":"md`# J-POP in the world excluding Japan`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"// 国名のプルダウンメニューを作成するためのセル\nviewof selectedCountry = Inputs.select([\"\"].concat(countries), {\n multiple: true,\n label: \"Select a Country\",\n value: \"\" // デフォルトで「選択なし」を選択状態にする\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"root = treemap(hierarchy)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"data = FileAttachment(\"tree_map_data.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"width = 1200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"height = 675","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"margin = ({\n top: 10,\n right: 10,\n bottom: 10,\n left: 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"colorScale = d3.scaleOrdinal( d3.schemeSet2 )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"hierarchy = {\n const dataCopy = JSON.parse( JSON.stringify( data))\n \n return d3.hierarchy( dataCopy )\n .sum( d => d.value)\n .sort((a, b) => b.value - a.value)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"treemap = d3.treemap()\n .size([width, height])\n .padding(2)\n .paddingTop(10)\n .round(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"$4b","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":226,"value":"// 各葉ノード（アーティスト）の親ノード（国）から国名のリストを取得し、重複を排除\ncountries = d3\n .map(root.leaves(), (d) => {\n while (d.depth > 2) d = d.parent; // 国の階層まで親をたどる\n return d.data.name;\n })\n .keys()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"// 国名のプルダウンメニューを作成するためのセル\nviewof selectedArtist = Inputs.select([\"\"].concat(artists), {\nmultiple: true,\n label: \"Select a Artist\",\n value: \"\" // デフォルトで「選択なし」を選択状態にする\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"// 各葉ノード（アーティスト）の親ノード（国）から国名のリストを取得し、重複を排除\nartists = d3\n .map(root.leaves(), (d) => {\n while (d.depth > 1) d = d.parent; // 国の階層まで親をたどる\n return d.data.name;\n })\n .keys()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null