25:["$","title",null,{"children":"Language Composition of Comments on Fujii Kaze - Workin' Hard | tsurezure lab. こちら徒然研究室（仮称） | Observable"}] 49:T55b,

YouTubeにおける藤井風さん「Workin' Hard」コメント欄の言語構成比

4a:T114b,chart = { // チャートの寸法を指定します。 const width = 1200; // 幅を1200に設定 const height = 600; // 高さを675に設定 // 色のスケールを指定します。 const color = d3.scaleOrdinal(d3.schemeTableau10); // .scaleOrdinal() // 順序尺度を使用 // .domain(["positive", "negative", "neutral"]) // ドメインを指定 // .range(["#D959A6", "#5D8CAE", "#C0C0C0"]); // 対応する色を指定 // レイアウトを計算します。 const root = d3 .treemap() // ツリーマップレイアウトを生成 .tile(tile) // タイリング方法を指定 .size([width, height]) // サイズを指定 .padding(1) // パディングを設定 .round(true)( // 端を丸める d3 .hierarchy(data) // 階層データからルートを生成 .sum((d) => d.value) // 値に基づいて合計を計算 .sort((a, b) => b.value - a.value) // 値に基づいて並べ替え ); // 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: auto; font: 10px 'Noto Sans JP', sans-serif; font-weight: bold;" // Noto Sans JPを指定し、太字に設定 ); // 階層の各リーフにセルを追加します。 const leaf = svg .selectAll("g") // すべてのg要素を選択 .data(root.leaves()) // リーフのデータを適用 .join("g") // g要素を追加 .attr("transform", (d) => `translate(${d.x0},${d.y0})`); // 位置を変換 // ツールチップを追加します。 // const format = d3.format(",d"); // 書式を設定 const format = d3.format(",.1%"); leaf.append("title").text( (d) => `${d .ancestors() // 先祖要素を取得 .reverse() // 配列を逆にする .map((d) => d.data.name) // 名前を抽出 .join(".")}\n${format(d.value)}` // 書式に従って値を追加 ); // 色付きの長方形を追加します。 leaf .append("rect") // rect要素を追加 .attr("id", (d) => (d.leafUid = DOM.uid("leaf")).id) // IDを設定 .attr("fill", (d) => { while (d.depth > 1) d = d.parent; // 深さが1以上の場合、親に移動 return color(d.data.name); // 色を取得 }) .attr("fill-opacity", 0.8) // 塗り潰しの不透明度を設定 .attr("width", (d) => d.x1 - d.x0) // 幅を設定 .attr("height", (d) => d.y1 - d.y0); // 高さを設定 // テキストがオーバーフローしないようにclipPathを追加します。 leaf .append("clipPath") // clipPath要素を追加 .attr("id", (d) => (d.clipUid = DOM.uid("clip")).id) // IDを設定 .append("use") // use要素を追加 .attr("xlink:href", (d) => d.leafUid.href); // href属性を設定 // 複数行のテキストを追加します。最後の行は値を表示し、特定の書式を持っています。 leaf .append("text") // text要素を追加 .attr("fill", "#FFFFFF") // フォントの色を白に設定 .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, nodes) => `${(i === nodes.length - 1) * 0.8 + 1 + i * 0.9}em` // y位置を計算 *0.3 ) .attr( "fill-opacity", (d, i, nodes) => (i === nodes.length - 1 ? 0.3 : null) // 最後の行の不透明度を設定 ) .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 + "px"; }) .text((d) => d); // テキストを設定 return Object.assign(svg.node(), { scales: { color } }); // svgノードと色のスケールを返す }4b:[{"id":"b487323da24a902e1548e1ff336a3d5666a977a26dbcac37450f95da9fb5da0ae7bccf69295f556dd48c0995fdce9c124a9d6e5e0d06149491de6f16e9b9b219","href":"https://static.observableusercontent.com/files/b487323da24a902e1548e1ff336a3d5666a977a26dbcac37450f95da9fb5da0ae7bccf69295f556dd48c0995fdce9c124a9d6e5e0d06149491de6f16e9b9b219","name":"Fujii Kaze - Workin’ Hard（Official Video）_lang.json","type":"application/json","lastModified":1693010443778.733,"size":30948}] 29:{"id":"02a3fe1969c855b3","slug":null,"title":"Language Composition of Comments on Fujii Kaze - Workin' Hard","thumbnail":"61264a80dfea5857e460b49e7c0c509e23a4176866ec315e744dd8870939ee70","access_level":"public","create_time":"$D2023-08-26T00:40:27.509Z","update_time":"$D2023-08-26T01:11:02.744Z","view_time":null,"first_public_time":"$D2023-08-26T00:40:27.509Z","has_unpublished_edits":null,"fork":true,"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":225,"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":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Language Composition of Comments on Fujii Kaze - Workin' Hard","cells":[{"id":0,"value":"# Language Composition of Comments on Fujii Kaze - Workin' Hard\n## YouTubeにおける藤井風「Workin' Hard」コメント欄の言語構成比","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"viewof tile = Inputs.select(\n new Map([\n [\"binary\", d3.treemapBinary],\n [\"squarify\", d3.treemapSquarify],\n [\"slice-dice\", d3.treemapSliceDice],\n [\"slice\", d3.treemapSlice],\n [\"dice\", d3.treemapDice]\n ]),\n { label: \"Tiling method\", value: d3.treemapBinary }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$49","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"　　YouTubeデータより徒然研究室（仮称）作成。2023年8月26日データ取得。対象コメントは5,731件","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"import { Swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"data = FileAttachment(\"Fujii Kaze - Workin’ Hard（Official Video）_lang.json\").json()","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