27:null 28:["$","title",null,{"children":"Labubu | Adrien | Observable"}] 2d:T35ed,{ const data = labubu.map((d) => ({ date: new Date(d.Time), value: +d.labubu })); const events = [ { id: 1, date: new Date("2025-06-10"), label: "Auction", source: "Reuters", title: "Human-sized Labubu figure sells for more than $150,000 at Beijing auction", summary: "Auction attention helped push Labubu beyond collector circles into broader mainstream visibility.", url: "https://www.reuters.com/world/china/labubu-human-sized-figure-sells-over-150000-beijing-auction-2025-06-10/" }, { id: 2, date: new Date("2025-06-18"), label: "Release cycle", source: "Global Times", title: "Labubu momentum intensifies around the June release cycle", summary: "The June release window lines up with the steep acceleration into the July peak.", url: "https://www.globaltimes.cn/page/202506/1336497.shtml" }, { id: 3, date: new Date("2025-07-28"), label: "Celebrity + Comic-Con", source: "Reuters", title: "Labubu remains hot as celebrity buzz and Comic-Con visibility sustain interest", summary: "Late-July amplification likely helped interest stay elevated instead of collapsing immediately after the peak.", url: "https://www.reuters.com/world/china/labubu-fans-dote-over-ugly-cute-doll-trending-comic-con-2025-07-28/" } ]; const pink = "#c4407a"; const pinkSoft = "#e891c0"; const pinkLight = "#f5d0e8"; const lilac = "#b47abf"; const cream = "#fdf0f8"; const textDark = "#3d1a3a"; const textMid = "#6e4a72"; const border = "#f0aed8"; const width = 900; const height = 560; const margin = { top: 74, right: 30, bottom: 52, left: 56 }; const x = d3 .scaleUtc() .domain(d3.extent(data, (d) => d.date)) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d.value)]) .nice() .range([height - margin.bottom, margin.top]); const line = d3 .line() .x((d) => x(d.date)) .y((d) => y(d.value)) .curve(d3.curveMonotoneX); const area = d3 .area() .x((d) => x(d.date)) .y0(y(0)) .y1((d) => y(d.value)) .curve(d3.curveMonotoneX); const bisectDate = d3.bisector((d) => d.date).center; const eventPoints = events.map((e) => { const i = bisectDate(data, e.date); const nearest = data[Math.max(0, Math.min(data.length - 1, i))]; return { ...e, plotDate: nearest.date, plotValue: nearest.value }; }); const peak = data.reduce((a, b) => (a.value > b.value ? a : b)); // dot 1 fixed to sit on the line const dotOffsets = { 1: { dx: 0, dy: 0 }, 2: { dx: 0, dy: 0 }, 3: { dx: 0, dy: 0 } }; const root = html`

Labubu Hit Pop Culture in 2025

Interest climbs in stages, peaks in July 2025, and fades gradually rather than crashing—suggesting a stacked hype cycle powered by releases, media coverage, and late-July cultural amplification.

