// ══════════════════════════════════════════════════════ // CELL 1 · дані // ══════════════════════════════════════════════════════ raw = FileAttachment("lego_sets.csv").csv({ typed: true }) // ══════════════════════════════════════════════════════ // CELL 2 · очищення // ══════════════════════════════════════════════════════ data = raw.filter(d => d.year >= 1980 && d.year <= 2023 && d.pieces > 0 && d.pieces < 12000 && d.US_retailPrice > 0 && d.US_retailPrice < 900 ) // ══════════════════════════════════════════════════════ // CELL 3 · топ-15 тем // ══════════════════════════════════════════════════════ topThemes = Array.from( d3.rollup(data, v => v.length, d => d.theme), ([theme, count]) => ({ theme, count }) ).sort((a, b) => b.count - a.count).slice(0, 15).map(d => d.theme) // ══════════════════════════════════════════════════════ // CELL 4 · палітра (LEGO-стиль) // ══════════════════════════════════════════════════════ palette = [ "#e3000b","#f5a623","#006db7","#007f3b","#9b59b6", "#e67e22","#1abc9c","#c0392b","#2980b9","#27ae60", "#f39c12","#8e44ad","#16a085","#d35400","#7f8c8d" ] themeColor = Object.fromEntries(topThemes.map((t, i) => [t, palette[i]])) // ══════════════════════════════════════════════════════ // CELL 5 · заголовок // ══════════════════════════════════════════════════════ md` # 🧱 LEGO: анатомія іграшкової імперії ### 18 000+ наборів · 1980–2023 · інтерактивний аналіз --- ` // ══════════════════════════════════════════════════════ // CELL 6 · ОГЛЯД: 4 картки зі статистикою // ══════════════════════════════════════════════════════ { const totalSets = data.length const avgPrice = d3.mean(data, d => d.US_retailPrice).toFixed(2) const avgPieces = Math.round(d3.mean(data, d => d.pieces)) const mostTheme = topThemes[0] const card = (val, label, color) => `

${val}

${label}

` return html`

${card(totalSets.toLocaleString(), "наборів у датасеті", "#e3000b")} ${card("$"+avgPrice, "середня ціна", "#f5a623")} ${card(avgPieces, "середня к-сть деталей", "#006db7")} ${card(mostTheme, "найпопулярніша тема", "#007f3b")}

