31:T9cf,{ replay1; const width = window.innerWidth; const height = width / 4; const margin = { top: 20, right: 20, bottom: 20, left: 20 }; const svg = d3.create("svg").attr("width", width).attr("height", height); const x = d3 .scaleLinear() .domain(d3.extent(rankingdata, (d) => d.year)) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain([11, 1]) .range([height - margin.bottom, margin.top]); const xAxis = d3.axisBottom(x).tickFormat(d3.format("d")); const yAxis = d3.axisLeft(y); svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis); svg.append("g").attr("transform", `translate(${margin.left},0)`).call(yAxis); const lines = [ { line: d3 .line() .x((d) => x(d.year)) .y((d) => y(d.ハローキティ)), color: "#D96565", strokeWidth: 6 }, { line: d3 .line() .x((d) => x(d.year)) .y((d) => y(d.マイメロディ)), color: "#F2D8E4", strokeWidth: 4 }, { line: d3 .line() .x((d) => x(d.year)) .y((d) => y(d.シナモロール)), color: "#55ABDA", strokeWidth: 4 }, { line: d3 .line() .x((d) => x(d.year)) .y((d) => y(d.クロミ)), color: "#C0BBD5", strokeWidth: 4 }, { line: d3 .line() .x((d) => x(d.year)) .y((d) => y(d.ポムポムプリン)), color: "#EBAC50", strokeWidth: 4 }, { line: d3 .line() .x((d) => x(d.year)) .y((d) => y(d.ポチャッコ)), color: "#7B7B7B", strokeWidth: 4 }, { line: d3 .line() .x((d) => x(d.year)) .y((d) => y(d.線消す用)), color: "black", strokeWidth: 4 } ]; lines.forEach(({ line, color, strokeWidth }) => { const path = svg .append("g") .append("path") .datum(rankingdata) .attr("d", line) .attr("fill", "none") .attr("stroke-width", strokeWidth) .attr("stroke", color) .attr("stroke-dasharray", function () { const length = this.getTotalLength(); return `${length} ${length}`; }) .attr("stroke-dashoffset", function () { return this.getTotalLength(); }); // アニメーションの適用 path.transition().duration(5000).attr("stroke-dashoffset", 0); }); return svg.node(); }32:T52c,

・シナモロール
- X:https://x.com/cinnamon_sanrio
- Instagram:https://www.instagram.com/47mon_sanrio_official/
- YouTube:https://www.youtube.com/channel/UCoACtIo4BxcvFBpOyF4WclA
- TikTok:https://www.tiktok.com/@47mon_sanrio
・ポチャッコ
- X(6キャラ混合アカウント):https://twitter.com/hapidanbui
- TikTok(6キャラ混合アカウント) :https://www.tiktok.com/@hapidanbui_sanrio
・クロミ
- X:https://x.com/kuromi_project
- Instagram:https://www.instagram.com/kuromi_project/
- YouTube:https://www.youtube.com/channel/UCC0HORqqyNRQkAB_GW1aWCw
- TikTok:https://www.tiktok.com/@kuromi_project
・ポムポムプリン
- X:https://x.com/purin_sanrio
- Instagram:https://www.instagram.com/pompompurin_25th
- TikTok:https://www.tiktok.com/@pompompurin_anime
・ハローキティ
- facebook:https://www.facebook.com/hellokitty.japan
- LINE:https://line.me/R/ti/p/@hellokitty_jp?from=page&openQrModal=true&searchId=hellokitty_jp
- YouTube:https://www.youtube.com/channel/UCyof-1Ko_jy2sOtivyTpc4Q
・マイメロディ
- X:https://x.com/Melody_Mariland
- YouTube:https://www.youtube.com/channel/UCJWkSpYmaQ_RCOnIasmYRxg
参照日：2025年1月7日〜1月13日

33:T1090,scatter_plot2 = (() => { replay2; const width = parseFloat( getComputedStyle(document.documentElement).getPropertyValue( "--graph-width" ) ) || 500; const height = width; const margin = { top: 30, right: 30, bottom: 50, left: 50 }; const xScale = d3 .scaleLinear() .domain([0, d3.max(wariai2data, (d) => d.獲得票数)]) .nice() .range([margin.left, width - margin.right]); const yScale = d3 .scaleLinear() .domain([0, 180]) .nice() .range([height - margin.bottom, margin.top]); const xAxis = d3 .axisBottom(xScale) .tickSize(-(height - margin.top - margin.bottom)) .tickFormat((d) => (d === 0 ? "" : d)); const yAxis = d3 .axisLeft(yScale) .tickSize(-(width - margin.left - margin.right)); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("overflow", "visible"); svg .append("g") .append("rect") .attr("width", width) .attr("height", height) .attr("opacity", 0.05); svg .append("g") .attr("class", "xAxis") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(xAxis); svg .append("g") .attr("class", "yAxis") .attr("transform", `translate(${margin.left}, 0)`) .call(yAxis); // X軸とY軸の数値のフォントサイズを変更 svg.selectAll(".xAxis text, .yAxis text").style("font-size", "13px"); svg .selectAll(".xAxis line, .yAxis line, .xAxis path, .yAxis path") .attr("stroke", "white"); // X軸とY軸のラベルを追加 svg .append("text") // X軸ラベル .attr("x", width / 2) .attr("y", height - 10) .attr("text-anchor", "middle") .attr("font-size", "15px") .attr("font-family", "Verdana, sans-serif") .text("獲得票数(百万票)"); svg .append("text") // Y軸ラベル .attr("x", -height / 2) .attr("y", 20) .attr("transform", "rotate(-90)") .attr("text-anchor", "middle") .attr("font-size", "15px") .attr("font-family", "Verdana, sans-serif") .text("割合の合計(%)"); const circle = svg .selectAll("circle") .data(wariai2data) .join("circle") .attr("cx", (d) => xScale(d.獲得票数)) .attr("cy", (d) => yScale(d.合計)) .attr("r", 0) // 初期状態（見えない） .attr("fill", (d) => { switch (d.キャラクター) { case "シナモロール": return "#55ABDA"; case "ポチャッコ": return "#7B7B7B"; case "クロミ": return "#C0BBD5"; case "ポムポムプリン": return "#EBAC50"; case "ハローキティ": return "#D96565"; case "マイメロディ": return "#F2D8E4"; } }); // **✨ アニメーション追加 ✨** circle .transition() .delay((d, i) => i * 500) // 各点に 500ms の遅延 .duration(1000) // 1000ms かけて拡大 .attr("r", 10); circle.each(function (d) { d3.select(this) .append("title") .text(`${d.キャラクター} (x: ${d.獲得票数} )`); }); const tooltip = svg .append("g") .attr("class", "tooltip") .style("pointer-events", "none") .style("visibility", "hidden"); tooltip .append("rect") .attr("fill", "white") .attr("stroke", "white") .attr("rx", 10) .attr("width", 190) .attr("height", 30) .attr("opacity", 0.8); const showMyTooltip = (event) => { const [mouseX, mouseY] = d3.pointer(event); const datum = d3.select(event.target).datum(); tooltip.attr("transform", `translate(${mouseX + 10},${mouseY + 10})`); tooltip .selectAll("text") .data([{ label: "キャラクター", value: datum.キャラクター }]) .join("text") .text((d) => `${d.label}: ${d.value}`) .attr("x", 10) .attr("y", (d, i) => 20 + 20 * i) .attr("font-size", "12px") .attr("font-family", "Verdana, sans-serif"); tooltip.style("visibility", "visible"); }; const hideMyTooltip = () => tooltip.style("visibility", "hidden"); circle .on("pointerenter pointermove", showMyTooltip) .on("pointerleave", hideMyTooltip); return svg.node(); })()34:T1245,scatter_plot = (() => { replay3; // サイズと余白 const width = parseFloat( getComputedStyle(document.documentElement).getPropertyValue( "--graph-width" ) ) || 500; const height = width; const margin = { top: 30, right: 30, bottom: 50, left: 50 }; // スケール関数 const xScale = d3 .scaleLinear() .domain([0, d3.max(matomedata, (d) => d.獲得票数)]) .nice() .range([margin.left, width - margin.right]); const yScale = d3 .scaleLinear() .domain([0, d3.max(matomedata, (d) => d.出会った回数)]) .nice() .range([height - margin.bottom, margin.top]); // 軸関数 const xAxis = d3 .axisBottom(xScale) .tickSize(-(height - margin.top - margin.bottom)) .tickFormat((d) => (d === 0 ? "" : d)); const yAxis = d3 .axisLeft(yScale) .tickSize(-(width - margin.left - margin.right)); // SVGの生成 const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("overflow", "visible"); // 背景 svg .append("g") .append("rect") .attr("width", width) .attr("height", height) .attr("opacity", 0.05); // X,Y軸の生成 svg .append("g") .attr("class", "xAxis") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(xAxis); svg .append("g") .attr("class", "yAxis") .attr("transform", `translate(${margin.left}, 0)`) .call(yAxis); // X軸とY軸の数値のフォントサイズを変更 svg.selectAll(".xAxis text, .yAxis text").style("font-size", "13px"); // 軸の線だけ白色にする svg .selectAll(".xAxis line, .yAxis line, .xAxis path, .yAxis path") .attr("stroke", "white"); // X軸とY軸のラベルを追加 svg .append("text") // X軸ラベル .attr("x", width / 2) .attr("y", height - 10) .attr("text-anchor", "middle") .attr("font-size", "15px") .attr("font-family", "Verdana, sans-serif") .text("獲得票数(百万票)"); svg .append("text") // Y軸ラベル .attr("x", -height / 2) .attr("y", 20) .attr("transform", "rotate(-90)") .attr("text-anchor", "middle") .attr("font-size", "15px") .attr("font-family", "Verdana, sans-serif") .text("出会った回数(回)"); // 円の生成 const circle = svg .selectAll("circle") .data(matomedata) .join("circle") .attr("cx", (d) => xScale(d.獲得票数)) .attr("cy", (d) => yScale(d.出会った回数)) .attr("r", 0) .attr("fill", (d) => { switch (d.キャラクター) { case "シナモロール": return "#55ABDA"; case "ポチャッコ": return "#7B7B7B"; case "クロミ": return "#C0BBD5"; case "ポムポムプリン": return "#EBAC50"; case "ハローキティ": return "#D96565"; case "マイメロディ": return "#F2D8E4"; } }); // **✨ アニメーション追加 ✨** circle .transition() .delay((d, i) => i * 500) // 各点に 500ms の遅延 .duration(1000) // 1000ms かけて拡大 .attr("r", 10); // 各円に title を追加 circle.each(function (d) { d3.select(this) .append("title") .text(`${d.キャラクター} (x: ${d.獲得票数} y: ${d.出会った回数})`); }); // ツールチップ const tooltip = svg .append("g") .attr("class", "tooltip") .style("pointer-events", "none") .style("visibility", "hidden"); tooltip .append("rect") .attr("fill", "white") .attr("stroke", "white") .attr("rx", 10) .attr("width", 190) .attr("height", 30) .attr("opacity", 0.8); const showMyTooltip = (event) => { const [mouseX, mouseY] = d3.pointer(event); const datum = d3.select(event.target).datum(); tooltip.attr("transform", `translate(${mouseX + 10},${mouseY + 10})`); tooltip .selectAll("text") .data([ { label: "キャラクター", value: datum.キャラクター } //{ label: "獲得票数", value: `${datum.獲得票数}万人` }, //{ label: "出会った回数", value: datum.出会った回数 } ]) .join("text") .text((d) => `${d.label}: ${d.value}`) .attr("x", 10) .attr("y", (d, i) => 20 + 20 * i) .attr("font-size", "12px") .attr("font-family", "Verdana, sans-serif"); tooltip.style("visibility", "visible"); }; const hideMyTooltip = () => tooltip.style("visibility", "hidden"); circle .on("pointerenter pointermove", showMyTooltip) .on("pointerleave", hideMyTooltip); return svg.node(); })()35:T901,chart5 = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, 450]); svg .append("g") .selectAll("g") .data(series) .join("g") .attr("fill", colorScale2) .selectAll("rect") .data((d) => d) .join("rect") .attr("x", (d, i) => x(d.data.date)) .attr("y", (d) => y(d[1])) .attr("height", (d) => y(d[0]) - y(d[1])) .attr("width", x.bandwidth()) .on("mouseover", showMyTooltip) .on("mousemove", showMyTooltip) .on("mouseout", hideMyTooltip); // X軸ラベル追加 svg.append("g").call(xAxis); // Y軸ラベル追加 //svg.append("g").call(yAxis); // ツールチップのグループを作成 const tooltip = svg .append("g") .attr("class", "tooltip") .style("pointer-events", "none") .style("opacity", 0); tooltip .append("rect") .attr("fill", "white") .attr("stroke", "black") .attr("rx", 10) .attr("width", 220) .attr("height", 160) .attr("opacity", 0.8); // ツールチップのテキスト const tooltipText = tooltip .selectAll("text") .data([0, 1, 2, 3, 4, 5, 6]) // 3行のテキスト用のデータ .join("text") .attr("x", 10) .attr("y", (d, i) => 20 + 20 * i) .attr("font-size", "12px") .attr("font-family", "Verdana, sans-serif"); // ツールチップ非表示関数 function hideMyTooltip() { tooltip.style("opacity", 0); } function showMyTooltip(event) { const [mouseX, mouseY] = d3.pointer(event); const datum = d3.select(event.target).datum(); tooltip.attr("transform", `translate(${mouseX + 10},${mouseY + 10})`); // date の情報を最初の行にする const tooltipData = [{ label: "年代", value: datum.data.date }]; // a, b, c, d, ... の数値データを取得し、"%" を付ける Object.entries(datum.data) .filter(([key]) => key !== "date") // date を除外 .forEach(([key, value]) => { tooltipData.push({ label: key.toUpperCase(), value: `${value}%` }); }); // ツールチップのテキストを更新 tooltipText .data(tooltipData) .join("text") .text((d) => `${d.label}: ${d.value}`) .attr("x", 10) .attr("y", (d, i) => 20 + 20 * i); tooltip.style("opacity", 1); } return svg.node(); }36:T7b6,37:[{"id":"04a3b9ca9479ba16520d77637d6b88bddfc32db7869384ddc096b727e6e56650f09adeb07b16fce0364fcc3327c9c946e26285a2f0a0f152609126bd56a9e247","href":"https://static.observableusercontent.com/files/04a3b9ca9479ba16520d77637d6b88bddfc32db7869384ddc096b727e6e56650f09adeb07b16fce0364fcc3327c9c946e26285a2f0a0f152609126bd56a9e247","name":"スクリーンショット 2025-01-20 12@1.41.36.png","type":"image/png","lastModified":1737353197865.953,"size":620875},{"id":"850ab42b74b9178e8a5f2a443f08bf5e87f760e48d803368172350125a7f8746acda8ee6b9b3285820f36c4b82f3ba42257c7770fddd6dabb5f6026f89b2796f","href":"https://static.observableusercontent.com/files/850ab42b74b9178e8a5f2a443f08bf5e87f760e48d803368172350125a7f8746acda8ee6b9b3285820f36c4b82f3ba42257c7770fddd6dabb5f6026f89b2796f","name":"daimei.png","type":"image/png","lastModified":1738227229780.287,"size":102654},{"id":"23cfd8a8d520ad23eccc166f8342925b8b51360aa190fe19f46714b8c8de543488053083e250f9708785232d8d00ec593be0551b1fbd5d4f7a965031ddc9bfa4","href":"https://static.observableusercontent.com/files/23cfd8a8d520ad23eccc166f8342925b8b51360aa190fe19f46714b8c8de543488053083e250f9708785232d8d00ec593be0551b1fbd5d4f7a965031ddc9bfa4","name":"スクリーンショット 2025-02-01 15.35.50.png","type":"image/png","lastModified":1738391757457.104,"size":941767},{"id":"bb959946952dc79c3cd65fa3dc364bf55c90f6a087c96f64610dd8d72465e68c318c9c5df4afb67c01fc29b172a4757028204c69015410cd21f55a99aef988f3","href":"https://static.observableusercontent.com/files/bb959946952dc79c3cd65fa3dc364bf55c90f6a087c96f64610dd8d72465e68c318c9c5df4afb67c01fc29b172a4757028204c69015410cd21f55a99aef988f3","name":"moppu.jpg","type":"image/jpeg","lastModified":1738552455931.459,"size":321598},{"id":"bcdd552661fb1846fba616d4867bb65fd6956cea700971d866ecd1185ad81e71f798560acf49911b1041b3edfe6cc0b6eac5545bceea07f4f395e72701a442b2","href":"https://static.observableusercontent.com/files/bcdd552661fb1846fba616d4867bb65fd6956cea700971d866ecd1185ad81e71f798560acf49911b1041b3edfe6cc0b6eac5545bceea07f4f395e72701a442b2","name":"web.png","type":"image/png","lastModified":1738556151725.513,"size":99018},{"id":"c2dbbbb59fadd6f63fc4ec2f5daaca421c1d9c8ba6ff47dcfe5f662bab7159aeb94dc5ba4f0ffd3b3409e0998519aebdad99d46cc73a0aec445b25f85bfa5b65","href":"https://static.observableusercontent.com/files/c2dbbbb59fadd6f63fc4ec2f5daaca421c1d9c8ba6ff47dcfe5f662bab7159aeb94dc5ba4f0ffd3b3409e0998519aebdad99d46cc73a0aec445b25f85bfa5b65","name":"sanrio@2.png","type":"image/png","lastModified":1737033431646.846,"size":1032261},{"id":"0045546eb5c6c27ccd0a80332d6dfcc026e9aa88144779db7c55428c800873d3b4a5e0f7ccb99f5af4dd79cf58263853e67469a10e076c408090987d4d2bbb25","href":"https://static.observableusercontent.com/files/0045546eb5c6c27ccd0a80332d6dfcc026e9aa88144779db7c55428c800873d3b4a5e0f7ccb99f5af4dd79cf58263853e67469a10e076c408090987d4d2bbb25","name":"スクリーンショット 2025-01-27 11.25.09.png","type":"image/png","lastModified":1737944716482.109,"size":2328124},{"id":"45e9a644e9b82e6f9703ac44d260eae280bc7a10514958348e92a90cc55e39ca3b81607495d4014bdd273d7c05f151b83a11378a7a04f26b3832991d5096fb64","href":"https://static.observableusercontent.com/files/45e9a644e9b82e6f9703ac44d260eae280bc7a10514958348e92a90cc55e39ca3b81607495d4014bdd273d7c05f151b83a11378a7a04f26b3832991d5096fb64","name":"スクリーンショット 2025-01-27 13.48.03.png","type":"image/png","lastModified":1737953290435.213,"size":307736},{"id":"d452e57955481e878ad256eb5ebd6c50148b5b0f5c5882b5d08b47b2b2634bb9c156394ab2678cb5b7ca247971f21413e1bed4e69bc87e4f02b1dbe669f7f53c","href":"https://static.observableusercontent.com/files/d452e57955481e878ad256eb5ebd6c50148b5b0f5c5882b5d08b47b2b2634bb9c156394ab2678cb5b7ca247971f21413e1bed4e69bc87e4f02b1dbe669f7f53c","name":"スクリーンショット 2025-01-27 13.56.51.png","type":"image/png","lastModified":1737953815300.375,"size":1291249}] 2f:{"title":"ハローキティはなぜサンリオキャラクター大賞で1位を取らないのか〜サンリオキャラクター大賞で1位を取るには？〜","cells":[{"id":0,"value":"# ハローキティはなぜサンリオキャラクター大賞で1位を取らないのか
〜サンリオキャラクター大賞で1位を取るには？〜\n

TAKESAKO Honoka

","pinned":false,"hidden":false,"mode":"md"},{"id":2845,"value":"web = FileAttachment(\"web.png\").image({ width: width })","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"

はじめに

","pinned":false,"hidden":false,"mode":"md"},{"id":804,"value":"日本で昔から親しまれているキャラクターとして、サンリオのキャラクターたちが挙げられる。その中でも日本を代表する大人気キャラクターが「ハローキティ」だ。2024年で50周年を迎え、現在東京国立博物館で開催されているハローキティ展は、連日大勢の人で賑わっている。ハローキティの人気は日本を超え、世界中で社会現象を巻き起こすほどだ。日本の「KAWAII」文化を広めた第一人者として、知らない人はいないだろう。\n
2024年7月に開催された第11回NRC全国キャラクター調査からも、ハローキティの知名度はキャラクターの中でも圧倒的であることが見られる。","pinned":false,"hidden":false,"mode":"md"},{"id":971,"value":"Plot.plot({\n width: width,\n height: width / 4,\n style: {\n fontSize: \"9px\"\n },\n marks: [\n Plot.barY(\n ninchidata,\n Plot.groupX(\n { y: \"max\" },\n {\n x: \"キャラクター\",\n y: \"認知率\",\n // tip: true,\n sort: { x: \"y\", reverse: true },\n fill: (d) => (d[\"認知率\"] >= 95 ? \"#D96565\" : \"black\")\n }\n )\n ),\n\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1032,"value":"

\n引用：日本リサーチセンター,\n\"第11回 NRC全国キャラクター調査\nPart4:日本と海外の有名キャラクター,Q1 以下の「キャラクター群」の中で、あなたがご存知のものをすべてお知らせください\",2024年11月01日, https://www.nrc.co.jp/report/241101.html (アクセス日:2025年1月25日)

\n","pinned":false,"hidden":false,"mode":"md"},{"id":140,"value":"しかし、サンリオキャラクターの人気順を決める「サンリオキャラクター大賞」では、ハローキティの順位は低迷している。\n以下2024年サンリオキャラクター大賞の１位〜６位をピックアップし、今までの順位をまとめた推移グラフである。
\n※順位が11位以下だった年は描画されていない\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":283,"value":"sanrio2 = FileAttachment(\"sanrio@2.png\").image({ width: width })","pinned":false,"hidden":false,"mode":"ojs"},{"id":887,"value":"

\n 画像出典：サンリオオンラインショップ(https://shop.sanrio.co.jp/)\n

","pinned":false,"hidden":false,"mode":"md"},{"id":2232,"value":"viewof replay1 = Inputs.button(\"リプレイ\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2224,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":891,"value":"上のグラフの赤い線に着目すると、、ハローキティはここ近年1位を取ることが少ないことがわかる。
\nそもそもサンリオキャラクター大賞とは、サンリオのキャラクターの中から人気投票によって順位を決めるイベントだ。サンリオの月刊紙「いちご新聞」で始まり、1986年から毎年開催されている。\n
\n
キャラクターへの投票方法は、大まかに分類すると以下の4つである。\n","pinned":false,"hidden":false,"mode":"md"},{"id":1640,"value":"

\n・WEB投票（各キャラクターへ1日1回投票可能）
\n・毎日WEB投票するとボーナスでもらえる投票券での追加WEB投票
\n・グッズの購入金額に応じで投票(サンリオショップで1,100円以上買うと、550円ごとに3票分もらえる)
\n・ Sanrio+(ポイントカード）で貯められるスマイル（ポイント）で投票\n

\n","pinned":false,"hidden":false,"mode":"md"},{"id":1749,"value":"このような条件で、2024年サンリオキャラクター大賞上位６キャラの獲得票数は以下のグラフの通りであった。","pinned":false,"hidden":false,"mode":"md"},{"id":2872,"value":"Plot.plot({\n width: width,\n height: width / 4,\n marginLeft: 100,\n style: {\n fontSize: \"12px\"\n },\n marks: [\n Plot.barY(\n matomedata,\n Plot.groupX(\n { y: \"sum\" },\n {\n x: \"キャラクター\",\n y: \"獲得票数（総計）\",\n tip: true,\n fill: (d) => colorScale(d.キャラクター),\n sort: { x: \"-y\" }\n }\n )\n ),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1043,"value":"これを踏まえ、なぜ世界的な人気を誇るハローキティはサンリオキャラクター大賞で1位を取らないかという疑問から、サンリオキャラクター大賞で1位を取るのはどうしたら良いのかを仮説を立てて検証していく。","pinned":false,"hidden":false,"mode":"md"},{"id":303,"value":"

仮説1：キャラクターと顧客の接点

","pinned":false,"hidden":false,"mode":"md"},{"id":310,"value":"キャラクターが好きになるきっかけには、キャラクターと顧客との接点が重要だ。サンリオ CDO(Chief Digital Officer)の田口歩氏は、インタビューで以下のように語っている。","pinned":false,"hidden":false,"mode":"md"},{"id":312,"value":"

\n\"魅力的なキャラクターを生み出すだけでは、ビジネスが始まらない。キャラクターを「育てる」ためには、いかに顧客に支持してもらうかが重要だ。そのために、キャラクターと顧客との接点を生み出すべく、リアルとデジタルの双方でアプローチしている。
\nリアルの接点は、サンリオショップをはじめ、“キャラクターに会えるテーマパーク”のサンリオピューロランド、Instagramの流行により需要が増したキャラクターカフェなどが当てはまる。デジタル面では、公式サイトやオンラインショップ、SNSなど用途別に顧客接点を用意。それぞれ顧客体験に違いが出ないよう、サンリオの世界観を合わせているという。\"\n

","pinned":false,"hidden":false,"mode":"md"},{"id":1690,"value":"

引用：もりやみほ,”サンリオが世代を超えて選ばれる理由とは？顧客との長期的な関係構築を目指すキャラクター戦略”,2019年3月13日,https://exp-d.com/home-7/3427/, (アクセス日：2025年1月14日)\n

","pinned":false,"hidden":false,"mode":"md"},{"id":1046,"value":"サンリオ社が定義するキャラクラーと顧客の接点が多ければ多いほど、サンリオ社から売り出されているキャラクターということになる。サンリオ社から売り出されているキャラクターほど、順位が高くなるのではないかと思い、この仮説を立てた。\n
以下サンリオ社が示す接点ごとに、上位6キャラクターの起用数などを比較した。\n","pinned":false,"hidden":false,"mode":"md"},{"id":383,"value":"

1.サンリオショップ

\nサンリオオンラインショップでのグッズ販売数の比較\n","pinned":false,"hidden":false,"mode":"md"},{"id":1860,"value":"

参照：サンリオオンラインショップ(https://shop.sanrio.co.jp)\n
参照日:2025年1月14日

","pinned":false,"hidden":false,"mode":"md"},{"id":417,"value":"

2.テーマパーク

\nサンリオが所有する２つのテーマパーク(サンリオピューロランド及びハーモニーランド)でどれだけキャラクターが起用されているかを、以下４つの指標をもとに比較\n","pinned":false,"hidden":false,"mode":"md"},{"id":513,"value":"

①ショー/パレード出演数

","pinned":false,"hidden":false,"mode":"md"},{"id":520,"value":"

②アトラクション起用数

","pinned":false,"hidden":false,"mode":"md"},{"id":524,"value":"

③グッズ販売数

","pinned":false,"hidden":false,"mode":"md"},{"id":531,"value":"

④フード起用数

","pinned":false,"hidden":false,"mode":"md"},{"id":1864,"value":"

参照：サンリオピューロランド(https://www.puroland.jp), ハーモニーランド(https://www.harmonyland.jp)\n
参照日:2025年1月14日

","pinned":false,"hidden":false,"mode":"md"},{"id":436,"value":"

3.キャラクターカフェ

","pinned":false,"hidden":false,"mode":"md"},{"id":548,"value":"キャラクターカフェでどれだけキャラクターのメニューがあるかを比較\n","pinned":false,"hidden":false,"mode":"md"},{"id":1897,"value":"

参照（2025年1月14日時点でのコラボメニュー含む）:
\n・サンリオカフェ:https://www.sanrio.co.jp/specialsite/sanriocafe/:
\n・サンリオクレープ号:https://www.sanrio.co.jp/news/spots/cafewagon-hara-20250115/:
\n・サンリオキャラクターズガーデンカフェ:https://www.paselaresorts.com/collaboration/sanriocharacters-garden-cafe/#menu:
\n・シナモロールカフェ:https://www.cinnamorollcafe.com/shinjuku/menu/:
\n・OTARU CAFE×HELLO KITTY:http://otarucafehellokitty.com/menu/:
\n・ポムポムプリンカフェ:https://pompompurincafe.com/menu:
\n・HELLO KITTY SMILE:https://awaji-resort.com/hellokittysmile/restaurant/:
\n・HELLO KITTY SHOW BOX:https://awaji-resort.com/hellokittyshowbox/restaurant/:
\n・長崎グラバー園×ハローキティ:https://www.sanrio.co.jp/news/goods/kt-glover-garden-20241217/?utm_source=fb&utm_medium=social&utm_campaign=fb_kt__kt_241217_20241217_9:
\n・スシロー×シナモロール:https://www.akindo-sushiro.co.jp/campaign/detail.php?id=3752:
\n・FLIPPER'S×シナモロール・マイメロディ:https://www.flavorworks.co.jp/flippers-cinnamoroll-cafe
\n参照日:2025年1月14日

","pinned":false,"hidden":false,"mode":"md"},{"id":439,"value":"

4.公式SNS

","pinned":false,"hidden":false,"mode":"md"},{"id":1899,"value":"キャラクター別に所持しているSNSを調べ、2025年1月7日0:00〜2025年1月13日23:59の1週間の総投稿数を比較","pinned":false,"hidden":false,"mode":"md"},{"id":593,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":2758,"value":"以上の結果をまとめると、以下の表のようになる。このデータから、各指標ごとに6キャラクターのなかでどれだけ起用されているかを割合で計算し、ツリーマップにまとめた。","pinned":false,"hidden":false,"mode":"md"},{"id":1337,"value":"Inputs.table(\n matomedata\n .sort((a, b) => b.boxoffice - a.boxoffice)\n .map((d, i) => ({\n ...d,\n rank: i + 1,\n year: String(d.year).replace(/,/g, \"\")\n })),\n {\n columns: [\n \"キャラクター\",\n \"グッズ販売数\",\n \"ショー起用数\",\n \"アトラクション起用数\",\n \"テーマパークのグッズ販売数\",\n \"テーマパークのフード起用数\",\n \"サンリオカフェのフード起用数\",\n \"SNS投稿数\"\n ],\n format: {\n id: d3.format(\"09d\")\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3024,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":1349,"value":"Treemap(data2, {\n path: (d) => d.name.replace(/\\./g, \"/\"), // e.g., \"flare/animate/Easing\"\n value: (d) => d.size, // size of each node (file); null for internal nodes (folders)\n group: (d) => d.name.split(\".\")[1], // e.g., \"animate\" in \"flare.animate.Easing\"; for color\n label: (d, n) =>\n [\n //d.name.split(\".\").at(1) || \"\",\n d.name.split(\".\").at(-1),\n n.value.toLocaleString(\"en\")\n ].join(\"\\n\"),\n title: (d, n) => `${d.name}\\n${n.value.toLocaleString(\"en\")}`, // text to show on hover\n colors: [\"#F2D8E4\", \"#55ABDA\", \"#7B7B7B\", \"#C0BBD5\", \"#EBAC50\", \"#D96565\"],\n tile: d3.treemapBinary,\n width: width,\n height: width / 2,\n fillOpacity: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2571,"value":"やはりハローキティが占める割合が1番大きいが、マイメロディ、シナモロール、クロミとは大きく差が開いていない。割合の合計と獲得票数で散布図を作成すると以下のようになった。","pinned":false,"hidden":false,"mode":"md"},{"id":2747,"value":"viewof replay2 = Inputs.button(\"リプレイ\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2240,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2579,"value":"どれだけキャラクターと顧客の接点(どれだけサンリオ社から売り出されているか)と獲得票数には相関は見られなかった。","pinned":false,"hidden":false,"mode":"md"},{"id":441,"value":"

仮説2:キャラクターを普段の生活でどれだけ目にするか

","pinned":false,"hidden":false,"mode":"md"},{"id":737,"value":"単純接触効果(特定の人や物事に対して繰り返し接することで、好印象を持つようになる心理的現象)により、普段よく見かけるキャラクターには多くのファンがつきやすく、順位が上がるのではないかと仮定した。筆者の体感では1番ハローキティを見かける気がするが、実際はどうなのだろうか。","pinned":false,"hidden":false,"mode":"md"},{"id":443,"value":"2025年1月7日0:00~2025年1月13日23:59まで、日常で受動的にどれだけサンリオキャラを目にするかを記録してみた。（自分の持ち物や検索した時などは筆者の好みが色濃く反映されてしまうため除いた）\n

\n以下のデータが出会った回数の一覧である。","pinned":false,"hidden":false,"mode":"md"},{"id":468,"value":"Inputs.table(\n dataset\n .sort((a, b) => b.boxoffice - a.boxoffice)\n .map((d, i) => ({\n ...d,\n rank: i + 1,\n year: String(d.year).replace(/,/g, \"\")\n })),\n {\n columns: [\"date\", \"character\", \"place\", \"content\", \"detail\"],\n format: {\n id: d3.format(\"09d\")\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1180,"value":"キャラクター別に回数をまとめると以下の通りであった","pinned":false,"hidden":false,"mode":"md"},{"id":777,"value":"Plot.plot({\n width: width,\n height: width / 4,\n marginLeft: 100,\n style: {\n fontSize: \"12px\"\n },\n color: {\n domain: seikatsudata.map((d) => d.character), // キャラクターを色分けの基準に\n range: [\"#55ABDA\", \"#C0BBD5\", \"#EBAC50\", \"#D96565\", \"#F2D8E4\", \"#7B7B7B\"]\n },\n marks: [\n Plot.barY(\n seikatsudata,\n Plot.groupX(\n { y: \"count\" }, // 集計方法\n {\n x: \"character\",\n tip: true,\n fill: \"character\",\n sort: { x: \"y\", reverse: true }\n } // グループ化と色分け\n )\n ),\n Plot.ruleY([0])\n ],\n axes: [\n {\n orient: \"bottom\",\n title: \"キャラクター\" // X軸のタイトルを変更\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1730,"value":"キャラクターごとの出会った回数と獲得票数で散布図を作成すると以下のようになる。","pinned":false,"hidden":false,"mode":"md"},{"id":2752,"value":"viewof replay3 = Inputs.button(\"リプレイ\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1399,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2434,"value":"出会った回数と獲得票数には強い相関は見られなかった。
\nまた、出会った場所やどのような媒体で見かけたかを棒グラフにし、キャラクターごとに色分けすると以下のようになった。","pinned":false,"hidden":false,"mode":"md"},{"id":1527,"value":"Plot.plot({\n width: width,\n height: width / 3,\n marginLeft: 100,\n style: {\n fontSize: \"12px\"\n },\n color: { legend: true },\n marks: [\n Plot.frame({ strokeOpacity: 0.1 }), // フレームの設定\n Plot.barY(\n seikatsudata,\n Plot.groupX(\n { y: \"count\" }, // y軸の合計\n {\n x: \"place\",\n\n fill: (d) => colorScale(d.character),\n\n tip: true,\n sort: { x: \"y\", reverse: true }\n } // X軸ごとに積み上げ\n )\n ),\n Plot.ruleY([0]) // Y=0の基準線\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2594,"value":"Plot.plot({\n width: width,\n height: width / 3,\n marginLeft: 100,\n style: {\n fontSize: \"12px\"\n },\n color: { legend: true },\n marks: [\n Plot.frame({ strokeOpacity: 0.1 }), // フレームの設定\n Plot.barY(\n seikatsudata,\n Plot.groupX(\n { y: \"count\" }, // y軸の合計\n {\n x: \"content\",\n\n fill: (d) => colorScale(d.character),\n\n tip: true,\n sort: { x: \"y\", reverse: true }\n } // X軸ごとに積み上げ\n )\n ),\n Plot.ruleY([0]) // Y=0の基準線\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2632,"value":"出会った場所としてはメディア媒体が多く、写真やイラストとして新商品の情報が載せられていることが多いからである。
\nまた、ハローキティ特有の特徴として、街中や電車内、駅で見かけることが多く、媒体としてはぬいぐるみはハローキティでしか見かけなかった。これは街ゆく人々がハローキティを多くつけていたことが要因として挙げられ、ハローキティをファッションとして身につける人が多いのではないかと考察される。","pinned":false,"hidden":false,"mode":"md"},{"id":598,"value":"

仮説３：どれだけ熱意のあるファンがついているか

","pinned":false,"hidden":false,"mode":"md"},{"id":638,"value":"仮説１や仮説２から、キャラクターと顧客の接点の多さや、キャラクターに出会った回数とサンリオキャラクター大賞の順位の相関は見られなかった。
その点から、ハローキティは日常に馴染んでいるキャラクターがゆえに投票を熱心に行うファンが少なく、ライトなファンが多いのではないかと推測した。ということはつまり、他の順位が高いキャラクターのファンは投票などにも積極的なファンが多いのではないか？\n","pinned":false,"hidden":false,"mode":"md"},{"id":2954,"value":"Plot.plot({\n width: width,\n height: width / 4,\n //marginLeft: 100,\n style: {\n fontSize: \"12px\"\n },\n y: { axis: null },\n marks: [\n Plot.barY(\n matomedata,\n Plot.groupX(\n { y: \"sum\" },\n {\n x: \"キャラクター\",\n y: \"会員数\",\n sort: { x: \"-y\" },\n fill: (d) => colorScale(d.キャラクター)\n }\n )\n ),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1589,"value":"

引用：MarkeZine,\n\"データ活用で大切なのは「ユーザーが嫌がることはしない」。サンリオが実現した、ファン目線の施策とは\",2023年5月29日, https://markezine.jp/article/detail/42086 (アクセス日:2025年1月30日)

","pinned":false,"hidden":false,"mode":"md"},{"id":1260,"value":"上記のグラフは、Sanrio+において会員証に設定されているキャラクターである。(細かい数値は発表されていない)
\nそもそもSanrio+とはポイントカードのようなもので、これを利用するのはサンリオショップで買い物したりテーマパークに行く人々なので、ここで設定されているキャラクターの数は「推しにお金を使う」ファンの人数と言える。\n
これを見ると、シナモロール、マイメロディはハローキティよりも「推しにお金を使う」ファンが多いことがわかる。","pinned":false,"hidden":false,"mode":"md"},{"id":1917,"value":"サンリオキャラクター大賞はグッズの購入金額やスマイル(Sanrio+のポイント)でも投票が行えるので、ファンの母数は少なくても、推し活を熱心に行うファンが多いキャラクターは順位が上がる。\n

\nここで、推し活を積極的に行なっている年齢層について考えてみる。","pinned":false,"hidden":false,"mode":"md"},{"id":2099,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2669,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":2064,"value":"

引用：株式会社ネオマーケティング,\n\"推し活に関する調査 2024年\",2024年6月3日,https://corp.neo-m.jp/report/investigation/entertainment_008/ (アクセス日:2025年2月1日)

","pinned":false,"hidden":false,"mode":"md"},{"id":2069,"value":"上のグラフは「推し活に費やしている金額・月平均」の年代別グラフである。上のグラフの結果みると、10~30代が使用金額が多く、その後は減少傾向が見られる。キャラクターに対する推し活(グッズの購入額など)も同様なのではないか。","pinned":false,"hidden":false,"mode":"md"},{"id":2341,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":2365,"value":"html`

${chart1}

${chart2}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2371,"value":"html`

${chart3}

${chart4}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1331,"value":"

\n引用：日本リサーチセンター,\n\"第11回 NRC全国キャラクター調査\nPart4:日本と海外の有名キャラクター\",2024年11月01日, https://www.nrc.co.jp/report/241101.html (アクセス日:2025年2月1日)

\n","pinned":false,"hidden":false,"mode":"md"},{"id":2379,"value":"このグラフは年代ごとにキャラクターの好感度を調査したものである（ポムポムプリンとマイメロディはデータがないため除く）。これをキャラクターごとのファンの年代内訳と仮定すると、「推し活」に多くお金を使う10~30代の割合がポチャッコやクロミには相対的に多い。このことから、ファンの母数は少ないが、熱狂的に応援しているファンがいることで、順位が高くなっていくと推測される。","pinned":false,"hidden":false,"mode":"md"},{"id":633,"value":"

考察

","pinned":false,"hidden":false,"mode":"md"},{"id":2465,"value":"ここまで見てみると、ハローキティは顧客との接点も多く、日常で出会う回数も多い。しかし熱狂的なファンは少ないと考えられる。その理由として、逆にグッズ展開などがとても多いことから、ハローキティを「応援しよう！」とする層が少ないからではないか。\n
\nハローキティは冒頭でも示した通り、知名度95%を誇る「超有名キャラクター」だ。それと比較すると他のキャラクターは知名度が低かったり、グッズの数が少なかったりと、「私が応援しなきゃ！」というファン心理が動いているのではないかと推測する。また、ファンが熱狂的になる要因として「グッズを収集したい「情報を追いたい」という点がある。グッズ展開や情報の多さから、ハローキティのすべてを追うことは難しい。このことから熱狂的なファンが少ないのでないかと考察する。\n
\nこのことから、サンリオキャラクター大賞で1位を取るにはグッズなどを多く購入する10〜30代の「熱狂的な」ファンを多くつけるとともに、ファンが応援したくなるような適度なグッズ展開やメディア露出を目指す必要があると考える。\n","pinned":false,"hidden":false,"mode":"md"},{"id":1325,"value":"

まとめ

","pinned":false,"hidden":false,"mode":"md"},{"id":2503,"value":"ここまでハローキティはなぜサンリオキャラクター大賞で1位を取らないのかという疑問から、サンリオキャラクター大賞で1位を取るにはどうしたらよいかを考察した。
\nちなみに筆者の推しキャラは「まるもふびより」で、2024年時点で23位と年々順位を落としているのでもっとグッズ展開を増やして頑張ってほしい。","pinned":false,"hidden":false,"mode":"md"},{"id":2734,"value":"moppu = FileAttachment(\"moppu.jpg\").image({ width: (width / 5) * 2 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"

データ処理用

","pinned":false,"hidden":false,"mode":"md"},{"id":2789,"value":"

スタイル

","pinned":false,"hidden":false,"mode":"md"},{"id":1604,"value":"$36","pinned":false,"hidden":false,"mode":"html"},{"id":2791,"value":"

データ

","pinned":false,"hidden":false,"mode":"md"},{"id":957,"value":"nichiurl = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vS35q9Thx2UlMYz0eVuRlOIFgDvYYGBupuhNK3E5EbJWWeSaJMlYT_x8qr6HBIPijWMq6jmm3m3d6pQ/pub?gid=812698363&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":960,"value":"ninchidata = d3.tsv(nichiurl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"rankingurl = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vS35q9Thx2UlMYz0eVuRlOIFgDvYYGBupuhNK3E5EbJWWeSaJMlYT_x8qr6HBIPijWMq6jmm3m3d6pQ/pub?gid=1629393023&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"rankingdata = d3.tsv(rankingurl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":942,"value":"matomeurl = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vS35q9Thx2UlMYz0eVuRlOIFgDvYYGBupuhNK3E5EbJWWeSaJMlYT_x8qr6HBIPijWMq6jmm3m3d6pQ/pub?gid=432777016&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":945,"value":"matomedata = d3.tsv(matomeurl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1340,"value":"wariai=\"https://docs.google.com/spreadsheets/d/e/2PACX-1vS35q9Thx2UlMYz0eVuRlOIFgDvYYGBupuhNK3E5EbJWWeSaJMlYT_x8qr6HBIPijWMq6jmm3m3d6pQ/pub?gid=1740515947&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1342,"value":"wariaidata = d3.tsv(wariai)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2495,"value":"wariai2=\"https://docs.google.com/spreadsheets/d/e/2PACX-1vS35q9Thx2UlMYz0eVuRlOIFgDvYYGBupuhNK3E5EbJWWeSaJMlYT_x8qr6HBIPijWMq6jmm3m3d6pQ/pub?gid=1988323445&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2497,"value":"wariai2data = d3.tsv(wariai2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"seikatsuurl = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vS35q9Thx2UlMYz0eVuRlOIFgDvYYGBupuhNK3E5EbJWWeSaJMlYT_x8qr6HBIPijWMq6jmm3m3d6pQ/pub?gid=0&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"seikatsudata = d3.tsv(seikatsuurl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1073,"value":"dataset = seikatsudata.map((d) => ({\n date: new Date(Date.UTC(d.year, d.month - 1, d.day, d.hour, d.minute)),\n ...d\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1095,"value":"dataOfDates = {\n // データに　dateOnly と msec を追加\n // msecは、00:00からのミリ秒\n return dataset.map((d) => ({\n ...d,\n dateOnly: new Date(\n Date.UTC(\n d.date.getUTCFullYear(),\n d.date.getUTCMonth(),\n d.date.getUTCDate()\n )\n ),\n msec: (d.date.getUTCHours() * 60 + d.date.getUTCMinutes()) * 60 * 1000\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1284,"value":"dataOfDates.sort((a, b) => {\n const customOrder = [\n /*\n \"シナモロール\",\n \"ポチャッコ\",\n \"クロミ\",\n \"ポムポムプリン\",\n \"ハローキティ\",\n \"マイメロディ\"\n */\n \"マイメロディ\",\n \"ハローキティ\",\n \"ポムポムプリン\",\n \"クロミ\",\n \"ポチャッコ\",\n \"シナモロール\"\n ];\n return customOrder.indexOf(a.character) - customOrder.indexOf(b.character);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1346,"value":"data2 = {\n const rootName = \"サンリオ\";\n const rootNode = { name: rootName, size: null };\n const characterNode = wariaidata.map((d) => ({\n name: `${rootName}.${d.キャラクター}`,\n size: null\n }));\n const childrenNodes = wariaidata.flatMap((d) => {\n const keys = Object.keys(d).slice(1, -1);\n return keys.map((key) => ({\n name: `${rootName}.${d.キャラクター}.${key}`,\n size: +d[key]\n }));\n });\n\n return [rootNode, ...characterNode, ...childrenNodes];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2244,"value":"kokan=\"https://docs.google.com/spreadsheets/d/e/2PACX-1vS35q9Thx2UlMYz0eVuRlOIFgDvYYGBupuhNK3E5EbJWWeSaJMlYT_x8qr6HBIPijWMq6jmm3m3d6pQ/pub?gid=1380113620&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2246,"value":"kokandata = d3.tsv(kokan)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2273,"value":"chart1 = Plot.plot({\n width: width / 2,\n height: width / 4,\n y: { domain: [0, 24] },\n style: {\n fontSize: \"11px\"\n },\n marks: [\n Plot.barY(\n kokandata,\n Plot.groupX(\n { y: \"sum\" },\n {\n x: \"年代\",\n y: \"ポチャッコ\",\n fill: \"#7B7B7B\",\n tip: true\n }\n )\n ),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2271,"value":"chart2 = Plot.plot({\n width: width / 2,\n height: width / 4,\n y: { domain: [0, 24] },\n style: {\n fontSize: \"11px\"\n },\n marks: [\n Plot.barY(\n kokandata,\n Plot.groupX(\n { y: \"sum\" },\n { x: \"年代\", y: \"クロミ\", tip: true, fill: \"#C0BBD5\" }\n )\n ),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2267,"value":"chart3 = Plot.plot({\n width: width / 2,\n height: width / 4,\n y: { domain: [0, 24] },\n style: {\n fontSize: \"11px\"\n },\n marks: [\n Plot.barY(\n kokandata,\n Plot.groupX(\n { y: \"sum\" },\n { x: \"年代\", y: \"シナモロール\", tip: true, fill: \"#55ABDA\" }\n )\n ),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2265,"value":"chart4 = Plot.plot({\n width: width / 2,\n height: width / 4,\n y: { domain: [0, 24] },\n style: {\n fontSize: \"11px\"\n },\n marks: [\n Plot.barY(\n kokandata,\n Plot.groupX(\n { y: \"sum\" },\n { x: \"年代\", y: \"ハローキティ\", tip: true, fill: \"#D96565\" }\n )\n ),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2819,"value":"

カラースケール

","pinned":false,"hidden":false,"mode":"md"},{"id":1537,"value":"colorScale = d3\n .scaleOrdinal()\n .domain([\n \"シナモロール\",\n \"ポチャッコ\",\n \"クロミ\",\n \"ポムポムプリン\",\n \"ハローキティ\",\n \"マイメロディ\"\n ])\n .range([\"#55ABDA\", \"#7B7B7B\", \"#C0BBD5\", \"#EBAC50\", \"#D96565\", \"#F2D8E4\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2546,"value":"colorScale2 = d3\n .scaleOrdinal()\n .domain([\n \"0円~1万円未満\",\n \"1万円以上〜3万円未満\",\n \"3万円以上〜5万円未満\",\n \"5万円以上〜10万円未満\",\n \"10万円以上〜30万円未満\",\n \"30万円以上\"\n ])\n .range([\"#b3afaf\", \"#ffc3bf\", \"#fca39d\", \"#ff7970\", \"#ff4e42\", \"#fc1203\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2832,"value":"

ツリーマップ

","pinned":false,"hidden":false,"mode":"md"},{"id":1193,"value":"import { Treemap } from \"@d3/treemap-component\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1099,"value":"dateFormat = (date) => {\n const dow = (d) => \"日月火水木金土\".at(new Date(d).getDay());\n return d3.utcFormat(`%m月%d日（${dow(date)}）`)(date);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2829,"value":"

積み上げ棒グラフ

","pinned":false,"hidden":false,"mode":"md"},{"id":2082,"value":"data5 = [\n {\n date: \"10~20代\",\n \"0円~1万円未満\": 65.2,\n \"1万円以上〜3万円未満\": 16.9,\n \"3万円以上〜5万円未満\": 11.2,\n \"5万円以上〜10万円未満\": 3.8,\n \"10万円以上〜30万円未満\": 2.6,\n \"30万円以上\": 0.3\n },\n {\n date: \"30代\",\n \"0円~1万円未満\": 61.8,\n \"1万円以上〜3万円未満\": 21,\n \"3万円以上〜5万円未満\": 7.3,\n \"5万円以上〜10万円未満\": 7,\n \"10万円以上〜30万円未満\": 2,\n \"30万円以上\": 0.9\n },\n {\n date: \"40代\",\n \"0円~1万円未満\": 74.6,\n \"1万円以上〜3万円未満\": 14.3,\n \"3万円以上〜5万円未満\": 5.6,\n \"5万円以上〜10万円未満\": 3.1,\n \"10万円以上〜30万円未満\": 2.1,\n \"30万円以上\": 0.3\n },\n {\n date: \"50代\",\n \"0円~1万円未満\": 80.7,\n \"1万円以上〜3万円未満\": 10.1,\n \"3万円以上〜5万円未満\": 4.3,\n \"5万円以上〜10万円未満\": 2.5,\n \"10万円以上〜30万円未満\": 1.8,\n \"30万円以上\": 0.6\n },\n {\n date: \"60代\",\n \"0円~1万円未満\": 81,\n \"1万円以上〜3万円未満\": 10.8,\n \"3万円以上〜5万円未満\": 4.4,\n \"5万円以上〜10万円未満\": 1.7,\n \"10万円以上〜30万円未満\": 1.5,\n \"30万円以上\": 0.6\n },\n {\n date: \"70代\",\n \"0円~1万円未満\": 83.8,\n \"1万円以上〜3万円未満\": 9.9,\n \"3万円以上〜5万円未満\": 4.2,\n \"5万円以上〜10万円未満\": 1.6,\n \"10万円以上〜30万円未満\": 0.5,\n \"30万円以上\": 0\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2085,"value":"series = d3\n .stack()\n .keys([\n \"0円~1万円未満\",\n \"1万円以上〜3万円未満\",\n \"3万円以上〜5万円未満\",\n \"5万円以上〜10万円未満\",\n \"10万円以上〜30万円未満\",\n \"30万円以上\"\n ])(data5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2087,"value":"x = d3\n .scaleBand()\n .domain(data5.map((d) => d.date))\n .range([50, 600])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2089,"value":"y = d3\n .scaleLinear()\n .domain([0, d3.max(series, (d) => d3.max(d, (d) => d[1]))])\n .range([400, 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2095,"value":"xAxis = (g) =>\n g\n .attr(\"transform\", \"translate(0, 400)\")\n .call(d3.axisBottom(x).tickSizeOuter(0)) // tickFormat を削除\n .call((g) => g.selectAll(\".domain\").remove())\n .attr(\"font-size\", \"8\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2097,"value":"yAxis = (g) =>\n g\n .attr(\"transform\", \"translate(50, 0)\")\n .call(d3.axisLeft(y).ticks(null, \"s\"))\n .call((g) => g.selectAll(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}