2f:Ta17,{ const height = 500; const margin = { top: height / 7, right: width / 10, bottom: height / 7, left: height / 7 }; const svg = d3.create("svg").attr("width", width).attr("height", height); // 背景 svg .append("g") .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#ff0000"); //.attr("opacity", 0.5); const sideLength = 200; const triangleHeight = (Math.sqrt(3) / 2) * sideLength; const colors = ["yellow", "aqua", "none"]; // Fill colors for the triangles const str = ["0.0", "0.0", "2.0"]; const labels = [ "2023年に、youtubeに投稿されたCMに最も起用された作品は何か？" ]; // Labels for the triangles for (let i = 0; i < 1; i++) { const xCoordinate = width / 2; // Center the triangles horizontally const yCoordinate = height / 4; // Adjust the y-coordinate for vertical spacing const trianglePoints = `${xCoordinate},${yCoordinate} ${ xCoordinate - sideLength / 2 },${yCoordinate + triangleHeight} ${xCoordinate + sideLength / 2},${ yCoordinate + triangleHeight }`; const rotationAngle = i % 2 === 0 ? 90 : -90; // If i is even, rotate right (90 degrees), else rotate left (-90 degrees) svg .append("polygon") .attr("points", trianglePoints) .attr("fill", "white") // Use different fill colors for each triangle .attr("opacity", 0.8) // .attr("stroke", "aqua") // Add black border to all triangles .attr("stroke-width", str[i]) // Set border width to 1 for all triangles .attr( "transform", "rotate(" + rotationAngle + ", " + xCoordinate + ", " + (yCoordinate + triangleHeight / 2) + ")" ); svg .append("text") .text(labels[i]) .attr("x", width / 2) .attr("y", height / 1.4) // Adjust the y-coordinate for label position .attr("text-anchor", "middle") // Center the label under the triangle .attr("fill", "white") // Set label color .style("font-size", "2em") .style("font-weight", "bold"); } svg .append("text") .text( "-アニメキャラはCMに何をもたらすのか? 2023年のCM動向から見えてきたこと-" ) .attr("x", width / 2) .attr("y", height / 1.4 + margin.top / 2) // Adjust the y-coordinate for label position .attr("text-anchor", "middle") // Center the label under the triangle .attr("fill", "white") // Set label color .style("font-size", "1em"); return svg.node(); }30:Tc3e,chart = { const height = (width / 21) * 5; // width と height を入れ替える const marginTop = 50; const marginRight = 50; const marginBottom = 10; const marginLeft = 120; const titleCounts = d3.rollup( dataset, (v) => v.length, (d) => d.attribute ); const uniqueAttributes = Array.from(new Set(dataset.map((d) => d.attribute))); const sortedAttributes = uniqueAttributes.sort((a, b) => { const countA = titleCounts.get(a) || 0; const countB = titleCounts.get(b) || 0; return countB - countA; }); const y = d3 .scaleBand() // scaleBand を y 軸に使用 .domain(sortedAttributes) .range([marginTop, height - marginBottom]) // y 軸の範囲を入れ替え .padding(0.1); const x = d3 .scaleLinear() // scaleLinear を x 軸に使用 .domain([0, d3.max(titleCounts.values())]) .nice() .rangeRound([marginLeft, width - marginRight]); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width:100%; height: auto;"); svg .append("g") .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#f9f8f9"); svg .append("g") .attr("transform", `translate(0, ${marginTop})`) .call(d3.axisTop(x).tickSizeOuter(0)) .call((g) => g.select(".domain").remove()) .call((g) => g .select(".tick:last-of-type text") .clone() .attr("y", -(height - marginTop * 1.5)) .attr("dy", null) .attr("font-weight", "bold") .attr("text-anchor", "start") .text("count") ) .selectAll("text") .style("text-anchor", "start") .attr("transform", "rotate(0) translate(0, 0)"); // 横向きに変更 svg .append("g") .attr("transform", `translate(${marginLeft}, 0)`) .call(d3.axisLeft(y).tickSizeOuter(0)) .call((g) => g.select(".domain").remove()) .call((g) => g .select(".tick:last-of-type text") .clone() .attr("x", -50) .attr("y", -(height - marginTop)) .attr("dy", null) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("attribute") ); svg .append("g") .selectAll("rect") .data( sortedAttributes.map((attribute) => [ attribute, titleCounts.get(attribute) || 0 ]) ) .join("rect") .attr("y", (d) => y(d[0])) // y 軸を使用する .attr("x", (d) => marginLeft) // x 軸の始点を指定 .attr("height", y.bandwidth()) // y 軸のバンド幅を使用する .attr("width", (d) => x(d[1]) - marginLeft) // x 軸の値を使用する .attr("fill", "black"); svg .append("g") .selectAll("text") .data( sortedAttributes.map((attribute) => [ attribute, titleCounts.get(attribute) || 0 ]) ) .join("text") .attr("y", (d) => y(d[0]) + 20) // y 軸を使用する .attr("x", (d) => x(d[1]) + 20) // x 軸の始点を指定 .text((d) => d[1]) .attr("fill", "black"); return svg.node(); }31:T62f,tree2 = { //Specify the chart's dimesions. const width = 1152; const height = width / 1.618; const margin = { top: 40, right: 100, bottom: 10, left: 30 }; //Specify the color scale. // Update the treemap layout using the scales const treemap = d3.treemap().size([width, height]).padding(1.0).round(true); const treeMapData = treemap(root2); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]); //.attr("style", "max-width: 100%; height: auto; font: 5px sans-serif;"); const textScale = d3 .scaleSqrt() .domain([0, d3.max(root2.leaves(), (d) => d.value)]) .range([0, height / 20]); const color = d3.scaleOrdinal().domain(titles).range(d3.schemeCategory10); //タイルを作る svg .append("g") .selectAll("rect") .data(treeMapData.leaves()) .join("rect") .attr("width", (d) => d.x1 - d.x0) .attr("height", (d) => d.y1 - d.y0) .attr("transform", (d) => `translate(${d.x0},${d.y0})`) .attr("fill", (d) => colorScale(d.data.attribute)) .attr("class", "treemapRect") .append("title") .text((d) => `${d.data.CM_title} (${d.data.attribute} ${d.data.title} )`); svg .append("g") .selectAll("text") .data(treeMapData.leaves()) .join("text") .attr("x", (d) => d.x0 + height / 100) .attr("y", (d) => d.y0 + textScale(d.value)) .text((d) => d.data.title) .attr("font-weight", "bold") .attr("font-size", (d) => textScale(d.value / 7)) .attr("fill", "#f9eed3"); return svg.node(); }32:T565,titleCombine = { const aggregatedData = Array.from( d3.group(root2.leaves(), (d) => d.data.attribute), ([company, leaves]) => { const childrenData = Array.from( d3.group(leaves, (d) => d.data.title), ([goods, children]) => { const value = d3.sum(children, (entry) => entry.value); const [minX, minY, maxX, maxY] = [ d3.min(children, (entry) => entry.x0), d3.min(children, (entry) => entry.y0), d3.max(children, (entry) => entry.x1), d3.max(children, (entry) => entry.y1) ]; return { name: goods, value, x0: minX, y0: minY, x1: maxX, y1: maxY, children: children }; } ); const [minX, minY, maxX, maxY] = [ d3.min(childrenData, (entry) => entry.x0), d3.min(childrenData, (entry) => entry.y0), d3.max(childrenData, (entry) => entry.x1), d3.max(childrenData, (entry) => entry.y1) ]; return { name: company, value: d3.sum(childrenData, (entry) => entry.value), x0: minX, y0: minY, x1: maxX, y1: maxY, children: childrenData }; } ); const rootValue = d3.sum(aggregatedData, (d) => d.value); return aggregatedData; return rootValue; }33:Ta72,chart2 = { const height = width; const marginTop = 50; const marginRight = 100; const marginBottom = 50; const marginLeft = 230; const titleCounts = d3.rollup( dataset, (v) => v.length, (d) => d.company ); // Filter out entries with null values in the company field const filteredTitleCounts = new Map( [...titleCounts].filter(([key, value]) => key !== null) ); const sortedData = [...filteredTitleCounts.entries()].sort( (a, b) => b[1] - a[1] ); const y = d3 .scaleBand() .domain(sortedData.map((d) => d[0])) .range([marginTop, height - marginBottom]) .padding(0.3); const x = d3 .scaleLinear() .domain([0, d3.max(filteredTitleCounts.values())]) .nice() .range([marginLeft, width - marginRight]); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width:100%; height: auto;"); // Background svg .append("g") .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#f9f8f9"); // Append the axes svg .append("g") .attr("transform", `translate(0, ${marginTop})`) .call(d3.axisTop(x).tickSizeOuter(0)) .call((g) => g.select(".domain").remove()) .call((g) => g .select(".tick:last-of-type text") .clone() .attr("x", 50) .attr("y", 0) .attr("dy", null) .attr("font-weight", "bold") .text("count") ); svg .append("g") .attr("transform", `translate(${marginLeft}, 0)`) .call(d3.axisLeft(y).tickSizeOuter(0)) .call((g) => g.select(".domain").remove()) .call((g) => g .select(".tick:last-of-type text") .clone() .attr("x", -10) .attr("y", -(height - marginTop - 50)) .attr("text-anchor", "end") .attr("font-weight", "bold") .text("company") ); // Append the bars svg .append("g") .selectAll("rect") .data(sortedData) .join("rect") .attr("y", (d) => y(d[0])) .attr("x", marginLeft) .attr("height", y.bandwidth()) .attr("width", (d) => x(d[1]) - marginLeft) .attr("fill", "black"); svg .append("g") .selectAll("text") .data(sortedData) .join("text") .attr("y", (d) => y(d[0]) + y.bandwidth() / 2) // Centered vertically on the bar .attr("x", (d) => x(d[1]) + 5) // Adjust the value to control the horizontal position .attr("dy", "0.35em") // Adjust the value for fine-tuning vertical alignment .text((d) => d[1]) .attr("font-size", 10) .attr("fill", "black"); return svg.node(); }34:Tc7c,chart5 = { const height = (width / 21) * 5; // width と height を入れ替える const marginTop = 50; const marginRight = 50; const marginBottom = 10; const marginLeft = 120; const filteredDataset = dataset.filter((d) => d.goods !== null); const titleCounts = d3.rollup( filteredDataset, (v) => v.length, (d) => d.goods ); const uniqueAttributes = Array.from( new Set(filteredDataset.map((d) => d.goods)) ); const sortedAttributes = uniqueAttributes.sort((a, b) => { const countA = titleCounts.get(a) || 0; const countB = titleCounts.get(b) || 0; return countB - countA; }); const y = d3 .scaleBand() // scaleBand を y 軸に使用 .domain(sortedAttributes) .range([marginTop, height - marginBottom]) // y 軸の範囲を入れ替え .padding(0.1); const x = d3 .scaleLinear() // scaleLinear を x 軸に使用 .domain([0, d3.max(titleCounts.values())]) .nice() .rangeRound([marginLeft, width - marginRight]); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width:100%; height: auto;"); svg .append("g") .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#f9f8f9"); svg .append("g") .attr("transform", `translate(0, ${marginTop})`) .call(d3.axisTop(x).tickSizeOuter(0)) .call((g) => g.select(".domain").remove()) .call((g) => g .select(".tick:last-of-type text") .clone() .attr("y", -50) .attr("dy", null) .attr("font-weight", "bold") .attr("text-anchor", "start") .text("count") ) .selectAll("text") .style("text-anchor", "start") .attr("transform", "rotate(0) translate(0, 0)"); // 横向きに変更 svg .append("g") .attr("transform", `translate(${marginLeft}, 0)`) .call(d3.axisLeft(y).tickSizeOuter(0)) .call((g) => g.select(".domain").remove()) .call((g) => g .select(".tick:last-of-type text") .clone() .attr("x", -50) .attr("y", -(height - marginTop * 1.5)) .attr("dy", null) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("goods") ); svg .append("g") .selectAll("rect") .data( sortedAttributes.map((attribute) => [ attribute, titleCounts.get(attribute) || 0 ]) ) .join("rect") .attr("y", (d) => y(d[0])) // y 軸を使用する .attr("x", (d) => marginLeft) // x 軸の始点を指定 .attr("height", y.bandwidth()) // y 軸のバンド幅を使用する .attr("width", (d) => x(d[1]) - marginLeft) // x 軸の値を使用する .attr("fill", "black"); svg .append("g") .selectAll("text") .data( sortedAttributes.map((attribute) => [ attribute, titleCounts.get(attribute) || 0 ]) ) .join("text") .attr("y", (d) => y(d[0]) + 30) // y 軸を使用する .attr("x", (d) => x(d[1]) + 20) // x 軸の始点を指定 .text((d) => d[1]) .attr("fill", "black"); return svg.node(); }35:Tb61,chart3 = { const height = 1000; const marginTop = 50; const marginRight = 50; const marginBottom = 50; const marginLeft = 180; const companyCounts = d3.rollup( filteredCompanies, (v) => d3.sum(v, (d) => d.company), // 各グループ内の company プロパティの合計を計算 (d) => d.title ); const uniqueTitles = Array.from( new Set(filteredCompanies.map((d) => d.title)) ); const sortedTitles = uniqueTitles.sort((a, b) => { const countA = companyCounts.get(a) || 0; const countB = companyCounts.get(b) || 0; return countB - countA; }); const y = d3 .scaleBand() .domain(sortedTitles) .range([marginTop, height - marginBottom]) .padding(0.2); const x = d3 .scaleLinear() .domain([0, d3.max(companyCounts.values())]) .nice() .rangeRound([marginLeft, width - marginRight]); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width:100%; height: auto;"); svg .append("g") .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#f9f8f9"); svg .append("g") .attr("transform", `translate(0, ${marginTop})`) .call( d3 .axisTop(x) .tickSizeOuter(0) .tickValues(d3.range(0, d3.max(companyCounts.values()) + 1, 1)) ) .call((g) => g.select(".domain").remove()) .call((g) => g .select(".tick:last-of-type text") .clone() .attr("y", -20) .attr("dy", null) .attr("font-weight", "bold") .attr("text-anchor", "start") .text("count") ) .selectAll("text") .style("text-anchor", "start") .attr("transform", "rotate(0) translate(0, 0)"); svg .append("g") .attr("transform", `translate(${marginLeft}, 0)`) .call(d3.axisLeft(y).tickSizeOuter(0)) .call((g) => g.select(".domain").remove()) .call((g) => g .select(".tick:last-of-type text") .clone() .attr("x", -50) .attr("y", -905) .attr("dy", null) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("title") ); svg .append("g") .selectAll("rect") .data(sortedTitles.map((title) => [title, companyCounts.get(title)])) .join("rect") .attr("y", (d) => y(d[0])) .attr("x", marginLeft) .attr("height", y.bandwidth()) .attr("width", (d) => x(d[1]) - marginLeft) .attr("fill", "black"); svg .append("g") .selectAll("text") .data(sortedTitles.map((title) => [title, companyCounts.get(title) || 0])) .join("text") .attr("y", (d) => y(d[0]) + 8) // y 軸を使用する .attr("x", (d) => x(d[1]) + 20) // x 軸の始点を指定 .text((d) => d[1]) .attr("font-size", 10) .attr("fill", "black"); return svg.node(); }36:Tb65,chart4 = { const height = 1000; const marginTop = 50; const marginRight = 50; const marginBottom = 50; const marginLeft = 180; const companyCounts = d3.rollup( filteredCompanies2, (v) => d3.sum(v, (d) => d.company), // 各グループ内の company プロパティの合計を計算 (d) => d.title ); const uniqueTitles = Array.from( new Set(filteredCompanies2.map((d) => d.title)) ); const sortedTitles = uniqueTitles.sort((a, b) => { const countA = companyCounts.get(a) || 0; const countB = companyCounts.get(b) || 0; return countB - countA; }); const y = d3 .scaleBand() .domain(sortedTitles) .range([marginTop, height - marginBottom]) .padding(0.2); const x = d3 .scaleLinear() .domain([0, d3.max(companyCounts.values())]) .nice() .rangeRound([marginLeft, width - marginRight]); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width:100%; height: auto;"); svg .append("g") .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#f9f8f9"); svg .append("g") .attr("transform", `translate(0, ${marginTop})`) .call( d3 .axisTop(x) .tickSizeOuter(1.0) .tickValues(d3.range(0, d3.max(companyCounts.values()) + 1, 1)) ) .call((g) => g.select(".domain").remove()) .call((g) => g .select(".tick:last-of-type text") .clone() .attr("y", -20) .attr("dy", null) .attr("font-weight", "bold") .attr("text-anchor", "start") .text("count") ) .selectAll("text") .style("text-anchor", "start") .attr("transform", "rotate(0) translate(0, 0)"); svg .append("g") .attr("transform", `translate(${marginLeft}, 0)`) .call(d3.axisLeft(y).tickSizeOuter(0)) .call((g) => g.select(".domain").remove()) .call((g) => g .select(".tick:last-of-type text") .clone() .attr("x", -50) .attr("y", -905) .attr("dy", null) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("title") ); svg .append("g") .selectAll("rect") .data(sortedTitles.map((title) => [title, companyCounts.get(title)])) .join("rect") .attr("y", (d) => y(d[0])) .attr("x", marginLeft) .attr("height", y.bandwidth()) .attr("width", (d) => x(d[1]) - marginLeft) .attr("fill", "black"); svg .append("g") .selectAll("text") .data(sortedTitles.map((title) => [title, companyCounts.get(title) || 0])) .join("text") .attr("y", (d) => y(d[0]) + 8) // y 軸を使用する .attr("x", (d) => x(d[1]) + 20) // x 軸の始点を指定 .text((d) => d[1]) .attr("font-size", 10) .attr("fill", "black"); return svg.node(); }37:T7f6,tree = { //Specify the chart's dimesions. const height = width / 1.618; const margin = { top: 40, right: 100, bottom: 10, left: 30 }; //Specify the color scale. // Update the treemap layout using the scales const treemap = d3.treemap().size([width, height]).padding(1.0).round(true); treemap(root); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]); //.attr("style", "max-width: 100%; height: auto; font: 5px sans-serif;"); const textScale = d3 .scaleSqrt() .domain([0, d3.max(root.leaves(), (d) => d.value)]) .range([0, height / 20]); const color = d3.scaleOrdinal().domain(attributes).range(d3.schemeCategory10); svg .append("g") .selectAll("a") // Use 'a' elements for links .data(root.leaves()) .join("a") .attr("xlink:href", (d) => d.data.URL) .attr("target", "_blank") .append("rect") // Append 'rect' elements as children of 'a' elements .attr("width", (d) => d.x1 - d.x0) .attr("height", (d) => d.y1 - d.y0) .attr("transform", (d) => `translate(${d.x0},${d.y0})`) .attr("fill", (d) => colorScale2(d.data.recent_broadcast_Year)) .attr("class", "treemapRect") .append("title") .text((d) => `${d.data.CM_title} (${d.data.attribute} ${d.data.title} )`); svg .append("g") .selectAll("text") .data(root.leaves()) .join("text") .attr("x", (d) => d.x0 + height / 100) .attr("y", (d) => d.y0 + textScale(d.value)) .text((d) => d.data.CM_title) .attr("font-weight", "bold") .attr("font-size", (d) => textScale(d.value / 15)) .attr("fill", "#f9eed3"); svg .append("g") .selectAll("text") .data(root.leaves()) .join("text") .attr("x", (d) => d.x0 + height / 100) .attr("y", (d) => d.y0 + textScale(d.value) * 1.7) .text((d) => `${d.data.Views} 回`) .attr("font-size", (d) => textScale(d.value / 3)) .attr("font-weight", "bold") .attr("fill", "#f9eed3"); return svg.node(); }38:Tea1,companies = [ { title: "ルパン三世", company: 2 }, { title: "オリジナル", company: 31 }, { title: "東京リベンジャーズ", company: 2 }, { title: "B-PROJECT", company: 1 }, { title: "すとぷり", company: 1 }, { title: "うる星やつら", company: 1 }, { title: "笑ゥせぇるすまん", company: 1 }, { title: "どんぎつね", company: 1 }, { title: "にじさんじ", company: 4 }, { title: "推しの子", company: 6 }, { title: "ウマ娘プリティダービー", company: 1 }, { title: "ウルトラマン", company: 2 }, { title: "クレヨンしんちゃん", company: 4 }, { title: "この素晴らしい世界に祝福を！", company: 1 }, { title: "はじめまして松尾です・眉村ちあき", company: 1 }, { title: "そろ谷のアニメっち", company: 1 }, { title: "Ado", company: 1 }, { title: "ドラえもん", company: 2 }, { title: "ハローキティ", company: 1 }, { title: "仮面ライダー", company: 3 }, { title: "ガチャピン", company: 2 }, { title: "すずめの戸締り", company: 1 }, { title: "機動戦士ガンダム水星の魔女", company: 1 }, { title: "アルプスの少女ハイジ", company: 1 }, { title: "エボルタNEOくん", company: 1 }, { title: "サムティくん", company: 1 }, { title: "ヤッターマン", company: 2 }, { title: "BLÅHAJ/ブローハイ", company: 1 }, { title: "ちびまる子ちゃん", company: 4 }, { title: "ミッフィー", company: 2 }, { title: "ワンピース", company: 3 }, { title: "キン肉マン", company: 1 }, { title: "うのき", company: 1 }, { title: "カントリーマアムまみれさん", company: 1 }, { title: "でんこちゃん", company: 1 }, { title: "IDOLish7", company: 1 }, { title: "頭文字D", company: 1 }, { title: "ストリートファイター", company: 1 }, { title: "ゆこぴ", company: 1 }, { title: "たこるくん", company: 1 }, { title: "お買い物パンダ", company: 1 }, { title: "オキナさん", company: 1 }, { title: "NOVAうさぎ", company: 1 }, { title: "ムック", company: 3 }, { title: "ちいかわ", company: 3 }, { title: "SPY×FAMILY", company: 2 }, { title: "シティーハンター", company: 1 }, { title: "シナぷしゅ", company: 2 }, { title: "ブルーロック", company: 1 }, { title: "福本伸行漫画", company: 1 }, { title: "ゲゲゲの鬼太郎", company: 1 }, { title: "キングギドラ", company: 1 }, { title: "バファローブルとバファローベル", company: 1 }, { title: "NAKAKI PANTZ", company: 1 }, { title: "ヶくん", company: 1 }, { title: "キレイキレイファミリー", company: 1 }, { title: "北斗の拳", company: 1 }, { title: "進撃の巨人", company: 1 }, { title: "ホロライブ", company: 1 }, { title: "ガールズ＆パンツァー", company: 1 }, { title: "MF GHOST", company: 1 }, { title: "水戸黄門", company: 1 }, { title: "マイメロディ", company: 1 }, { title: "はぴだんぶい", company: 1 }, { title: "おさるのジョージ", company: 1 }, { title: "ゴジラ", company: 3 }, { title: "ひよこちゃん", company: 1 }, { title: "ビオレママ", company: 1 }, { title: "ジェフリー", company: 1 }, { title: "アフラックダック", company: 1 }, { title: "アンパンマン", company: 1 }, { title: "銀魂", company: 2 }, { title: "屋根裏のラジャー", company: 1 }, { title: "葬送のフリーレン", company: 1 }, { title: "浦島太郎", company: 1 }, { title: "鷹の爪団", company: 1 }, { title: "ベアブリック", company: 1 }, { title: "エヴァンゲリオン", company: 1 } ]39:T55a,ddd = { const aggregatedData = Array.from( d3.group(root3.leaves(), (d) => d.data.company), ([company, leaves]) => { const childrenData = Array.from( d3.group(leaves, (d) => d.data.goods), ([goods, children]) => { const value = d3.sum(children, (entry) => entry.value); const [minX, minY, maxX, maxY] = [ d3.min(children, (entry) => entry.x0), d3.min(children, (entry) => entry.y0), d3.max(children, (entry) => entry.x1), d3.max(children, (entry) => entry.y1) ]; return { name: goods, value, x0: minX, y0: minY, x1: maxX, y1: maxY, children: children }; } ); const [minX, minY, maxX, maxY] = [ d3.min(childrenData, (entry) => entry.x0), d3.min(childrenData, (entry) => entry.y0), d3.max(childrenData, (entry) => entry.x1), d3.max(childrenData, (entry) => entry.y1) ]; return { name: company, value: d3.sum(childrenData, (entry) => entry.value), x0: minX, y0: minY, x1: maxX, y1: maxY, children: childrenData }; } ); const rootValue = d3.sum(aggregatedData, (d) => d.value); return aggregatedData; return rootValue; }3a:T700,tree3 = { //Specify the chart's dimesions. const height = width / 1.618; const margin = { top: 40, right: 100, bottom: 10, left: 30 }; //Specify the color scale. // Update the treemap layout using the scales const treemap = d3.treemap().size([width, height]).padding(1.0).round(true); const treemapData = treemap(root3); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]); //.attr("style", "max-width: 100%; height: auto; font: 5px sans-serif;"); const textScale = d3 .scaleSqrt() .domain([0, d3.max(root3.leaves(), (d) => d.value)]) .range([0, height / 20]); const color = d3.scaleOrdinal().domain(goods).range(d3.schemeCategory10); //タイルを作る svg .append("g") .selectAll("rect") .data(treemapData.leaves()) .join("rect") .attr("width", (d) => d.x1 - d.x0) .attr("height", (d) => d.y1 - d.y0) .attr("transform", (d) => `translate(${d.x0},${d.y0})`) .attr("fill", (d) => colorScale3(d.data.goods)) .attr("class", "treemapRect") .append("title"); svg .append("g") .selectAll("text") .data(treemapData.leaves()) .join("text") .attr("x", (d) => d.x0 + height / 100) .attr("y", (d) => d.y0 + textScale(d.value)) .text((d) => d.data.company) .attr("font-size", (d) => textScale(d.value / 5)) .attr("font-weight", "bold") .attr("fill", "#f9eed3"); svg .append("g") .selectAll("text") .data(root3.leaves()) .join("text") .attr("x", (d) => d.x0 + height / 100) .attr("y", (d) => d.y0 + textScale(d.value) + 10) .text((d) => `${d.data.goods} `) .attr("font-size", (d) => textScale(d.value / 25)) .attr("fill", "#f9eed3"); return svg.node(); }3b:[] 2d:{"title":"Who is the top commercial “idol” of 2023 on youtube?","cells":[{"id":1588,"value":"# Who is the top commercial “idol” of 2023 on youtube?","pinned":false,"hidden":false,"mode":"md"},{"id":897,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1486,"value":"{\n const width = 1200;\n const height = 100;\n\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height);\n\n svg\n .append(\"g\")\n .append(\"rect\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"fill\", \"#ff0000\");\n\n svg\n .append(\"g\")\n .append(\"text\")\n .attr(\"x\", 15)\n .attr(\"y\", 75)\n .attr(\"fill\", \"white\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"font-size\", 45)\n .text(\"はじめに\");\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"アニメ・特撮大国日本において、度々企業がアニメや特撮とコラボしCMを放映しています。\n2023年は以前より人気を維持している「SPY×Family」や「進撃の巨人」に加えて、新しく「推しの子」のキャラクターがCMタレントのラインアップに加わり、PRする商品は多様化しています。またアニメだけでなく、Vtuberなどの匿名のタレントがCMに登場したり、[マクドナルド](https://twitter.com/McDonaldsJapan/status/1704420133140132045)や[日清](https://www.youtube.com/watch?v=cRGHzSiUs9Y&ab_channel=%E6%97%A5%E6%B8%85%E9%A3%9F%E5%93%81%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%E5%85%AC%E5%BC%8F%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB)などの独自のCMキャラクターも増えています。\n\n本記事では、2023年に公式チャンネルからyoutubeに投稿されたキャラクターが登場するCMを対象に、最も多く起用されたキャラクターの作品をランキング形式で示します。\n
その結果から、作品の人気、作風とPR商品、企業の関係についても考察します。","pinned":false,"hidden":false,"mode":"md"},{"id":1010,"value":"#### 集計方法\n国内で放映されている広告動画をまとめている\n
[BB-navi CM動画](https://www.bb-navi.com/cm-douga/)\n
[CM など最新の動画をまとめるサイト ~ 動画NOW!!](https://douganow.jp)\n
上記2サイトからキャラクターの出演しているCMを集計しました。但し、今回のCMではサブカルチャー以外への影響を知るために、アニメやゲームとのコラボCMは含んでいません。\n
そして、集計したキャラクターCMは\n1. month,day(公開された日付)\n2. attribute(アニメ、特撮、マスコットキャラクター)\n3. Company(CMを放映している企業)\n4. goods(PRされている商品)\n5. title(起用されている作品名または作家名)※Vtuberの場合は所属事務所とタレント名も記録\n6. Views(視聴回数)※2024年1月5日付\n
以上の項目で分類しました。","pinned":false,"hidden":false,"mode":"md"},{"id":2602,"value":"{\n const width = 1200;\n const height = 100;\n\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height);\n\n svg\n .append(\"g\")\n .append(\"rect\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"fill\", \"#ff0000\");\n\n svg\n .append(\"g\")\n .append(\"text\")\n .attr(\"x\", 15)\n .attr(\"y\", 75)\n .attr(\"fill\", \"white\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"font-size\", 45)\n .text(\"2023年各月のキャラクターCM一覧\");\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2606,"value":"※一部非公開のものは非表示","pinned":false,"hidden":false,"mode":"md"},{"id":1224,"value":"viewof Month = {\n const uniqueMonths = Array.from(\n new Set(Array.from(IDs.values(), (item) => item[0].month))\n );\n\n const radio = Inputs.radio(uniqueMonths, {\n label: md`__month__`,\n value: uniqueMonths[0]\n });\n\n d3.select(radio).selectAll(\"label\").style(\"font-size\", \"1.5em\");\n return radio;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1408,"value":"\n

\n ${videoIDs.map((videoIDs) => html``)}\n

\n ","pinned":false,"hidden":false,"mode":"html"},{"id":2625,"value":"{\n const width = 1200;\n const height = 100;\n\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height);\n\n svg\n .append(\"g\")\n .append(\"rect\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"fill\", \"#ff0000\");\n\n svg\n .append(\"g\")\n .append(\"text\")\n .attr(\"x\", 15)\n .attr(\"y\", 75)\n .attr(\"fill\", \"white\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"font-size\", 45)\n .text(\"最も起用されたのはアニメ？特撮？Vtuber？\");\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":595,"value":"まず、キャラクターCMの属性によって分類します。\n属性は\n1. Anime(アニメ作品のキャラクター)\n2. Company_Character(企業や商品のオリジナルキャラクター)\n5. Game_Character(ゲーム作品のキャラクター)\n6. Hobby(フィギュアなどの玩具のキャラクター)\n7. SFX(特撮のキャラクター)\n8. Virtual_Talent(Vtuberをはじめとする匿名タレント)\n
となっています。","pinned":false,"hidden":false,"mode":"md"},{"id":2954,"value":"#### 以下はそれぞれの属性に該当するCMのキャラクターの起用数です。","pinned":false,"hidden":false,"mode":"md"},{"id":602,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2667,"value":"アニメCMが最も多く168本でした。その後に、企業のオリジナルキャラクターが64本、特撮が24本ヴァーチュアルタレントが8本、ゲームキャラクターと玩具キャラクターが7本でした。\n
※1つのCMに複数のキャラクターが登場する際に、別それぞれが別の属性に該当する場合もあるため、実際のCM本数よりも多くなっています。","pinned":false,"hidden":false,"mode":"md"},{"id":2326,"value":"#### 属性ごとの視聴回数をツリーマップで示すと以下のようになります。","pinned":false,"hidden":false,"mode":"md"},{"id":2106,"value":"key = Swatches(colorScale)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2238,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":2222,"value":"treeData2 = d3.group(\n dataset.filter((d) => d.attribute),\n (d) => d.attribute,\n (d) => d.title\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2150,"value":"root2 = d3\n .hierarchy(treeData2)\n .sum((d) => d.value)\n .sort((a, b) => b.value - a.value)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3381,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":3206,"value":"ヤッターマンはヤッターマンでまとめよう。\nそうすれば、ツリーマップも小さくできる。\nまたツリーマップの背景に動画のサムネイルを薄く映してもいいかも。","pinned":false,"hidden":false,"mode":"html"},{"id":2733,"value":"ツリーマップからアニメに該当するキャラクターCMの視聴回数が圧倒的に多いことがわかります。","pinned":false,"hidden":false,"mode":"md"},{"id":2742,"value":"{\n const width = 1200;\n const height = 100;\n\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height);\n\n svg\n .append(\"g\")\n .append(\"rect\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"fill\", \"#ff0000\");\n\n svg\n .append(\"g\")\n .append(\"text\")\n .attr(\"x\", 15)\n .attr(\"y\", 75)\n .attr(\"fill\", \"white\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"font-size\", 45)\n .text(\"最もキャラクターを起用する企業は？\");\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":673,"value":"#### 以下に企業別CMの公開数を示します。","pinned":false,"hidden":false,"mode":"md"},{"id":2678,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"CM数のランキングトップ3は\n1. マクドナルド22本\n2. 日清21本\n3. SBI証券10本\nでした。\nマクドナルドと日清の2強と言えます。\n","pinned":false,"hidden":false,"mode":"md"},{"id":2995,"value":"{\n const width = 1200;\n const height = 100;\n\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height);\n\n svg\n .append(\"g\")\n .append(\"rect\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"fill\", \"#ff0000\");\n\n svg\n .append(\"g\")\n .append(\"text\")\n .attr(\"x\", 15)\n .attr(\"y\", 75)\n .attr(\"fill\", \"white\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"font-size\", 45)\n .text(\"キャラクターは何をPRしたのか？\");\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2929,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":3073,"value":"#### PRするもの別の視聴回数は以下のようになっています。","pinned":false,"hidden":false,"mode":"md"},{"id":3022,"value":"key3 = Swatches(colorScale3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3076,"value":"オリジナル商品に関するキャラクターCMが最も視聴されたことがわかります。","pinned":false,"hidden":false,"mode":"md"},{"id":412,"value":"{\n const width = 1200;\n const height = 100;\n\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height);\n\n svg\n .append(\"g\")\n .append(\"rect\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"fill\", \"#ff0000\");\n\n svg\n .append(\"g\")\n .append(\"text\")\n .attr(\"x\", 15)\n .attr(\"y\", 75)\n .attr(\"fill\", \"white\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"font-size\", 45)\n .text(\"CM王に輝いた作品は?\");\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2775,"value":"#### 以下の棒グラフは、その作品を起用した企業の数を示したものです。","pinned":false,"hidden":false,"mode":"md"},{"id":2532,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"以上から2023年に企業に起用された数が多い作品は『推しの子』でした。\n
その下から『にじさんじ』や『クレヨンしんちゃん』、『ちびまる子ちゃん』でした。
","pinned":false,"hidden":false,"mode":"md"},{"id":2896,"value":"これに独自のキャラクターを起用したオリジナルアニメCMを付け加える以下のようになります。","pinned":false,"hidden":false,"mode":"md"},{"id":2902,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":3115,"value":"以上から、多くの企業が独自のキャラクターを起用していることがわかります。","pinned":false,"hidden":false,"mode":"html"},{"id":2300,"value":"#### 次にCMごとの視聴回数の多さをツリーマップで示すと以下のようになります。","pinned":false,"hidden":false,"mode":"md"},{"id":2269,"value":"2023年に放送、公開された作品は青色で、それ以外は橙色で表示しています。\nクリックすることで、そのyoutubeの動画を閲覧することができます。","pinned":false,"hidden":false,"mode":"md"},{"id":1658,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2586,"value":"2023年に視聴回数トップ3のキャラクターは\n1. ヤッターマン\n2. 推しの子\n3. 福本伸行作品\n
でした。","pinned":false,"hidden":false,"mode":"md"},{"id":2765,"value":"以上から2023年のキャラクターCM王は
\n# 「推しの子」!!!\nと言えるのではないでしょうか。","pinned":false,"hidden":false,"mode":"md"},{"id":3084,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":477,"value":"### 考察\n2023年時点で、youtube上で最も公開されたキャラクターCMの形式は\n「アニメのキャラクター」が企業の「オリジナル商品」を紹介するものだったと言えます。そして、それが最も視聴されたものだったと言えます。\n
僕は『推しの子』のCM数が伸びたのは人気もさることながら、「アイドル」という要素を押し出した作品だったためか、人々の暮らしと結びつきの強い「音楽」と「容姿スタイル」に関するCMに起用しやすかったためだと考えています。\n
また、『クレヨンしんちゃん』や『ちびまる子ちゃん』などは長年愛されてきたという信頼から、『仮面ライダー』や『ゴジラ』などは世代の人に刺さるような商品に起用されることでCMを伸ばしていたと考えられます。\n
また、まれにアニメ・特撮とのコラボレーションが炎上してしまうケースがあり、そういったらリスクを踏まえると、企業独自のキャラクターを生み出すことがリスクが抑えられるために、オリジナルのCMがコラボレーションCMよりも多くなることが考えられる。","pinned":false,"hidden":false,"mode":"md"},{"id":420,"value":"### 聞きたいこと\nツリーマップのタイルの大きさは全て、視聴回数から出力していますが、少し単調だなと思うので、別の指標が欲しいが、何かアイデアが欲しい。","pinned":false,"hidden":false,"mode":"md"},{"id":2124,"value":"##### データ整理","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"url = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vTNO0qqpl9E-pDfKoez_6HzmXFs0x2GkL9ijZFt99NOs0cA-IdgX5apPk2TBhhdnNsWS8IEpYMVGZWL/pub?output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1689,"value":"url2 = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vTNO0qqpl9E-pDfKoez_6HzmXFs0x2GkL9ijZFt99NOs0cA-IdgX5apPk2TBhhdnNsWS8IEpYMVGZWL/pub?output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"dataset = d3.tsv(url, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"Inputs.table(dataset)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1415,"value":"selectedMonthID = await Month // 選択された月のIDを取得","pinned":false,"hidden":false,"mode":"ojs"},{"id":1428,"value":"monthData = months.get(selectedMonthID) // 選択された月のデータを取得","pinned":false,"hidden":false,"mode":"ojs"},{"id":1432,"value":"videoIDs = monthData\n .map((video) => video.ID)\n .filter((videoID) => videoID !== null) // \"null\" を取り除く // 各動画のIDを抽出","pinned":false,"hidden":false,"mode":"ojs"},{"id":1439,"value":"//3つだけ表示する場合\nrandomVideoIDs = videoIDs\n .sort(() => Math.random() - 0.5) // シャッフル\n .slice(0, 3) // ランダムに3つの動画IDを選択","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"titles = d3.group(dataset, (d) => d.title)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2918,"value":"goods = {\n const goods = d3.group(dataset, (d) => d.goods !== null);\n\n const goodsWithNull = goods.get(true) || [];\n const goodsWithoutNull = goods.get(false) || [];\n return goodsWithNull;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3047,"value":"Goods = d3.group(goods, (d) => d.goods)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3004,"value":"filteredGoods = companies.filter((item) => item.title !== null)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2401,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":2547,"value":"filteredCompanies = companies.filter((item) => item.title !== \"オリジナル\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2891,"value":"filteredCompanies2 = companies.filter((item) => item.title)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1115,"value":"months = new Map(\n [...d3.group(dataset, (d) => d.month)]\n .filter(([key, value]) => key !== null)\n .sort((a, b) => a[0] - b[0])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1175,"value":"IDs = new Map(\n [...d3.group(dataset, (d) => d.ID)].filter(([key, value]) => key !== null)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"attributes = d3.group(dataset, (d) => d.attribute)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1695,"value":"colorScale = d3\n .scaleOrdinal()\n .domain(dataset.map((d) => d.attribute)) // カテゴリのドメインを設定\n .range(d3.schemeCategory10) // 使用する色の範囲を指定","pinned":false,"hidden":false,"mode":"ojs"},{"id":2285,"value":"colorScale2 = d3\n .scaleOrdinal()\n .domain(dataset.map((d) => d.recent_broadcast_Year)) // カテゴリのドメインを設定\n .range(d3.schemeCategory10) // 使用する色の範囲を指定","pinned":false,"hidden":false,"mode":"ojs"},{"id":3018,"value":"colorScale3 = d3\n .scaleOrdinal()\n .domain(goods.map((d) => d.goods)) // カテゴリのドメインを設定\n .range(d3.schemeCategory10) // 使用する色の範囲を指定","pinned":false,"hidden":false,"mode":"ojs"},{"id":1731,"value":"treeData = {\n const nestedData = d3.group(dataset, (d) => d.CM_title);\n\n // nullでない値を持つデータだけを抽出\n const filteredData = Array.from(nestedData).filter(([key, value]) =>\n value.some((entry) => entry.value !== 0)\n );\n\n // 再度グループ化\n const newNestedData = new Map(filteredData);\n return newNestedData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3007,"value":"treeData3 = {\n const nestedData = d3.group(dataset, (d) => d.goods);\n\n // nullでない値を持つデータだけを抽出\n const filteredData = Array.from(nestedData).filter(([key, value]) =>\n value.some((entry) => entry.goods !== null)\n );\n\n // 再度グループ化\n const newNestedData = new Map(filteredData);\n return newNestedData;\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":3308,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1733,"value":"root = d3\n .hierarchy(treeData)\n .sum((d) => d.value)\n .sort((a, b) => b.value - a.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3053,"value":"root3 = d3\n .hierarchy(treeData3)\n .sum((d) => d.value)\n .sort((a, b) => b.value - a.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3372,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs"},{"id":3357,"value":"combinedData = Array.from(\n d3.rollup(\n root3.leaves(),\n (v) => ({ value: d3.sum(v, (d) => d.value), data: v[0].data }),\n (d) => d.data.company\n ),\n ([company, { value, data }]) => ({ company, value, data })\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2126,"value":"### Twitter(X)の投稿を表示する場合","pinned":false,"hidden":false,"mode":"md"},{"id":533,"value":"twttr = require(\"https://platform.twitter.com/widgets.js\").catch(\n () => window.twttr\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"function tweet(id, options) {\n const div = document.createElement(\"DIV\");\n Promise.resolve().then(() => twttr.widgets.createTweet(id, div, options));\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2134,"value":"### カラーコードの表示","pinned":false,"hidden":false,"mode":"md"},{"id":1650,"value":"import { Swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W3b","stdlib":"1","titling":"auto"}