` } // ══════════════════════════════════════════════════════ // CELL 7 · ════ ГРАФІК 1: SCATTER ════ // Ціна vs деталі — де ліцензія б'є по кишені // ══════════════════════════════════════════════════════ md` ## 1. Ціна vs деталі: де ховається "ліцензійна надбавка"? *Кожна точка — один набір. Ліцензовані теми (Star Wars, Marvel) коштують дорожче за ту саму кількість деталей.* ` // ── фільтри для scatter ────────────────────────────── viewof scatterTheme = Inputs.select( ["Всі теми", ...topThemes], { label: "▸ Тема", value: "Всі теми" } ) viewof scatterYear = Inputs.range([1980, 2023], { label: "▸ Рік (до)", step: 1, value: 2023 }) viewof showTrend = Inputs.toggle({ label: "▸ Показати лінію тренду", value: true }) // ── scatter plot ───────────────────────────────────── { const W = 680, H = 400, ml = 55, mr = 15, mt = 15, mb = 48 const src = data.filter(d => d.year <= scatterYear && (scatterTheme === "Всі теми" || d.theme === scatterTheme) ) const sample = src.length > 2500 ? src.filter((_, i) => i % Math.ceil(src.length / 2500) === 0) : src const xMax = d3.quantile(sample.map(d=>d.pieces).sort(d3.ascending), 0.97) const yMax = d3.quantile(sample.map(d=>d.US_retailPrice).sort(d3.ascending), 0.97) const x = d3.scaleLinear().domain([0, xMax]).range([ml, W-mr]) const y = d3.scaleLinear().domain([0, yMax]).range([H-mb, mt]) const svg = d3.create("svg").attr("viewBox",`0 0 ${W} ${H}`).style("width","100%") // сітка svg.append("g").attr("transform",`translate(0,${H-mb})`) .call(d3.axisBottom(x).ticks(6).tickFormat(d=>d+" дет.")) .call(g=>g.select(".domain").remove()) .call(g=>g.selectAll(".tick line").attr("stroke","#e0e0e0")) .call(g=>g.selectAll("text").attr("font-size",11)) svg.append("g").attr("transform",`translate(${ml},0)`) .call(d3.axisLeft(y).ticks(5).tickFormat(d=>"$"+d)) .call(g=>g.select(".domain").remove()) .call(g=>g.selectAll(".tick line").attr("x2",W-ml-mr).attr("stroke","#eee")) .call(g=>g.selectAll("text").attr("font-size",11)) // точки svg.selectAll("circle").data(sample).join("circle") .attr("cx", d=>x(d.pieces)).attr("cy", d=>y(d.US_retailPrice)) .attr("r", 3.5) .attr("fill", d => themeColor[d.theme] || "#bbb") .attr("opacity", scatterTheme === "Всі теми" ? 0.45 : 0.7) .attr("stroke", d => scatterTheme !== "Всі теми" ? "#fff" : "none") .attr("stroke-width", 0.5) // тренд if (showTrend && sample.length > 5) { const mx = d3.mean(sample, d=>d.pieces), my = d3.mean(sample, d=>d.US_retailPrice) const num = d3.sum(sample, d=>(d.pieces-mx)*(d.US_retailPrice-my)) const den = d3.sum(sample, d=>(d.pieces-mx)**2) const s = num/den, b = my - s*mx const x1=0, x2=xMax svg.append("line") .attr("x1",x(x1)).attr("y1",y(s*x1+b)) .attr("x2",x(x2)).attr("y2",y(s*x2+b)) .attr("stroke","#e3000b").attr("stroke-width",2) .attr("stroke-dasharray","6,3").attr("opacity",0.8) } // підписи осей svg.append("text").attr("x",W/2).attr("y",H-6) .attr("text-anchor","middle").attr("font-size",12).attr("fill","#555") .text("Кількість деталей") svg.append("text").attr("transform","rotate(-90)") .attr("x",-(H/2)).attr("y",14) .attr("text-anchor","middle").attr("font-size",12).attr("fill","#555") .text("Ціна (USD)") // підпис к-сть точок svg.append("text").attr("x",W-mr).attr("y",mt+12) .attr("text-anchor","end").attr("font-size",11).attr("fill","#999") .text(`n = ${sample.length.toLocaleString()} наборів`) return svg.node() } // ══════════════════════════════════════════════════════ // CELL 8 · ════ ГРАФІК 2: BUMP CHART ════ // Рейтинг тем по роках — хто здобув популярність? // ══════════════════════════════════════════════════════ md` ## 2. Боротьба за топ: як змінювались рейтинги тем *Кожна лінія — одна тема. Позиція показує місце за кількістю нових наборів у кожному році.* ` viewof bumpTopN = Inputs.range([3, 10], { label: "▸ Тем у рейтингу", step: 1, value: 6 }) { const W = 680, H = 380, ml = 90, mr = 100, mt = 20, mb = 30 const years = d3.range(1990, 2024, 2) // кожні 2 роки для читабельності // рейтинг тем для кожного року const ranks = years.map(yr => { const counts = d3.rollup( data.filter(d => d.year === yr || d.year === yr+1), v => v.length, d => d.theme ) return Array.from(counts, ([t,c]) => ({theme:t,count:c})) .sort((a,b)=>b.count-a.count) .slice(0, bumpTopN) .map((d,i) => ({...d, year:yr, rank:i+1})) }) // топ теми за весь час const allThemesInRanks = [...new Set(ranks.flat().map(d=>d.theme))] .filter(t => topThemes.includes(t)) .slice(0, bumpTopN) const x = d3.scalePoint().domain(years).range([ml, W-mr]).padding(0.2) const y = d3.scaleLinear().domain([1, bumpTopN]).range([mt, H-mb]) const svg = d3.create("svg").attr("viewBox",`0 0 ${W} ${H}`).style("width","100%") // вертикальні лінії-роки years.forEach(yr => { svg.append("line") .attr("x1",x(yr)).attr("x2",x(yr)) .attr("y1",mt).attr("y2",H-mb) .attr("stroke","#eee").attr("stroke-width",1) svg.append("text").attr("x",x(yr)).attr("y",H-mb+14) .attr("text-anchor","middle").attr("font-size",10).attr("fill","#aaa") .text(yr) }) // горизонтальні лінії-позиції d3.range(1, bumpTopN+1).forEach(r => { svg.append("line") .attr("x1",ml).attr("x2",W-mr) .attr("y1",y(r)).attr("y2",y(r)) .attr("stroke","#f5f5f5").attr("stroke-width",1) svg.append("text").attr("x",ml-6).attr("y",y(r)+4) .attr("text-anchor","end").attr("font-size",10).attr("fill","#bbb") .text("#"+r) }) const line = d3.line().x(d=>x(d.year)).y(d=>y(d.rank)).curve(d3.curveCatmullRom) allThemesInRanks.forEach(theme => { const themeData = ranks.map(yr => yr.find(d=>d.theme===theme)).filter(Boolean) if (themeData.length < 2) return const col = themeColor[theme] || "#ccc" svg.append("path").datum(themeData) .attr("fill","none").attr("stroke",col) .attr("stroke-width",2.5).attr("opacity",0.85) .attr("d",line) themeData.forEach(d => { svg.append("circle") .attr("cx",x(d.year)).attr("cy",y(d.rank)) .attr("r",5).attr("fill",col).attr("stroke","#fff").attr("stroke-width",1.5) }) // підпис останнього значення const last = themeData[themeData.length-1] svg.append("text") .attr("x",x(last.year)+10).attr("y",y(last.rank)+4) .attr("font-size",11).attr("font-weight","500").attr("fill",col) .text(theme) }) return svg.node() } // ══════════════════════════════════════════════════════ // CELL 9 · ════ ГРАФІК 3: WAFFLE CHART ════ // Частки тем у вибраному році // ══════════════════════════════════════════════════════ md` ## 3. Склад асортименту: що будував LEGO у вибраний рік? *Кожен квадратик = ~1% від усіх наборів року. Колір — тема.* ` viewof waffleYear = Inputs.range([1980, 2023], { label: "▸ Рік", step: 1, value: 2015 }) { const W = 680, CELL = 18, GAP = 3, COLS = 20 const yearData = data.filter(d => d.year === waffleYear) const counts = d3.rollup(yearData, v=>v.length, d=>d.theme) const total = yearData.length if (total === 0) return html`

