2c:null 2d:["$","title",null,{"children":"空前の「グミ」ブーム、グミ人気商品の特徴は？ | TMU Dataviz Class | Observable"}] 32:T1956,{ const height = width * 0.68; const samemargin = width * 0.23; const margin = { top: 50, bottom: 10, left: samemargin + 20, right: samemargin }; const xVolume = 10; const yBetween = 100; const gap = 5; const baseSize = (width - margin.right - margin.left) / (xVolume - 1); const minSize = 15; const xScale = (width - margin.right - margin.left) / (xVolume - 1); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("background-color", "white"); function getOffsetY(data, xVolume, baseSize, marginTop) { const rows = Math.ceil(data.length / xVolume); return rows * baseSize + marginTop; } const size = baseSize - gap * 2; const maxQuantityPerBag = d3.max(fruitsOnlyFlavor, (d) => d.quantityPerBag) + 1; const insideSpace = size / (maxQuantityPerBag + 0.75); const insideStroke = 1.1; const sWidth = 3; const sWidthAdjust = 1.4; function dataRect(d, g, colorPattern, flavorgradation) { d3.range(d.quantityPerBag).forEach((i) => { const expansion = i * insideSpace; // 外側に広げる量 const strokeColor = flavorgradation(i / d.quantityPerBag); g.append("rect") .attr("width", size - sWidth / sWidthAdjust - expansion) .attr("height", size - sWidth / sWidthAdjust - expansion) .attr("x", -(size - sWidth / sWidthAdjust - expansion) / 2) .attr("y", -(size - sWidth / sWidthAdjust - expansion) / 2) .style("fill", "none") .style("stroke", strokeColor) .style("stroke-width", insideStroke); }); // メインの四角 g.append("rect") .attr("width", size) .attr("height", size) .attr("x", -size / 2) .attr("y", -size / 2) .style("fill", "white") .style("fill-opacity", 0) .style("stroke", colorScale(colorPattern)) .style("stroke-width", sWidth); } const fruitGroup = svg.append("g").attr("class", "fruitGroup"); const fruitgradation = d3.interpolateRgb("orange", "yellow"); fruitGroup .selectAll("g") .data(fruitsOnlyFlavor) .enter() .append("g") .attr("transform", (d, i) => { const x = (i % xVolume) * baseSize + margin.left; const y = Math.floor(i / xVolume) * baseSize + margin.top; return `translate(${x},${y})`; }) .each(function (d) { const g = d3.select(this); dataRect(d, g, "fruits", fruitgradation); }); const bothGroup = svg.append("g").attr("class", "bothGroup"); const bothgradation = d3.interpolateRgb("cyan", "yellow"); const bothOffset = getOffsetY( fruitsOnlyFlavor, xVolume, baseSize, margin.top ); bothGroup .selectAll("g") .data(bothFlavor) .enter() .append("g") .attr("transform", (d, i) => { const x = (i % xVolume) * baseSize + margin.left; const y = Math.floor(i / xVolume) * baseSize + bothOffset; // fruitsOnlyFlavorの分をずらしてy座標を設定 return `translate(${x},${y})`; }) .each(function (d) { const g = d3.select(this); dataRect(d, g, "both", bothgradation); }); const drinkGroup = svg.append("g").attr("class", "drinkGroup"); const drinkgradation = d3.interpolateRgb("dodgerblue", "#ccffee"); const drinkOffset = getOffsetY(bothFlavor, xVolume, baseSize, bothOffset); drinkGroup .selectAll("g") .data(drinkOnlyFlavor) .enter() .append("g") .attr("transform", (d, i) => { const x = (i % xVolume) * baseSize + margin.left; const y = Math.floor(i / xVolume) * baseSize + drinkOffset; // fruitsOnlyFlavorの分をずらしてy座標を設定 return `translate(${x},${y})`; }) .each(function (d) { const g = d3.select(this); dataRect(d, g, "drinks", drinkgradation); }); const otherGroup = svg.append("g").attr("class", "otherGroup"); const othergradation = d3.interpolateRgb("dimgray", "whitesmoke"); const otherOffset = getOffsetY( drinkOnlyFlavor, xVolume, baseSize, drinkOffset ); otherGroup .selectAll("g") .data(otherFlavor) .enter() .append("g") .attr("transform", (d, i) => { const x = (i % xVolume) * baseSize + margin.left; const y = Math.floor(i / xVolume) * baseSize + otherOffset; // fruitsOnlyFlavorの分をずらしてy座標を設定 return `translate(${x},${y})`; }) .each(function (d) { const g = d3.select(this); dataRect(d, g, "other", othergradation); }); function labelText(text, colorPattern, yPos) { svg .append("text") .attr("class", "figureText") .attr("text-anchor", "end") // 右寄せ .attr("x", margin.left * 0.8) // テキストの x 座標 .attr("y", yPos) // テキストの y 座標 .attr("fill", colorScale(colorPattern)) // テキストの色 .attr("font-size", "20px") // フォントサイズ .text(text); // テキストの内容 } labelText("フルーツ系", "fruits", baseSize); labelText("フルーツ兼飲み物", "both", bothOffset + baseSize / 8); labelText("飲み物系", "drinks", drinkOffset + baseSize / 8); labelText("その他", "other", otherOffset + baseSize / 8); svg .append("text") .attr("class", "text") .attr("text-anchor", "middle") .attr("x", width / 2) .attr("y", otherOffset + baseSize * 1.25) .attr("fill", "black") // テキストの色 .text("枠の総数（太線も含む）は一袋あたりの味の種類数"); // テキストの内容 const tooltip = //svg d3 .select("body") .append("div") .attr("class", "figureText") .style("position", "absolute") .style("background", "rgba(240, 240, 240, 0.7)") .style("color", "black") .style("padding", "5px 10px") .style("border-radius", "5px") .style("font-size", "13px") .style("pointer-events", "none") .style("display", "none"); // 各四角にツールチップを追加 svg .selectAll(".fruitGroup g, .bothGroup g, .drinkGroup g, .otherGroup g") .on("mouseover", function (event, d) { tooltip .style("display", "block") .html(`${d.name}
${d.flaverAndVariation}`); }) .on("mousemove", function (event) { tooltip .style("left", `${event.pageX + 10}px`) .style("top", `${event.pageY + 10}px`); }) .on("mouseout", function () { tooltip.style("display", "none"); }); return svg.node(); }33:Td08,{ //(3社、2社(SL)、2社(LF)、2社(FS)、1社(S)、1社(L)、1社(F) と商品をわけ、積み上げ棒グラフの予定。カーソルを当てることで名前が見れる。色は味の分類によって変え（三種）、切り替えで食感についての色分けor一言にする) const sets = [ { sets: ["セブンイレブン"], size: sevenOnly.length, data: sevenOnly }, { sets: ["ローソン"], size: lowsonOnly.length, data: lowsonOnly }, { sets: ["ファミリーマート"], size: famimaOnly.length, data: famimaOnly }, { sets: ["セブンイレブン", "ローソン"], size: SandL.length, data: SandL }, { sets: ["セブンイレブン", "ファミリーマート"], size: FandS.length, data: FandS }, { sets: ["ファミリーマート", "ローソン"], size: LandF.length, data: LandF }, { sets: ["セブンイレブン", "ローソン", "ファミリーマート"], size: allSell.length, data: allSell } ]; //const width = 400; const initialHeight = width * 0.4; let height = initialHeight; // div 要素を作成 const div = d3 .create("div") .style("overflow", "hidden") .style("height", `${height}px`) // 初期高さを設定 .style("transition", "height 0.5s ease"); // Venn 図を作成 const vennChart = venn.VennDiagram().width(width).height(initialHeight); // Venn 図を描画 const vennElement = d3.select(div.node()).datum(sets).call(vennChart); vennElement .selectAll("path") // 各セグメントを選択 .style("fill", function (d) { if (d.sets[0] === "セブンイレブン") return "#EE1D23"; // セブンイレブンの色 if (d.sets[0] === "ローソン") return "#1F5FA8"; // ローソンの色 if (d.sets[0] === "ファミリーマート") return "#00A041"; // ファミリーマートの色 return "#ccc"; // デフォルトの色 }); // テキストのスタイルを変更 vennElement .selectAll("text") .attr("class", "figureText") .style("fill", "black") .style("font-size", "15px"); //クリック後の要素 const clickContentsDiv = d3 .create("div") .style("margin-top", "10px") // 余白を追加 .style("font-size", "14px") .style("color", "black"); div.append(() => clickContentsDiv.node()); let clickedData = []; vennElement.selectAll("path").on("click", function (event, d) { // クリックされたセット名を取得 const clickedSet = d.sets.join(" かつ "); //クリック範囲の配列作成 clickedData.length = 0; clickedData.push(...d.data); //下部の展開 height = initialHeight * 2.5; div.style("height", `${height}px`); //展開後のコンテンツ clickedContent(clickContentsDiv, clickedSet, clickedData); //選択範囲の縁取り /*vennElement.selectAll("path").style("stroke", "none"); vennElement.selectAll("path").each(function (pathData) { if (!pathData || !pathData.sets) return; // `clickedSet` に完全一致する `path` のみ枠線を適用 const pathSet = pathData.sets.join(" and "); if (pathSet === clickedSet) { d3.select(this).style("stroke", "black").style("stroke-width", "3px"); } });*/ }); return div.node(); }34:Ta51,{ const height = 400; const keywords = Object.keys(soundTextureWords); const itemToCategory = new Map(); const nodes = []; const links = []; // ① ノードを登録（カテゴリも含める） keywords.forEach((category, i) => { const categoryFy = (i + 1) * (height / (keywords.length + 1)); nodes.push({ id: category, type: "category", fx: (width * 1) / 3, fy: categoryFy }); soundTextureWords[category].forEach((item, j) => { const itemFy = categoryFy + (j - (soundTextureWords[category].length - 1)) * 15 + 30; if (!itemToCategory.has(item.name)) { itemToCategory.set(item.name, item); // 最初のカテゴリを記録 nodes.push({ id: item.name, type: "item", fx: (width * 2) / 3, fy: itemFy }); } }); }); // ② リンクを登録*（全てのカテゴリ → そのアイテム） for (const category of keywords) { for (const item of soundTextureWords[category]) { links.push({ source: category, target: item.name }); } } // ③ D3.js の force-directed graph const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font", "14px sans-serif"); const simulation = d3 .forceSimulation(nodes) .force( "link", d3 .forceLink(links) .id((d) => d.id) .distance(50) ) //.force("charge", d3.forceManyBody().strength(-200)) .force("center", d3.forceCenter(width / 2, height / 2)); const link = svg .append("g") .selectAll("line") .data(links) .join("line") .attr("stroke", "#aaa") .attr("stroke-width", 1.5); const node = svg .append("g") .selectAll("circle") .data(nodes) .join("circle") .attr("r", 3) .attr("fill", (d) => (d.type === "category" ? "#ff8c00" : "lightgreen")); const text = svg .append("g") .selectAll("text") .data(nodes) .join("text") .attr("class", "figureText") .attr("text-align", (d) => (d.type === "category" ? "right" : "left")) .attr("font-size", (d) => (d.type === "category" ? 17 : 14)) .attr("x", 8) .attr("y", "0.31em") .text((d) => `${d.id}`); simulation.on("tick", () => { link .attr("x1", (d) => d.source.x) .attr("y1", (d) => d.source.y) .attr("x2", (d) => d.target.x) .attr("y2", (d) => d.target.y); node.attr("cx", (d) => d.x).attr("cy", (d) => d.y); text .attr("x", (d) => (d.type === "category" ? d.x - 60 : d.x + 8)) .attr("y", (d) => d.y + 4); }); return svg.node(); }35:T1243,{ const height = width * 0.6; const margin = { top: 20, right: 80, bottom: 40, left: 150 }; // データ変換 const processedData = seriesDateArray.map((d) => ({ series: d.series, year: d.sellBiginDate === "不明" ? null : Number(d.sellBiginDate), textureAndFeatures: d.textureAndFeatures || "", sourness: d.sourness })); // 年がわかるものと不明なものを分ける const knownData = processedData.filter((d) => d.year !== null); const unknownData = processedData.filter((d) => d.year === null); // シリーズを年代順にソート（不明は一番下） const sortedSeries = [...knownData] .sort((a, b) => a.year - b.year) // 古い順 .map((d) => d.series) .concat(unknownData.map((d) => d.series)); // "不明" を最後に追加 // X軸スケール（年代） const minYear = Math.floor(d3.min(knownData, (d) => d.year) / 10) * 10; // 10年単位 const maxYear = 2025; //Math.ceil(d3.max(knownData, (d) => d.year) / 10) * 10; const xScale = d3 .scaleLinear() .domain([minYear, maxYear]) .range([margin.left, width - margin.right]); // Y軸スケール（シリーズ名） const yScale = d3 .scaleBand() .domain(sortedSeries) .range([margin.top, height - margin.bottom - 40]) .padding(0.3); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("background", "lightgray"); // グリッド線（X軸） svg .append("g") .attr("class", "grid") .selectAll("line") .data(d3.range(minYear, maxYear + 1, 10)) .join("line") .attr("x1", (d) => xScale(d)) .attr("x2", (d) => xScale(d)) .attr("y1", margin.top) .attr("y2", height - margin.bottom - 40) .attr("stroke", "#ddd"); // グリッド線（Y軸） svg .append("g") .attr("class", "grid") .selectAll("line") .data(sortedSeries) .join("line") .attr("x1", margin.left) .attr("x2", width - margin.right) .attr("y1", (d) => yScale(d) + yScale.bandwidth() / 2) .attr("y2", (d) => yScale(d) + yScale.bandwidth() / 2) .attr("stroke", "#ddd"); // X軸（年代） svg .append("g") .attr("transform", `translate(0,${height - margin.bottom - 40})`) .call( d3 .axisBottom(xScale) .ticks((maxYear - minYear) / 10) .tickFormat(d3.format("d")) ); // Y軸（シリーズ名） svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale)); const keywords = [ "もに", "もち", "ふわ", "ぷに", "プル", "シャリ", "パリ", "プチっ" ]; // 色の判定関数 const getColor = (d) => { if ( d.textureAndFeatures.includes("固め") || d.textureAndFeatures.includes("さらに固め") ) { return "red"; // 固め系は赤 } if (keywords.some((keyword) => d.textureAndFeatures.includes(keyword))) { return "mediumpurple"; // 柔らか系キーワードならピンク } return "paleturquoise"; // それ以外は青 }; // 年があるデータを描画（点） svg .append("g") .selectAll("circle") .data(knownData) .join("circle") .attr("cx", (d) => xScale(d.year)) .attr("cy", (d) => yScale(d.series) + yScale.bandwidth() / 2) .attr("r", 6) .attr("stroke", (d) => (d.sourness === 1 ? "greenyellow" : "none")) .attr("fill", getColor); // "不明" のデータを描画（左端に配置） svg .append("g") .selectAll("circle.unknown") .data(unknownData) .join("circle") .attr("cx", margin.left) // 一番左に配置 .attr("cy", (d) => yScale(d.series) + yScale.bandwidth() / 2) .attr("r", 6) .attr("fill", getColor); const legend = svg .append("g") .attr("transform", `translate(${width / 2 - 100}, ${height - 30})`); // 下部中央に配置 const legendData = [ { color: "red", label: "ハード系" }, { color: "mediumpurple", label: "もに・もち・ふわなど" }, { color: "paleturquoise", label: "その他" } //{ color: "#ff8c00", label: "不明" } ]; legend .selectAll("g") .data(legendData) .join("g") .attr("transform", (d, i) => `translate(${i * 120}, 0)`) .each(function (d) { d3.select(this) .append("circle") .attr("cx", 10) .attr("cy", 0) .attr("r", 6) .attr("fill", d.color); d3.select(this) .append("text") .attr("x", 20) .attr("y", 5) .text(d.label) .attr("font-size", "12px") .attr("fill", "#333"); }); return svg.node(); }36:T89c,Data/style 37:T4ab,conveniGummiData = d3.tsv( conveniGummi, (d) => { const flavorKeys = ["fruits", "drinks", "other"]; const convenienceKeys = ["SEVEN", "LAWSON", "FAMIMA"]; const flavor = {}; flavorKeys.forEach((k) => { flavor[k] = +d[k]; delete d[k]; }); if (flavor.fruits === 1 && flavor.drinks === 0 && flavor.other === 0) { flavor.kind = "fruits"; } else if ( flavor.fruits === 0 && flavor.drinks === 1 && flavor.other === 0 ) { flavor.kind = "drinks"; } else if ( flavor.fruits === 0 && flavor.drinks === 0 && flavor.other === 1 ) { flavor.kind = "other"; } else if ( flavor.fruits === 1 && flavor.drinks === 1 && flavor.other === 0 ) { flavor.kind = "both"; } else { flavor.kind = "Mixed"; // それ以外の組み合わせ } const convenienceStore = {}; convenienceKeys.forEach((k) => { convenienceStore[k] = +d[k]; delete d[k]; }); return { ...d, quantityPerBag: +d.quantityPerBag, sourness: +d.sourness, flavor, convenienceStore, date: new Date(d.date) }; } //d3.autoType )38:T89d,clickedContent = (clickContentsDiv, clickedSet, clickedData) => { clickContentsDiv.html(`

販売店舗：${clickedSet} のみ

バブルの大きさは内容量(g)に比例。ハード食感に言及のあるものは赤い縁あり。

`); //const width = 300; const height = width * 0.4 * 2.5 - width * 0.5; const svg = d3.create("svg").attr("width", width).attr("height", height); function bubbleSize(diameter) { return Math.PI * Math.pow(diameter / 2, 2); } // データを階層構造に変換 const root = d3 .hierarchy({ children: clickedData }) .sum((d) => bubbleSize(d.gram)); // 各バブルのサイズを均等にする // バブルレイアウトを作成 const pack = d3.pack().size([width, height]).padding(5); const nodes = pack(root).leaves(); // バブルを描画 const bubbles = svg .selectAll("g") .data(nodes) .enter() .append("g") .attr("transform", (d) => `translate(${d.x},${d.y})`); bubbles .append("circle") .attr("r", 0) .style("fill", (d) => colorScale(d.data.flavor.kind)) .style("opacity", 0.5) .style("stroke", (d) => d.data.textureAndFeatures.includes("さらに固め") ? "#ff0000" : d.data.textureAndFeatures.includes("固め") ? "#ff4d4d" : "none" ) .style("stroke-width", 2) .transition() .delay(() => 10 + Math.random() * 200) .duration(350) .attr("r", (d) => d.r); bubbles .append("text") .attr("class", "figureText") .attr("dy", "1em") .attr("text-anchor", "middle") .style("fill", "black") .style("font-size", "10px") .each(function (d) { const textElement = d3.select(this); textElement .append("tspan") .attr("x", 0) // 中央揃え .attr("dy", "0em") // 上側に移動 .text(d.data.name); // 1行目 textElement .append("tspan") .attr("x", 0) // 中央揃え .attr("dy", "1em") // 2行目（下に移動） .text(d.data.flaverAndVariation); // 2行目 }); clickContentsDiv.append(() => svg.node()); }39:[{"id":"dd57e15e67f033de1fc384f115f1cc1726f2562049328b9992d41b61656130b875ff6736f0737a74906d06958fcaa7979b8bed7169f8d328947ffa436ffd2d01","href":"https://static.observableusercontent.com/files/dd57e15e67f033de1fc384f115f1cc1726f2562049328b9992d41b61656130b875ff6736f0737a74906d06958fcaa7979b8bed7169f8d328947ffa436ffd2d01","name":"thumbna.png","type":"image/png","lastModified":1738940094757.176,"size":6370668}] 30:{"id":"a7a7a128bff63bab","slug":"fuji_gummi","title":"空前の「グミ」ブーム、グミ人気商品の特徴は？","thumbnail":"14a16df5823040d0cec518c50a0db4c852f43a1e3996d33f10570d528dd29337","access_level":"public","create_time":"$D2024-12-02T05:52:56.848Z","update_time":"$D2025-02-08T03:16:31.265Z","view_time":null,"first_public_time":"$D2025-02-03T04:17:14.213Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"fdca81b2f5eb7de5","login":"tmu-dataviz-class","name":"TMU Dataviz Class","avatar_url":"https://avatars-next.observableusercontent.com/7549232d2187bf99f5cfbd7780436d4ce1cc4257fe3eae6585b5ff10b836499b","tier":"education_2026"},"version":1901,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f90c1c38e36efdcb","login":"fuji","name":"fuji","avatar_url":"https://avatars-next.observableusercontent.com/166ca2581c5bea84c62953ab6860363350e7f519a1c573c977c907d2eca64759","tier":null}],"members":[{"type":"individual","id":"f90c1c38e36efdcb","login":"fuji","name":"fuji","avatar_url":"https://avatars-next.observableusercontent.com/166ca2581c5bea84c62953ab6860363350e7f519a1c573c977c907d2eca64759","tier":null,"role":"editor"},{"type":"team","id":"fdca81b2f5eb7de5","login":"tmu-dataviz-class","name":"TMU Dataviz Class","avatar_url":"https://avatars-next.observableusercontent.com/7549232d2187bf99f5cfbd7780436d4ce1cc4257fe3eae6585b5ff10b836499b","tier":"education_2026","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"64342ad2a9267bf8","slug":"2024-final-project","title":"2024 Final Project","owner":{"id":"fdca81b2f5eb7de5","login":"tmu-dataviz-class","name":"TMU Dataviz Class"}},"type":"notebook","body":{"titling":"auto","title":"空前の「グミ」ブーム、グミ人気商品の特徴は？","cells":[{"id":0,"value":"

空前の「グミ」ブーム、グミ人気商品の特徴は？

\n\n

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　藤

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"

はじめに

\n 皆さんには、好きなお菓子や、よく買うお菓子はあるだろうか。甘いものからしょっぱいもの、昔からあるものから流行りのものまで、様々なバリエーションが展開され、容易に入手できる身近なものだが、私はその中でもグミをよく食べる。飴のように舐めることもできるし、簡単に噛むこともできる。チョコよりさっぱりとしたものが多く、早々に溶けて無くならない。ふと食べたくなってもコンビニに行けば30種類以上が販売されており、大抵チャック付きの袋に入っているため、移動中や作業中の合間にちょうど良い。\n \n

\n『ガム凋落で空前の「グミ」ブーム、意外な“けん引役”は？』（ダイヤモンド・オンライン,2024.9）https://diamond.jp/articles/-/350148 という記事では、グミの市場規模が、同じく口寂しい時に食べるものとして挙げられるガムを2021年に上回ったことが書かれており、食べた後にゴミが出ない、加工が容易で食感、見た目、味とバリエーションが豊富で好みや気分で選びやすいことが好調につながっていると述べている。\n

\n そこでGoogleトレンドでも、\"ガム\"と\"グミ\"という検索ワードの動向を見てみた。期間は、前述の記事で市場規模を比較していた2013年から、昨年2024年末である。\n
これを見ても、ガムは比較的横ばいなのに対し、2013年はガムがグミの2倍ほどの数値だったところから徐々に差がなくなっていき、2021年でグミが急激に増え、その後はグミがガムの2倍ほどの数値をとっている。\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":88,"value":"Plot.plot({\n marks: [\n Plot.line(trendData, {\n x: \"date\",\n y: \"gum\",\n stroke: \"lightgreen\",\n strokeWidth: 2 // 線の太さ\n }),\n Plot.line(trendData, {\n x: \"date\",\n y: \"gummi\",\n stroke: \"orange\", // 線の色\n strokeWidth: 2 // 線の太さ\n //title: \"グミ\"\n })\n ],\n x: {\n label: \"日付\",\n type: \"time\",\n tickFormat: \"%Y-%m-%d\" // 日付フォーマットを指定（必要なら）\n },\n y: {\n label: \"値\",\n grid: true\n },\n color: {\n legend: true // 凡例を表示\n },\n marginLeft: 100, // グラフの余白調整\n marginRight: 100,\n marginTop: 10,\n width: width, // グラフの幅\n height: 400 // グラフの高さ\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1890,"value":"

\n ※2023.11「大麻グミ」のニュースにより、本来グミというワードの検索数が過剰に増えていたが、今回参照したい要因とはいえないかつ比較の妨げになる増加であったため、グミに関しては大麻というワードが含まれていた場合は省いたものを集計している。\n \n

\n
さらに、甘いことや見た目から若い層や女性が主導していると思われがちだが、前述の記事では30・40代の男性が過去10年間での購入率の伸びがよく、\"炭酸系の味で、食感に弾力のあるハードグミ\"の購入が多いと締められている。\n

\n 私は主にコンビニでグミを購入するのだが、個人的にはマシュマロのような食感や見た目のものが増えていると感じている。それこそ、2021年ごろにSNS初で流行した地球グミも、そういった類だろう（筆者は食べたことはないが）。\n
そこで実際にコンビニの売り場状況を調査し、それらのグミ系のチャック付きパウチ菓子の傾向はどういったものなのか、味や食感などの特徴をそれぞれ可視化し、今日売られているグミの傾向を見ていきたい。\n

コンビニの売り場調査

\n ここで使用するデータは、大手コンビニ3社のお菓子売り場に陳列されていた、チャック付きパウチで包装されたグミとそれに準ずる商品を独自に記録、集計したものを使っている。セブンイレブンとローソンは1/9に、ファミリーマートは1/14に訪れ、全て同じ駅周辺の地域の店舗となっている。\n

\n 今回の集計の結果、全部で78種類の商品が確認できた。\n
この記事における種類は、同じシリーズでも味やバリエーションが異なる場合それぞれを1種類としている。\n
味やバリエーションをまとめると37シリーズであった。\n
また、商品や種類名、商品説明のワードより、食感の特徴が言及されていた場合、その特徴も記録している。固さが示唆されているものは\"固め\"、そこからさらに固いものが派生している場合や他商品よりもハードであることが強調されている場合\"さらに固め\"、その他の食感に関してはなるべく公式表記に準拠した表現で記録しているが、この項目には筆者の主観も含まれていることををご理解いただきたい。\n

味の系統は、フルーツ系、飲み物系、その他（梅やヨーグルト）に分けることができた。その内訳を並べると以下の通りとなる。

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":894,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1573,"value":"

\n いわゆるグミのイメージやバリエーションの多さの通り「フルーツ系」が42種と一番多いのは言わずもがなだが、「飲み物系」も、「フルーツ兼飲み物」としているものの中の”フルーツ風味ソーダ”のような味も飲み物の部類に入れれば、30種類近い量になる。
そして飲み物系のほとんどは炭酸で、炭酸ではないものは、「むっちりグミ」の\"乳酸菌ドリンク\"のみであった\n

\n 下の表は、それぞれのコンビニに置いてあった該当商品の種類数である。\n
また、販売店舗をベン図に可視化したものが以下となる。\n
見たいベン図の範囲をクリックすると、該当する商品のバブルチャートが展開される。\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":413,"value":"{\n const table = d3.create(\"table\").attr(\"class\", \"table\");\n const data = conveniGummiData;\n const conveniSumData = data.reduce(\n (acc, d) => {\n acc.seven += d.convenienceStore.SEVEN;\n acc.lawson += d.convenienceStore.LAWSON;\n acc.famima += d.convenienceStore.FAMIMA;\n return acc;\n },\n { seven: 0, lawson: 0, famima: 0 }\n );\n\n console.log(conveniSumData);\n\n const headers = [\"セブンイレブン\", \"ローソン\", \"ファミリーマート\"];\n table\n .append(\"thead\") //表の見出しを設定　デフォルトで架線が引かれる\n .append(\"tr\") //表の行を設定\n .selectAll(\"th\") //表の見出し用セルを選択\n .data(headers)\n .enter()\n .append(\"th\") //表の見出し用セルを適応\n .text((d) => d);\n\n table\n .append(\"tbody\")\n .append(\"tr\")\n .selectAll(\"td\")\n .data(Object.entries(conveniSumData))\n .enter()\n .append(\"td\")\n .text(([k, value]) => `${value}種`);\n\n return table.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":838,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"

\n 食感の特徴として、ハードさが強調されていたものには赤丸をつけたが、こうしてみるとかなり多く見える。正確にいうと36/78種類で、フルーツ系は21/42種と半分が、炭酸系は15/21種と約75％がそういった特徴を持つ。また、3社共通して確認できた商品も75%がハード系だった。\n
また、他商品と比べて内容量の多いものが多く見られる。\n

\n 前述の記事で言及されていた、\"炭酸系の味で、食感に弾力のあるハードグミ\"の需要は高いようだ。\n

もち？ぷに？シャリ？増える食感

\n では、他のグミの食感はどうなのか。\n
それぞれのグミの紹介文を見ていると、ハードや弾力といったものの他に、擬音を使っているものが多く見られた。\n 今回の分類のうち先ほどハード系としたもの以外で、商品紹介での食感の表現として使われていた擬音と、該当するシリーズは以下となる。\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1648,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1771,"value":"

\n 9シリーズ(雲グミと雪グミは名称で別れているが同社同シリーズとする)で、味も分けると16種類の商品で、特徴的な食感を擬音で表現していた。\n
同じものを繰り返す（ぷにぷになど）だけでなく、別の種類を組み合わせているもの（シャリもに、ふわシャリ）も見られた。\n

\n ここで、シリーズごとの販売開始時期と、食感の特徴ワードを可視化してみる。\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1787,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1849,"value":"

\n 2010年以降の商品から、特徴的な擬音が使用されているものが販売され出している。\n
また、ハード系のものは、グミがガムの売り上げを上回った2021年以降発売のものには少ないことがわかる。\n

最後に

\n今回、コンビニ3社で売られていたグミを調査したが、総数で見ると味も食感も、割と満遍なく展開されているように見られた。しかし、コンビニごとや、年代で分けて見ると、傾向が出てくるのは、この可視化によって見られた特徴だろう。\n\n

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":200,"value":"$36","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":122,"value":"urlGoogleTrend = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQRmqGzN6xF3xYGhbbvC2ttDiP4SbvVKOn79chPr6_1S98wFqCQB9uRoDdNhp8m-y99dMXWlQ8t6fk8/pub?gid=400306052&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"trendData = d3.tsv(\n urlGoogleTrend,\n (d) => ({\n date: new Date(d.date),\n gum: +d.gum,\n gummi: +d.gummi\n })\n //d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"conveniGummi = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vRjnZ8Z5HaGYOetVsXxkitTQV02MaUlxOhy1rqDjmuoTORxTHlGqTirP7hYhMfhL1fNHlaD4wsM4sMB/pub?gid=1364794454&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"sevenOnly = conveniGummiData.filter(\n (d) =>\n d.convenienceStore.SEVEN === 1 &&\n d.convenienceStore.LAWSON === 0 &&\n d.convenienceStore.FAMIMA === 0\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"lowsonOnly = conveniGummiData.filter(\n (d) =>\n d.convenienceStore.SEVEN === 0 &&\n d.convenienceStore.LAWSON === 1 &&\n d.convenienceStore.FAMIMA === 0\n );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"famimaOnly = conveniGummiData.filter(\n (d) =>\n d.convenienceStore.SEVEN === 0 &&\n d.convenienceStore.LAWSON === 0 &&\n d.convenienceStore.FAMIMA === 1\n );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"SandL = conveniGummiData.filter(\n (d) =>\n d.convenienceStore.SEVEN === 1 &&\n d.convenienceStore.LAWSON === 1 &&\n d.convenienceStore.FAMIMA === 0\n );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"LandF = conveniGummiData.filter(\n (d) =>\n d.convenienceStore.SEVEN === 0 &&\n d.convenienceStore.LAWSON === 1 &&\n d.convenienceStore.FAMIMA === 1\n );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"FandS = conveniGummiData.filter(\n (d) =>\n d.convenienceStore.SEVEN === 1 &&\n d.convenienceStore.LAWSON === 0 &&\n d.convenienceStore.FAMIMA === 1\n );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"allSell = conveniGummiData.filter(\n (d) =>\n d.convenienceStore.SEVEN === 1 &&\n d.convenienceStore.LAWSON === 1 &&\n d.convenienceStore.FAMIMA === 1\n );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"fruitsOnlyFlavor = conveniGummiData.filter((d) => d.flavor.fruits === 1 && d.flavor.drinks === 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"drinkOnlyFlavor = conveniGummiData.filter((d) => d.flavor.drinks === 1 && d.flavor.fruits === 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"bothFlavor = conveniGummiData.filter(d => d.flavor.fruits === 1 && d.flavor.drinks === 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"otherFlavor = conveniGummiData.filter((d) => d.flavor.other === 1 && d.flavor.fruits === 0 && d.flavor.drinks === 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1534,"value":"makerGroupData = d3.group(conveniGummiData, (d) => d.maker)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1779,"value":"seriesGroupData = d3.group(conveniGummiData, (d) => d.series)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1784,"value":"seriesDateArray = Array.from(seriesGroupData, ([series, items]) => ({\n series: series,\n sellBiginDate: items[0].sellBiginDate,\n textureAndFeatures: items[0].textureAndFeatures,\n sourness: items[0].sourness\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"hardTexture = conveniGummiData.filter(\n (d) =>\n d.textureAndFeatures.includes(\"固め\") ||\n d.textureAndFeatures.includes(\"さらに固め\")\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"soundTextureWords = {\n const keywords = [\n \"もに\",\n \"もち\",\n \"ふわ\",\n \"ぷに\",\n \"プル\",\n \"シャリ\",\n \"パリ\",\n \"プチっ\"\n ];\n\n return Object.fromEntries(\n keywords.map((keyword) => [\n keyword,\n conveniGummiData.filter((d) => d.textureAndFeatures.includes(keyword))\n ])\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"colorScale = d3\n .scaleOrdinal()\n .domain([\"fruits\", \"drinks\", \"both\", \"other\"])\n .range([\"orange\", \"deepskyblue\", \"#6be62e\", \"darkgray\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1097,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1899,"value":"imageUrl = await FileAttachment(\"thumbna.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"ライブラリ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":723,"value":"venn = await require(\"https://cdnjs.cloudflare.com/ajax/libs/venn.js/0.2.20/venn.min.js\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1"}} 31:"$30:body"