`; const chartWrap = root.querySelector("#chart-wrap"); const tooltip = d3 .select(chartWrap) .append("div") .style("position", "absolute") .style("pointer-events", "none") .style("opacity", 0) .style("width", "300px") .style("background", "#fff0fa") .style("border", `1.5px solid ${border}`) .style("border-radius", "16px") .style("box-shadow", "0 20px 50px rgba(196,64,122,0.15)") .style("overflow", "hidden") .style("z-index", 20) .style("transition", "opacity 120ms ease") .style("font-family", "var(--sans-serif, 'Cabin', system-ui, sans-serif)"); const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("display", "block") .style("width", "100%") .style("height", "auto") .style("font-family", "var(--sans-serif, 'Cabin', system-ui, sans-serif)"); const defs = svg.append("defs"); const gradient = defs .append("linearGradient") .attr("id", "labubu-gradient") .attr("x1", "0%") .attr("x2", "0%") .attr("y1", "0%") .attr("y2", "100%"); gradient .append("stop") .attr("offset", "0%") .attr("stop-color", pink) .attr("stop-opacity", 0.22); gradient .append("stop") .attr("offset", "100%") .attr("stop-color", pinkLight) .attr("stop-opacity", 0.02); const imgCx = x(peak.date); const imgCy = y(peak.value) + 200; const imgR = 56; defs .append("clipPath") .attr("id", "labubu-img-clip") .append("circle") .attr("cx", imgCx) .attr("cy", imgCy) .attr("r", imgR); svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisLeft(y) .ticks(5) .tickSize(-(width - margin.left - margin.right)) .tickFormat((d) => d) ) .call((g) => g.select(".domain").remove()) .call((g) => g .selectAll(".tick line") .attr("stroke", "rgba(196,64,122,0.15)") .attr("stroke-dasharray", "4,3") ) .call((g) => g .selectAll(".tick text") .attr("fill", lilac) .attr("font-size", 12) .attr("x", -10) .style( "font-family", "var(--sans-serif, 'Cabin', system-ui, sans-serif)" ) ); svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3 .axisBottom(x) .ticks(d3.utcMonth.every(1)) .tickFormat((d) => d3.utcFormat("%b %y")(d).toLowerCase()) .tickSizeOuter(0) ) .call((g) => g.select(".domain").attr("stroke", "rgba(196,64,122,0.2)")) .call((g) => g.selectAll(".tick line").attr("stroke", "rgba(196,64,122,0.2)") ) .call((g) => g .selectAll(".tick text") .attr("fill", lilac) .attr("font-size", 12) .style( "font-family", "var(--sans-serif, 'Cabin', system-ui, sans-serif)" ) ); svg .append("text") .attr("x", margin.left) .attr("y", margin.top - 8) .attr("fill", lilac) .attr("font-size", 12) .attr("font-weight", 700) .style("font-family", "var(--sans-serif, 'Cabin', system-ui, sans-serif)") .text("Search interest"); svg .append("path") .datum(data) .attr("fill", "url(#labubu-gradient)") .attr("d", area); svg .append("path") .datum(data) .attr("fill", "none") .attr("stroke", pinkSoft) .attr("stroke-opacity", 0.35) .attr("stroke-width", 10) .attr("d", line); svg .append("path") .datum(data) .attr("fill", "none") .attr("stroke", pink) .attr("stroke-width", 3.5) .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .attr("d", line); svg .append("circle") .attr("cx", imgCx) .attr("cy", imgCy) .attr("r", imgR + 8) .attr("fill", "rgba(255,240,250,0.92)") .attr("stroke", border) .attr("stroke-width", 2.5); svg .append("image") .attr("href", image) .attr("x", imgCx - imgR) .attr("y", imgCy - imgR) .attr("width", imgR * 2) .attr("height", imgR * 2) .attr("clip-path", "url(#labubu-img-clip)") .attr("preserveAspectRatio", "xMidYMid slice"); svg .append("circle") .attr("cx", x(peak.date)) .attr("cy", y(peak.value)) .attr("r", 5.5) .attr("fill", pink) .attr("stroke", cream) .attr("stroke-width", 2.5); const peakLblX = imgCx + imgR + 16; const peakLblY = imgCy - 2; const focus = svg .append("g") .style("display", "none") .style("pointer-events", "none"); focus .append("circle") .attr("r", 5) .attr("fill", pink) .attr("stroke", cream) .attr("stroke-width", 2); focus .append("rect") .attr("x", 10) .attr("y", -27) .attr("width", 104) .attr("height", 32) .attr("rx", 8) .attr("fill", "#fce4f3") .attr("stroke", border) .attr("stroke-width", 1); focus .append("text") .attr("class", "focus-label") .attr("x", 18) .attr("y", -7) .attr("fill", "#8c1a5a") .attr("font-size", 12) .attr("font-weight", 700) .style("font-family", "var(--sans-serif, 'Cabin', system-ui, sans-serif)"); function positionTooltipFromPoint(px, py) { const wrapW = chartWrap.getBoundingClientRect().width || width; const cardW = 300; const cardH = 185; const pad = 12; let left = px + 16; let top = py - cardH / 2; if (left + cardW > wrapW - pad) left = px - cardW - 16; if (top < pad) top = pad; if (top + cardH > height - pad) top = height - cardH - pad; tooltip.style("left", `${left}px`).style("top", `${top}px`); } function showTooltip(d) { tooltip.style("opacity", 1).html(`

${d.source}

${d.title}

${d.summary}

${d.label}