Немає даних для ${waffleYear}

` const topInYear = Array.from(counts, ([t,c])=>({t,c})) .sort((a,b)=>b.c-a.c).slice(0,8) const otherCount = total - d3.sum(topInYear, d=>d.c) const allSlices = [...topInYear, {t:"Інші",c:otherCount}] const colorOf = t => t==="Інші" ? "#ddd" : (themeColor[t]||"#aaa") // 100 квадратиків (кожен = 1%) const squares = [] let filled = 0 allSlices.forEach(({t,c}) => { const n = Math.round(c/total*100) for (let i=0;i { const col = i % COLS, row = Math.floor(i/COLS) svg.append("rect") .attr("x", GAP + col*(CELL+GAP)) .attr("y", GAP + row*(CELL+GAP)) .attr("width",CELL).attr("height",CELL) .attr("rx",3).attr("fill",sq.color).attr("opacity",0.9) }) // легенда allSlices.forEach(({t,c},i) => { const col = i%2, row = Math.floor(i/2) const lx = col*(W/2) + 8, ly = H_waffle + 10 + row*22 svg.append("rect").attr("x",lx).attr("y",ly).attr("width",12).attr("height",12) .attr("rx",2).attr("fill",colorOf(t)) svg.append("text").attr("x",lx+16).attr("y",ly+10) .attr("font-size",11).attr("fill","#444") .text(`${t} — ${Math.round(c/total*100)}% (${c})`) }) svg.append("text").attr("x",svgW+10).attr("y",20) .attr("font-size",12).attr("fill","#999") .text(`${total} наборів у ${waffleYear}`) return svg.node() } // ══════════════════════════════════════════════════════ // CELL 10 · ════ ГРАФІК 4: ЦІНА ЗА ДЕТАЛЬ (лінійний) ════ // Як дорожчав LEGO з часом? // ══════════════════════════════════════════════════════ md` ## 4. LEGO дорожчає? Ціна за одну деталь протягом десятиліть *Медіанна вартість однієї деталі по роках для обраних тем.* ` viewof pppThemes = Inputs.checkbox(topThemes.slice(0,8), { label: "▸ Теми", value: topThemes.slice(0,4) }) { const W = 680, H = 340, ml = 52, mr = 20, mt = 15, mb = 45 const years = d3.range(1985, 2024) const x = d3.scaleLinear().domain([1985,2023]).range([ml,W-mr]) const allVals = pppThemes.flatMap(theme => years.map(yr => { const s = data.filter(d=>d.theme===theme&&d.year===yr&&d.pieces>0) return s.length>0 ? d3.median(s,d=>d.US_retailPrice/d.pieces) : null }).filter(Boolean) ) const y = d3.scaleLinear().domain([0, d3.max(allVals)*1.1 || 0.5]).range([H-mb,mt]) const svg = d3.create("svg").attr("viewBox",`0 0 ${W} ${H}`).style("width","100%") svg.append("g").attr("transform",`translate(0,${H-mb})`) .call(d3.axisBottom(x).tickFormat(d3.format("d")).ticks(8)) .call(g=>g.select(".domain").remove()) .call(g=>g.selectAll(".tick line").attr("stroke","#e0e0e0")) .call(g=>g.selectAll("text").attr("font-size",11)) svg.append("g").attr("transform",`translate(${ml},0)`) .call(d3.axisLeft(y).ticks(5).tickFormat(d=>"$"+d.toFixed(2))) .call(g=>g.select(".domain").remove()) .call(g=>g.selectAll(".tick line").attr("x2",W-ml-mr).attr("stroke","#eee")) .call(g=>g.selectAll("text").attr("font-size",11)) const lineGen = d3.line().x(d=>x(d.yr)).y(d=>y(d.v)).curve(d3.curveMonotoneX).defined(d=>d.v!=null) pppThemes.forEach(theme => { const pts = years.map(yr => { const s = data.filter(d=>d.theme===theme&&d.year===yr&&d.pieces>0) return { yr, v: s.length>=3 ? d3.median(s,d=>d.US_retailPrice/d.pieces) : null } }) const col = themeColor[theme]||"#aaa" svg.append("path").datum(pts) .attr("fill","none").attr("stroke",col) .attr("stroke-width",2).attr("opacity",0.85) .attr("d",lineGen) const last = pts.filter(d=>d.v!=null).pop() if (last) svg.append("text").attr("x",x(last.yr)+4).attr("y",y(last.v)+4) .attr("font-size",10).attr("fill",col).attr("font-weight","500") .text(theme) }) svg.append("text").attr("x",W/2).attr("y",H-6) .attr("text-anchor","middle").attr("font-size",12).attr("fill","#555") .text("Рік") svg.append("text").attr("transform","rotate(-90)") .attr("x",-(H/2)).attr("y",14) .attr("text-anchor","middle").attr("font-size",12).attr("fill","#555") .text("USD за деталь (медіана)") return svg.node() } // ══════════════════════════════════════════════════════ // CELL 11 · ════ ГРАФІК 5: HISTOGRAM деталей ════ // Розподіл розміру наборів // ══════════════════════════════════════════════════════ md` ## 5. Більшість наборів — малі. Але найвідоміші — велетні *Розподіл наборів за кількістю деталей. Виберіть тему, щоб порівняти з усіма.* ` viewof histTheme = Inputs.select( ["Всі теми", ...topThemes], { label: "▸ Порівняти тему", value: "Star Wars" } ) { const W = 680, H = 320, ml = 52, mr = 15, mt = 15, mb = 45 const bins = d3.bin().domain([0,3000]).thresholds(40)(data.map(d=>d.pieces)) const x = d3.scaleLinear().domain([0,3000]).range([ml,W-mr]) const y = d3.scaleLinear() .domain([0, d3.max(bins,d=>d.length)*1.05]) .range([H-mb,mt]) const svg = d3.create("svg").attr("viewBox",`0 0 ${W} ${H}`).style("width","100%") // всі набори — сірі bins.forEach(bin => { svg.append("rect") .attr("x",x(bin.x0)+1).attr("y",y(bin.length)) .attr("width",Math.max(0,x(bin.x1)-x(bin.x0)-2)) .attr("height",H-mb-y(bin.length)) .attr("fill","#e0e0e0").attr("opacity",0.8) }) // обрана тема — поверх if (histTheme !== "Всі теми") { const sub = data.filter(d=>d.theme===histTheme).map(d=>d.pieces) const subBins = d3.bin().domain([0,3000]).thresholds(40)(sub) const col = themeColor[histTheme]||"#e3000b" subBins.forEach(bin => { svg.append("rect") .attr("x",x(bin.x0)+1).attr("y",y(bin.length)) .attr("width",Math.max(0,x(bin.x1)-x(bin.x0)-2)) .attr("height",H-mb-y(bin.length)) .attr("fill",col).attr("opacity",0.75) }) // медіана теми const med = d3.median(sub) svg.append("line") .attr("x1",x(med)).attr("x2",x(med)) .attr("y1",mt).attr("y2",H-mb) .attr("stroke",col).attr("stroke-width",2).attr("stroke-dasharray","4,3") svg.append("text").attr("x",x(med)+4).attr("y",mt+14) .attr("font-size",11).attr("fill",col).attr("font-weight","500") .text(`медіана ${histTheme}: ${Math.round(med)} дет.`) } // медіана загальна const medAll = d3.median(data,d=>d.pieces) svg.append("line") .attr("x1",x(medAll)).attr("x2",x(medAll)) .attr("y1",mt).attr("y2",H-mb) .attr("stroke","#555").attr("stroke-width",1.5).attr("stroke-dasharray","4,3") svg.append("text").attr("x",x(medAll)+4).attr("y",mt+28) .attr("font-size",11).attr("fill","#555") .text(`медіана всіх: ${Math.round(medAll)} дет.`) svg.append("g").attr("transform",`translate(0,${H-mb})`) .call(d3.axisBottom(x).ticks(8).tickFormat(d=>d+" дет.")) .call(g=>g.select(".domain").remove()) .call(g=>g.selectAll(".tick line").attr("stroke","#e0e0e0")) .call(g=>g.selectAll("text").attr("font-size",11)) svg.append("g").attr("transform",`translate(${ml},0)`) .call(d3.axisLeft(y).ticks(5)) .call(g=>g.select(".domain").remove()) .call(g=>g.selectAll(".tick line").attr("x2",W-ml-mr).attr("stroke","#eee")) .call(g=>g.selectAll("text").attr("font-size",11)) svg.append("text").attr("x",W/2).attr("y",H-6) .attr("text-anchor","middle").attr("font-size",12).attr("fill","#555") .text("Кількість деталей") svg.append("text").attr("transform","rotate(-90)") .attr("x",-(H/2)).attr("y",14) .attr("text-anchor","middle").attr("font-size",12).attr("fill","#555") .text("Кількість наборів") // легенда const lg = svg.append("g").attr("transform",`translate(${W-180},${mt})`) lg.append("rect").attr("width",12).attr("height",12).attr("rx",2).attr("fill","#e0e0e0") lg.append("text").attr("x",16).attr("y",10).attr("font-size",11).attr("fill","#555").text("Всі набори") if (histTheme !== "Всі теми") { lg.append("rect").attr("y",18).attr("width",12).attr("height",12).attr("rx",2) .attr("fill",themeColor[histTheme]||"#e3000b") lg.append("text").attr("x",16).attr("y",28).attr("font-size",11) .attr("fill",themeColor[histTheme]||"#e3000b").text(histTheme) } return svg.node() } // ══════════════════════════════════════════════════════ // CELL 12 · ════ ТОП-10 НАБОРІВ ════ // Найдорожчі набори з картинками // ══════════════════════════════════════════════════════ md` ## 6. Зал слави: найдорожчі набори ` viewof topN = Inputs.range([5, 20], { label:"▸ Показати топ", step:1, value:10 }) viewof topThemeFilter = Inputs.select( ["Всі теми", ...topThemes], { label:"▸ Тема", value:"Всі теми" } ) { const top = data .filter(d => topThemeFilter === "Всі теми" || d.theme === topThemeFilter) .sort((a,b)=>b.US_retailPrice-a.US_retailPrice) .slice(0,topN) return html`

${top.map(d => html`

${d.imageURL ? html`

` : html`🧱`}

${d.name}

${d.theme} $${d.US_retailPrice}

${d.pieces?.toLocaleString()} дет · ${d.year}

`)}

` } // ══════════════════════════════════════════════════════ // CELL 13 · футер // ══════════════════════════════════════════════════════ md` --- *Джерело: [Kaggle — LEGO Dataset by Maggie Akarn](https://www.kaggle.com/datasets/maggieakarn/lego-dataset) · Візуалізація: Observable + D3.js* `