`); } function hideTooltip() { tooltip.style("opacity", 0); } svg .append("rect") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.left - margin.right) .attr("height", height - margin.top - margin.bottom) .attr("fill", "transparent") .lower() .on("mouseenter", () => focus.style("display", null)) .on("mouseleave", () => { focus.style("display", "none"); hideTooltip(); }) .on("mousemove", function (event) { const [mx] = d3.pointer(event, this); const dt = x.invert(mx); const i = bisectDate(data, dt); const d = data[Math.max(0, Math.min(data.length - 1, i))]; focus.attr("transform", `translate(${x(d.date)},${y(d.value)})`); focus .select(".focus-label") .text(`${d3.utcFormat("%b %Y")(d.date)}: ${d.value}`); }); const annotations = svg .append("g") .selectAll("g.event") .data(eventPoints) .join("g") .attr("class", "event") .attr("transform", (d) => { const off = dotOffsets[d.id] || { dx: 0, dy: 0 }; return `translate(${x(d.plotDate) + off.dx},${y(d.plotValue) + off.dy})`; }) .style("cursor", "pointer"); annotations .append("circle") .attr("r", 12) .attr("fill", "#fce4f3") .attr("stroke", pink) .attr("stroke-width", 2.2); annotations .append("circle") .attr("r", 5.5) .attr("fill", "#fff") .attr("stroke", pink) .attr("stroke-width", 1.5); annotations .append("text") .attr("text-anchor", "middle") .attr("dy", "0.35em") .attr("font-size", 10) .attr("font-weight", 800) .attr("fill", "#8c1a5a") .style("font-family", "var(--sans-serif, 'Cabin', system-ui, sans-serif)") .text((d) => d.id); annotations .append("circle") .attr("r", 18) .attr("fill", "transparent") .on("mouseenter", function (event, d) { showTooltip(d); const off = dotOffsets[d.id] || { dx: 0, dy: 0 }; positionTooltipFromPoint(x(d.plotDate) + off.dx, y(d.plotValue) + off.dy); }) .on("mousemove", function (event, d) { const off = dotOffsets[d.id] || { dx: 0, dy: 0 }; positionTooltipFromPoint(x(d.plotDate) + off.dx, y(d.plotValue) + off.dy); }) .on("mouseleave", () => { hideTooltip(); }); svg .append("text") .attr("x", width - margin.right) .attr("y", height - 10) .attr("text-anchor", "end") .attr("fill", lilac) .attr("font-size", 12) .style("font-family", "var(--sans-serif, 'Cabin', system-ui, sans-serif)") .text("Source: Google Trends"); chartWrap.appendChild(svg.node()); return root; }2e:[{"id":"17d16594df95e2ed2e942d37cfc09c97c4e267959e44c58ca44dbb51b082139af775430abfbe7e809802397ee7ab46415a8083d75410769558eead135f27397d","href":"https://static.observableusercontent.com/files/17d16594df95e2ed2e942d37cfc09c97c4e267959e44c58ca44dbb51b082139af775430abfbe7e809802397ee7ab46415a8083d75410769558eead135f27397d","name":"labubu.csv","type":"text/csv","lastModified":1789588022708.605,"size":286}] 2b:{"id":"62b6c13d7b5768bb","slug":null,"title":"Labubu","thumbnail":"80c00bb18858c37ec48f222e5c1e9200ef9630275cfa621492e16acafbc65693","access_level":"public","create_time":"$D2026-09-16T19:47:02.708Z","update_time":"$D2026-09-16T20:00:03.489Z","view_time":null,"first_public_time":"$D2026-09-16T19:47:02.708Z","has_unpublished_edits":null,"fork":{"id":"27da56177b75482a","slug":null,"title":"pop culture","owner":{"id":"f95c5551c5b4848e","login":"deepalikank","name":"Deepali Kank"}},"stars":0,"starred":false,"owner":{"type":"team","id":"31544195b17a8898","login":"savarseno","name":"Adrien","avatar_url":"https://avatars-next.observableusercontent.com/d6695db0d62259b21341202b3c190216248b56f3bc1a31786d554a2f22b96945","tier":"starter_2024"},"version":62,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"862a02ad1f217246","login":"savarseno","name":"Adrien","avatar_url":"https://avatars-next.observableusercontent.com/d6695db0d62259b21341202b3c190216248b56f3bc1a31786d554a2f22b96945","tier":null}],"members":[{"type":"team","id":"31544195b17a8898","login":"savarseno","name":"Adrien","avatar_url":"https://avatars-next.observableusercontent.com/d6695db0d62259b21341202b3c190216248b56f3bc1a31786d554a2f22b96945","tier":"starter_2024","role":"editor"},{"type":"individual","id":"862a02ad1f217246","login":"savarseno","name":"Adrien","avatar_url":"https://avatars-next.observableusercontent.com/d6695db0d62259b21341202b3c190216248b56f3bc1a31786d554a2f22b96945","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"b7777e3912934473","slug":"etudes-de-cas","title":"Études de cas","owner":{"id":"31544195b17a8898","login":"savarseno","name":"Adrien"}},"type":"notebook","body":{"title":"Labubu","cells":[{"id":60,"value":"# Labubu","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"Cette visualisation me semble intéressante pour plusieurs raisons.\n\nD'abord, malgré son apparence relativement simple, elle est construite à partir de plus de 500 lignes de code.\nEnsuite, l'attention est attirée vers des points de données spécifiques, ce qui accentue une fausse impression de simplicité : on n'a l'impression qu'il n'y a que 3 points sur la courbe.\n\n- tout a été retravaillé (police, couleurs, petite vignette de Labubu)\n- le dataset comprend un petit nombre de points de données","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"# pop culture","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"labubu = await FileAttachment(\"labubu.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"labubu","database":"$undefined"},{"id":21,"value":"image = \"https://kimti.in/cdn/shop/files/Labubu_5_1b8739c5-ec46-4d2b-b4f1-ddb5bdd6097e.png?v=1771963792&width=1445\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"