29:null 2a:["$","title",null,{"children":"Radial hierarchical bar chart with grouping arcs | Patrick Wojda | Observable"}] 2f:Tbf9,{ const imageUrl = await FileAttachment( "best-board-games-for-kids-2902249234.jpg" ).url(); data.sort((a, b) => b.amount - a.amount); const width = 940; const height = 600; const margin = { top: -30, right: 60, bottom: 150, left: 20 }; const svg = d3.select(DOM.svg(width, height)); svg.attr( "style", ` background:#f6efe6; font-family: "Libre Baskerville", Georgia, serif; color:#2b2b2b; ` ); // Scales const x = d3 .scaleBand() .domain(data.map((d) => d.category)) .range([margin.left, width - margin.right]) .padding(0); const y = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d.amount)]) .nice() .range([height - margin.bottom, margin.top]); // ---- defs + mask ---- const defs = svg.append("defs"); const mask = defs.append("mask").attr("id", "bars-mask"); // Hidden background mask.append("rect").attr("width", width).attr("height", height); // Bars = visible parts of image mask .selectAll("rect") .data(data) .join("rect") .attr("x", (d) => x(d.category)) .attr("y", (d) => y(d.amount)) .attr("width", x.bandwidth()) .attr("height", (d) => y(0) - y(d.amount)) .attr("fill", "white"); // ---- axes ---- svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickSize(0)) .call((g) => g.select(".domain").remove()) .selectAll("text") .attr("text-anchor", "end") .attr("dx", "-0.6em") .attr("dy", "0.15em") .attr("transform", "rotate(-90)"); svg .append("g") .attr("transform", `translate(${width - margin.right},0)`) .call( d3 .axisRight(y) .ticks(5) .tickSize(-(width - margin.left - margin.right)) // extend lines .tickPadding(8) ) .call((g) => g.select(".domain").remove()) .call((g) => g.selectAll("line").attr("stroke", "rgba(0,0,0,0.15)")); // ---- image ---- svg .append("image") .attr("href", imageUrl) .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.left - margin.right) .attr("height", height - margin.top - margin.bottom) .attr("preserveAspectRatio", "xMidYMid slice") .attr("mask", "url(#bars-mask)"); svg .append("g") .selectAll("rect") .data(data) .join("rect") .attr("x", (d) => x(d.category)) .attr("y", (d) => y(d.amount)) .attr("width", x.bandwidth()) .attr("height", (d) => y(0) - y(d.amount)) .attr("fill", "rgba(0,0,0,0.2)") .attr("stroke", "rgba(255,255,255,0.8)") .attr("stroke-width", 0.5); // Axis text svg .selectAll(".tick text") .attr("fill", "#3a3a3a") .attr("font-size", 10) .attr("letter-spacing", "0.04em"); // Y axis numbers slightly lighter svg.selectAll(".y-axis .tick text").attr("fill", "#6b6b6b"); // Gridlines already subtle — keep them quiet svg .selectAll(".tick line") .attr("stroke", "rgba(0,0,0,0.1c)") .attr("stroke-width", 0.5); return svg.node(); } 30:Tf96,{ const imageUrl = await FileAttachment( "best-board-games-for-kids-2902249234.jpg" ).url(); cleanData.sort((a, b) => b.amount - a.amount); const width = 940; const height = 600; const margin = { top: 10, right: 60, bottom: 150, left: 50 }; const svg = d3.select(DOM.svg(width, height)); svg.attr( "style", ` background:#f6efe6; font-family: "Libre Baskerville", Georgia, serif; color:#2b2b2b; border-radius: 16px; ` ); // Scales const x = d3 .scaleBand() .domain(cleanData.map((d) => d.category)) .range([margin.left, width - margin.right]) .padding(0); const y = d3 .scaleLinear() .domain([0, d3.max(cleanData, (d) => d.amount)]) .nice() .range([height - margin.bottom, margin.top]); // ---- defs + mask ---- const defs = svg.append("defs"); const mask = defs.append("mask").attr("id", "bars-mask-consolidated"); // Hidden background mask.append("rect").attr("width", width).attr("height", height); // Bars = visible parts of image mask .selectAll("rect") .data(cleanData) .join("rect") .attr("x", (d) => x(d.category)) .attr("y", (d) => y(d.amount)) .attr("width", x.bandwidth()) .attr("height", (d) => y(0) - y(d.amount)) .attr("fill", "white"); // ---- axes ---- svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickSize(0)) .call((g) => g.select(".domain").remove()) .selectAll("text") .attr("text-anchor", "end") .attr("transform", "rotate(-45)"); svg .append("g") .attr("transform", `translate(${width - margin.right},0)`) .call( d3 .axisRight(y) .ticks(5) .tickSize(-(width - margin.left - margin.right)) .tickPadding(8) ) .call((g) => g.select(".domain").remove()) .call((g) => g.selectAll("line").attr("stroke", "rgba(0,0,0,0.15)")); // ---- image ---- svg .append("image") .attr("href", imageUrl) .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.left - margin.right) .attr("height", height - margin.top - margin.bottom) .attr("preserveAspectRatio", "xMidYMid slice") .attr("mask", "url(#bars-mask-consolidated)"); svg .append("g") .selectAll("rect") .data(cleanData) .join("rect") .attr("x", (d) => x(d.category)) .attr("y", (d) => y(d.amount)) .attr("width", x.bandwidth()) .attr("height", (d) => y(0) - y(d.amount)) .attr("fill", "rgba(0,0,0,0.2)") .attr("stroke", "rgba(255,255,255,0.8)") .attr("stroke-width", 0.5); // Axis text svg .selectAll(".tick text") .attr("fill", "#3a3a3a") .attr("font-size", 10) .attr("letter-spacing", "0.04em"); // Gridlines svg .selectAll(".tick line") .attr("stroke", "rgba(0,0,0,0.1)") .attr("stroke-width", 0.5); // ---- annotation + source (HTML via foreignObject) ---- const annotationText = "Categories represent primary board-game themes and subjects. " + "Gameplay mechanics, formats, and distribution types were removed. " + "Overlapping or overly specific labels were pruned in favor of clearer, " + "higher-level concepts. Closely related categories were reduced to a single representative."; const sourceUrl = "https://boardgamegeek.com/browse/boardgamecategory"; svg .append("foreignObject") .attr("x", margin.left) .attr("y", height - 50) .attr("width", width - margin.left - margin.right) .attr("height", margin.bottom - 10) .append("xhtml:div") .style("font-family", '"Libre Baskerville", Georgia, serif') .style("font-size", "10px") .style("font-style", "italic") .style("color", "#6b6b6b") .style("line-height", "1.35").html(`

${annotationText}

Source: BoardGameGeek (boardgame categories)

`); return svg.node(); }31:T16d4,{ const imageUrl = await FileAttachment( "pandemic-board-game-2472360100.jpg" ).url(); cleanData.sort((a, b) => b.amount - a.amount); const width = 700; const height = 640; const margin = { top: 40, right: 40, bottom: 80, left: 40 }; const outerRadius = 250; const innerRadius = 30; // editorial calm const labelOffset = 14; const startAngle = -(Math.PI / 2) - 0.2481923510112518 / 2; // optical centering const chartOffset = { x: 60, y: 50 }; const backgroundColor = "#f6efe6"; const svg = d3.select(DOM.svg(width, height)).attr( "style", ` background:${backgroundColor}; font-family:"Libre Baskerville", Georgia, serif; border-radius:16px; ` ); // ---- title & subtitle ---- const titleGroup = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); titleGroup .append("text") .attr("x", width / 2) .attr("y", 0) .attr("font-size", 20) .attr("font-weight", 600) .attr("fill", "#2f2f2f") .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .text("Thematic Landscape of Modern Board Games"); titleGroup .append("text") .attr("x", width / 2) .attr("y", 28) .attr("font-size", 12) .attr("fill", "#6b6b6b") .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .text("Primary themes by number of published titles"); // ---- chart root ---- const chart = svg .append("g") .attr( "transform", `translate(${width / 2 + chartOffset.x}, ${height / 2 + chartOffset.y})` ); // ---- scales ---- const angle = d3 .scaleBand() .domain(cleanData.map((d) => d.category)) .range([startAngle, startAngle + Math.PI * 2]) .padding(0.025); // tighter, calmer const radius = d3 .scaleRadial() .domain([0, d3.max(cleanData, (d) => d.amount)]) .range([innerRadius, outerRadius]); const arc = d3 .arc() .innerRadius(innerRadius) .outerRadius((d) => radius(d.amount)) .startAngle((d) => angle(d.category)) .endAngle((d) => angle(d.category) + angle.bandwidth()); // ---- defs + mask ---- const defs = chart.append("defs"); const mask = defs.append("mask").attr("id", "radial-bars-mask"); const maskSize = outerRadius + 80; mask .append("rect") .attr("x", -maskSize) .attr("y", -maskSize) .attr("width", maskSize * 2) .attr("height", maskSize * 2) .attr("fill", "black"); mask .append("g") .selectAll("path") .data(cleanData) .join("path") .attr("d", arc) .attr("fill", "white"); // ---- masked image ---- chart .append("image") .attr("href", imageUrl) .attr("x", -maskSize) .attr("y", -maskSize) .attr("width", maskSize * 2) .attr("height", maskSize * 2) .attr("preserveAspectRatio", "xMidYMid slice") .attr("mask", "url(#radial-bars-mask)"); // soften image → texture, not content chart .append("rect") .attr("x", -maskSize) .attr("y", -maskSize) .attr("width", maskSize * 2) .attr("height", maskSize * 2) .attr("fill", "#f6efe6") .attr("opacity", 0.55) .attr("mask", "url(#radial-bars-mask)") .attr("mix-blend-mode", "multiply"); // ---- bars (stroke hierarchy) ---- const maxValue = d3.max(cleanData, (d) => d.amount); const values = cleanData.map((d) => d.amount); chart .append("g") .selectAll("path") .data(cleanData) .join("path") .attr("d", arc) .attr("fill", "rgba(0,0,0,0.2)") .attr("stroke", backgroundColor) .attr("stroke-width", 0.5); // ---- labels (never upside down, editorial hierarchy) ---- chart .append("g") .selectAll("text") .data(cleanData) .join("text") .attr("transform", (d) => { const a = angle(d.category) + angle.bandwidth() / 2; const textAngle = a - Math.PI / 2; const rotate = (textAngle * 180) / Math.PI; const flip = textAngle < -Math.PI / 2 || textAngle > Math.PI / 2 ? 180 : 0; return ` rotate(${rotate}) translate(${radius(d.amount) + labelOffset}, 0) rotate(${flip}) `; }) .attr("text-anchor", (d) => { const a = angle(d.category) + angle.bandwidth() / 2; const textAngle = a - Math.PI / 2; return textAngle < -Math.PI / 2 || textAngle > Math.PI / 2 ? "end" : "start"; }) .attr("dominant-baseline", "middle") .attr("font-size", 9) .attr("letter-spacing", "0.02em") .attr("fill", "#2f2f2f") .attr("font-weight", "bold") .text((d) => d.category) .each(function (d) { d3.select(this) .append("tspan") .attr("dx", "0.4em") .attr("fill", "#8a8a8a") .attr("font-size", "8px") .text(d.amount); }); // ---- annotation + source ---- const annotationText = "Categories represent primary board-game themes and subjects. " + "Gameplay mechanics, formats, and distribution types were removed. " + "Overlapping or overly specific labels were pruned in favor of clearer, " + "higher-level concepts. Closely related categories were reduced to a single representative."; svg .append("foreignObject") .attr("x", margin.left) .attr("y", height - margin.bottom + 10) .attr("width", width - margin.left - margin.right) .attr("height", margin.bottom - 20) .append("xhtml:div") .style("font-family", '"Libre Baskerville", Georgia, serif') .style("font-size", "10px") .style("font-style", "italic") .style("color", "#6b6b6b") .style("line-height", "1.35").html(`

${annotationText}

Source: BoardGameGeek (boardgame categories)

`); return svg.node(); }32:T16f5,{ const imageUrl = await FileAttachment( "pandemic-board-game-2472360100.jpg" ).url(); const width = 700; const height = 740; const margin = { top: 40, right: 40, bottom: 80, left: 40 }; const outerRadius = 250; const innerRadius = 30; // editorial calm const labelOffset = 14; const startAngle = -(Math.PI / 2) - 0.2481923510112518 / 2; // optical centering const chartOffset = { x: 40, y: 20 }; const backgroundColor = "#f6efe6"; const svg = d3.select(DOM.svg(width, height)).attr( "style", ` background:${backgroundColor}; font-family:"Libre Baskerville", Georgia, serif; border-radius:16px; ` ); // ---- title & subtitle ---- const titleGroup = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); titleGroup .append("text") .attr("x", width / 2) .attr("y", 0) .attr("font-size", 20) .attr("font-weight", 600) .attr("fill", "#2f2f2f") .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .text("Thematic Landscape of Modern Board Games"); titleGroup .append("text") .attr("x", width / 2) .attr("y", 28) .attr("font-size", 12) .attr("fill", "#6b6b6b") .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .text("Primary themes by number of published titles"); // ---- chart root ---- const chart = svg .append("g") .attr( "transform", `translate(${width / 2 + chartOffset.x}, ${height / 2 + chartOffset.y})` ); // ---- scales ---- const angle = d3 .scaleBand() .domain(cleanDataReordered.map((d) => d.category)) .range([startAngle, startAngle + Math.PI * 2]) .padding(0.025); // tighter, calmer const radius = d3 .scaleRadial() .domain([0, d3.max(cleanDataReordered, (d) => d.amount)]) .range([innerRadius, outerRadius]); const arc = d3 .arc() .innerRadius(innerRadius) .outerRadius((d) => radius(d.amount)) .startAngle((d) => angle(d.category)) .endAngle((d) => angle(d.category) + angle.bandwidth()); // ---- defs + mask ---- const defs = chart.append("defs"); const mask = defs.append("mask").attr("id", "radial-bars-mask-reordered"); const maskSize = outerRadius + 80; mask .append("rect") .attr("x", -maskSize) .attr("y", -maskSize) .attr("width", maskSize * 2) .attr("height", maskSize * 2) .attr("fill", "black"); mask .append("g") .selectAll("path") .data(cleanDataReordered) .join("path") .attr("d", arc) .attr("fill", "white"); // ---- masked image ---- chart .append("image") .attr("href", imageUrl) .attr("x", -maskSize) .attr("y", -maskSize) .attr("width", maskSize * 2) .attr("height", maskSize * 2) .attr("preserveAspectRatio", "xMidYMid slice") .attr("mask", "url(#radial-bars-mask-reordered)"); // soften image → texture, not content chart .append("rect") .attr("x", -maskSize) .attr("y", -maskSize) .attr("width", maskSize * 2) .attr("height", maskSize * 2) .attr("fill", "#f6efe6") .attr("opacity", 0.55) .attr("mask", "url(#radial-bars-mask)") .attr("mix-blend-mode", "multiply"); // ---- bars (stroke hierarchy) ---- const maxValue = d3.max(cleanDataReordered, (d) => d.amount); const values = cleanDataReordered.map((d) => d.amount); chart .append("g") .selectAll("path") .data(cleanDataReordered) .join("path") .attr("d", arc) .attr("fill", "rgba(0,0,0,0.2)") .attr("stroke", backgroundColor) .attr("stroke-width", 0.5); // ---- labels (never upside down, editorial hierarchy) ---- chart .append("g") .selectAll("text") .data(cleanDataReordered) .join("text") .attr("transform", (d) => { const a = angle(d.category) + angle.bandwidth() / 2; const textAngle = a - Math.PI / 2; const rotate = (textAngle * 180) / Math.PI; const flip = textAngle < -Math.PI / 2 || textAngle > Math.PI / 2 ? 180 : 0; return ` rotate(${rotate}) translate(${radius(d.amount) + labelOffset}, 0) rotate(${flip}) `; }) .attr("text-anchor", (d) => { const a = angle(d.category) + angle.bandwidth() / 2; const textAngle = a - Math.PI / 2; return textAngle < -Math.PI / 2 || textAngle > Math.PI / 2 ? "end" : "start"; }) .attr("dominant-baseline", "middle") .attr("font-size", 9) .attr("letter-spacing", "0.02em") .attr("fill", "#2f2f2f") .attr("font-weight", "bold") .text((d) => d.category) .each(function (d) { d3.select(this) .append("tspan") .attr("dx", "0.4em") .attr("fill", "#8a8a8a") .attr("font-size", "8px") .text(d.amount); }); // ---- annotation + source ---- const annotationText = "Categories represent primary board-game themes and subjects. " + "Gameplay mechanics, formats, and distribution types were removed. " + "Overlapping or overly specific labels were pruned in favor of clearer, " + "higher-level concepts. Closely related categories were reduced to a single representative."; svg .append("foreignObject") .attr("x", margin.left) .attr("y", height - margin.bottom + 10) .attr("width", width - margin.left - margin.right) .attr("height", margin.bottom - 20) .append("xhtml:div") .style("font-family", '"Libre Baskerville", Georgia, serif') .style("font-size", "10px") .style("font-style", "italic") .style("color", "#6b6b6b") .style("line-height", "1.35").html(`

${annotationText}

Source: BoardGameGeek (boardgame categories)

`); return svg.node(); }33:T35bd,{ // ───────────────────────────────────────────────────────────── // Assets // ───────────────────────────────────────────────────────────── const imageUrl = await FileAttachment( "pandemic-board-game-2472360100.jpg" ).url(); // ───────────────────────────────────────────────────────────── // Layout & styling // ───────────────────────────────────────────────────────────── const width = 660; const height = 850; const margin = { top: 40, right: 40, bottom: 80, left: 40 }; const headerHeight = 110; const backgroundColor = "#f6efe6"; const fontFamily = '"Libre Baskerville", Georgia, serif'; // ───────────────────────────────────────────────────────────── // Radial geometry // ───────────────────────────────────────────────────────────── const outerRadius = 240; const innerRadius = 20; const labelOffset = 16; const arcRadius = outerRadius + 68; const startAngle = -(Math.PI / 2) - 0.2481923510112518 / 2; const chartOffset = { x: 0, y: 30 }; // ───────────────────────────────────────────────────────────── // DATA: sort within top-level groups (EDITORIAL FIX) // ───────────────────────────────────────────────────────────── const groups = { Story: [ "Fantasy", "Adventure", "Murder / Mystery", "Medieval", "Ancient", "Renaissance", "Prehistoric", "Science Fiction", "Horror", "Zombies", "Mythology", "Space Exploration" ], Systems: [ "Economic", "Civilization", "Territory Building", "Farming", "Transportation", "City Building", "Environmental", "Industry / Manufacturing" ], Conflict: [ "Wargame", "Fighting", "Political", "Mafia", "Spies / Secret Agents" ], Others: [ "Animals", "Humor", "Exploration", "Sports", "Music", "Nautical", "Pirates" ] }; const byCategory = new Map(cleanDataReordered.map((d) => [d.category, d])); const cleanDataSorted = [ ...groups.Story.map((c) => byCategory.get(c)).sort( (a, b) => b.amount - a.amount ), ...groups.Systems.map((c) => byCategory.get(c)).sort( (a, b) => b.amount - a.amount ), ...groups.Conflict.map((c) => byCategory.get(c)).sort( (a, b) => b.amount - a.amount ), ...groups.Others.map((c) => byCategory.get(c)).sort( (a, b) => b.amount - a.amount ) ]; // ───────────────────────────────────────────────────────────── // SVG root // ───────────────────────────────────────────────────────────── const svg = d3.select(DOM.svg(width, height)).attr( "style", ` background:${backgroundColor}; font-family:${fontFamily}; border-radius:16px; ` ); // ───────────────────────────────────────────────────────────── // Header // ───────────────────────────────────────────────────────────── svg .append("foreignObject") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.left - margin.right) .attr("height", headerHeight) .append("xhtml:div") .style("font-family", fontFamily) .style("color", "#2f2f2f") .style("text-align", "center") .style("line-height", "1.35").html(`

Board Games Skew Heavily Toward
Story, Systems, and Conflict

Most games combine several themes, amplifying the dominance of these three.

`); // ───────────────────────────────────────────────────────────── // Chart root // ───────────────────────────────────────────────────────────── const chart = svg .append("g") .attr( "transform", `translate(${width / 2 + chartOffset.x}, ${height / 2 + chartOffset.y})` ); // ───────────────────────────────────────────────────────────── // Scales & arc // ───────────────────────────────────────────────────────────── const angle = d3 .scaleBand() .domain(cleanDataSorted.map((d) => d.category)) .range([startAngle, startAngle + Math.PI * 2]) .padding(0.025); const radius = d3 .scaleRadial() .domain([0, d3.max(cleanDataSorted, (d) => d.amount)]) .range([innerRadius, outerRadius]); const arc = d3 .arc() .innerRadius(innerRadius) .outerRadius((d) => radius(d.amount)) .startAngle((d) => angle(d.category)) .endAngle((d) => angle(d.category) + angle.bandwidth()); // ───────────────────────────────────────────────────────────── // Mask // ───────────────────────────────────────────────────────────── const maskSize = outerRadius; const defs = chart.append("defs"); const mask = defs.append("mask").attr("id", "radial-bars-mask-2"); mask .append("rect") .attr("x", -maskSize) .attr("y", -maskSize) .attr("width", maskSize * 2) .attr("height", maskSize * 2) .attr("fill", "black"); mask .append("g") .selectAll("path") .data(cleanDataSorted) .join("path") .attr("d", arc) .attr("fill", "white"); // 3. Cut out center hole (this is the key part) mask .append("circle") .attr("id", "circlemask") .attr("r", innerRadius - 1) .attr("fill", "white"); // ───────────────────────────────────────────────────────────── // Masked image + overlay // ───────────────────────────────────────────────────────────── chart .append("image") .attr("href", imageUrl) .attr("x", -maskSize) .attr("y", -maskSize) .attr("width", maskSize * 2) .attr("height", maskSize * 2) .attr("preserveAspectRatio", "xMidYMid slice") .attr("mask", "url(#radial-bars-mask-2)"); chart .append("rect") .attr("x", -maskSize) .attr("y", -maskSize) .attr("width", maskSize * 2) .attr("height", maskSize * 2) .attr("fill", backgroundColor) .attr("opacity", 0.55) .attr("mask", "url(#radial-bars-mask-2)"); // ───────────────────────────────────────────────────────────── // Bars // ───────────────────────────────────────────────────────────── chart .append("g") .selectAll("path") .data(cleanDataSorted) .join("path") .attr("d", arc) .attr("fill", "rgba(0,0,0,0.2)") .attr("stroke", backgroundColor) .attr("stroke-width", 0.5); // ───────────────────────────────────────────────────────────── // Labels (two-line: category + amount) // ───────────────────────────────────────────────────────────── chart .append("g") .selectAll("text") .data(cleanDataSorted) .join("text") .attr("transform", (d) => { const a = angle(d.category) + angle.bandwidth() / 2; const t = a - Math.PI / 2; const r = (t * 180) / Math.PI; const flip = t < -Math.PI / 2 || t > Math.PI / 2 ? 180 : 0; return ` rotate(${r}) translate(${radius(d.amount) + labelOffset},0) rotate(${flip}) `; }) .attr("text-anchor", (d) => { const t = angle(d.category) + angle.bandwidth() / 2 - Math.PI / 2; return t < -Math.PI / 2 || t > Math.PI / 2 ? "end" : "start"; }) .attr("dominant-baseline", "middle") .attr("fill", "#2f2f2f") .each(function (d, i) { const text = d3.select(this); // Line 1 — category text .append("tspan") .attr("x", 0) .attr("dy", "-0.5em") .attr("font-size", 9) .attr("font-weight", "bold") .text(d.category); // Line 2 — amount text .append("tspan") .attr("x", 0) .attr("dy", "1em") .attr("font-size", 8) .attr("font-weight", "normal") .attr("fill", "#8a8a8a") .text(`${d3.format(".2~s")(d.amount)}${i === 0 ? " games" : ""}`); }); // ───────────────────────────────────────────────────────────── // Top-level category arcs (unchanged logic, now correct) // ───────────────────────────────────────────────────────────── const topLevelCategories = [ { label: "Story", categories: groups.Story }, { label: "Systems", categories: groups.Systems }, { label: "Conflict", categories: groups.Conflict } ]; const annotationGroup = chart.append("g"); topLevelCategories.forEach((group, i) => { const cats = group.categories .map((c) => ({ c, a: angle(c) })) .sort((a, b) => a.a - b.a) .map((d) => d.c); const start = angle(cats[0]) + angle.bandwidth() / 2; const end = angle(cats[cats.length - 1]) + angle.bandwidth() / 2; const pathId = `top-level-arc-${i}`; annotationGroup .append("path") .attr("id", pathId) .attr( "d", d3 .arc() .innerRadius(arcRadius) .outerRadius(arcRadius) .startAngle(start) .endAngle(end) ) .attr("fill", "none") .attr("stroke", "#4a4a4a") .attr("stroke-width", 2) .attr("opacity", 0.35); annotationGroup .append("text") .attr("font-size", 14) .attr("font-weight", 600) .attr("fill", "#4a4a4a") .attr("opacity", 0.85) .attr("dy", "-0.5em") .append("textPath") .attr("href", `#${pathId}`) .attr("startOffset", "25%") .attr("text-anchor", "middle") .text(group.label); }); // ───────────────────────────────────────────────────────────── // Footnote // ───────────────────────────────────────────────────────────── svg .append("foreignObject") .attr("x", margin.left) .attr("y", height - margin.bottom + 10) .attr("width", width - margin.left - margin.right) .attr("height", margin.bottom - 20) .append("xhtml:div") .style("font-family", fontFamily) .style("font-size", "10px") .style("font-style", "italic") .style("color", "#6b6b6b").html(`

Categories represent primary board-game themes and subjects. Gameplay mechanics, formats, and distribution types were removed. Overlapping or overly specific labels were pruned in favor of clearer, higher-level concepts.

Source: BoardGameGeek (boardgame categories)

`); return svg.node(); }34:T3810,{ // ───────────────────────────────────────────────────────────── // CANONICAL GROUP ORDER (controls geometry + annotations) // ───────────────────────────────────────────────────────────── const groupOrder = Object.keys(groupings); // ───────────────────────────────────────────────────────────── // DATA (derived from groupings, order is critical) // ───────────────────────────────────────────────────────────── const cleanDataSorted = groupOrder.flatMap((key) => { const group = groupings[key]; group.sort((a, b) => b.amount - a.amount); return group; }); // ───────────────────────────────────────────────────────────── // Assets // ───────────────────────────────────────────────────────────── const imageUrl = await FileAttachment("boardgame1.jpg").url(); // ───────────────────────────────────────────────────────────── // Layout & styling // ───────────────────────────────────────────────────────────── const width = 700; const height = 880; const margin = { top: 40, right: 40, bottom: 80, left: 40 }; const headerHeight = 110; const backgroundColor = "#f6efe6"; const fontFamily = '"Libre Baskerville", Georgia, serif'; // ───────────────────────────────────────────────────────────── // Radial geometry // ───────────────────────────────────────────────────────────── const outerRadius = 236; const innerRadius = 20; const labelOffset = 12; const arcRadius = outerRadius + 80; const startAngle = -(Math.PI / 2) - 0.2481923510112518 / 2; const chartOffset = { x: -5, y: 30 }; // ───────────────────────────────────────────────────────────── // SVG root // ───────────────────────────────────────────────────────────── const svg = d3.select(DOM.svg(width, height)).attr( "style", ` background:${backgroundColor}; font-family:${fontFamily}; border-radius:16px; ` ); // ───────────────────────────────────────────────────────────── // Header // ───────────────────────────────────────────────────────────── svg .append("foreignObject") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.left - margin.right) .attr("height", headerHeight) .append("xhtml:div") .style("font-family", fontFamily) .style("color", "#2f2f2f") .style("text-align", "center") .style("line-height", "1.35").html(`

How Players Perceive Board Games

We grouped and pruned BoardGameGeek category tags to understand how players describe board games, revealing a focus on story & setting, power & conflict, and economy & infrastructure.

`); // ───────────────────────────────────────────────────────────── // Chart root // ───────────────────────────────────────────────────────────── const chart = svg .append("g") .attr( "transform", `translate(${width / 2 + chartOffset.x}, ${height / 2 + chartOffset.y})` ); // ───────────────────────────────────────────────────────────── // Scales & arc // ───────────────────────────────────────────────────────────── const angle = d3 .scaleBand() .domain(cleanDataSorted.map((d) => d.category)) .range([startAngle, startAngle + Math.PI * 2]) .padding(0.025); const radius = d3 .scaleRadial() .domain([0, d3.max(cleanDataSorted, (d) => d.amount)]) .range([innerRadius, outerRadius]); const arc = d3 .arc() .innerRadius(innerRadius) .outerRadius((d) => radius(d.amount)) .startAngle((d) => angle(d.category)) .endAngle((d) => angle(d.category) + angle.bandwidth()); // ───────────────────────────────────────────────────────────── // Mask // ───────────────────────────────────────────────────────────── const maskSize = outerRadius; const defs = chart.append("defs"); const mask = defs.append("mask").attr("id", "radial-bars-mask-3"); mask .append("rect") .attr("x", -maskSize) .attr("y", -maskSize) .attr("width", maskSize * 2) .attr("height", maskSize * 2) .attr("fill", "black"); mask .append("g") .selectAll("path") .data(cleanDataSorted) .join("path") .attr("d", arc) .attr("fill", "white"); // ───────────────────────────────────────────────────────────── // Masked image + overlay // ───────────────────────────────────────────────────────────── chart .append("image") .attr("href", imageUrl) .attr("x", -maskSize) .attr("y", -maskSize) .attr("width", maskSize * 2) .attr("height", maskSize * 2) .attr("preserveAspectRatio", "xMidYMid slice") .attr("mask", "url(#radial-bars-mask-3)"); chart .append("rect") .attr("x", -maskSize) .attr("y", -maskSize) .attr("width", maskSize * 2) .attr("height", maskSize * 2) .attr("fill", "#222") .attr("fill-opacity", 0.8) .attr("mask", "url(#radial-bars-mask-3)"); // ───────────────────────────────────────────────────────────── // Bars // ───────────────────────────────────────────────────────────── chart .append("g") .selectAll("path") .data(cleanDataSorted) .join("path") .attr("d", arc) .attr("fill", "none") .attr("stroke", backgroundColor) .attr("stroke-width", 0.5); // ───────────────────────────────────────────────────────────── // Labels // ───────────────────────────────────────────────────────────── chart .append("g") .selectAll("text") .data(cleanDataSorted) .join("text") .attr("transform", (d) => { const a = angle(d.category) + angle.bandwidth() / 2; const t = a - Math.PI / 2; const r = (t * 180) / Math.PI; const flip = t < -Math.PI / 2 || t > Math.PI / 2 ? 180 : 0; return `rotate(${r}) translate(${ radius(d.amount) + labelOffset },0) rotate(${flip})`; }) .attr("text-anchor", (d) => { const t = angle(d.category) + angle.bandwidth() / 2 - Math.PI / 2; return t < -Math.PI / 2 || t > Math.PI / 2 ? "end" : "start"; }) .attr("dominant-baseline", "middle") .attr("fill", "#2f2f2f") .attr("font-size", (d) => angle(d.category) > 0 && angle(d.category) < Math.PI ? 8 : 10 ) .attr("font-weight", (d) => angle(d.category) > 0 && angle(d.category) < Math.PI ? "normal" : "bold" ) .text((d) => angle(d.category) > 0 && angle(d.category) < Math.PI ? d3.format(".2~s")(d.amount) : d.category ) .each(function (d) { d3.select(this) .append("tspan") .attr("dx", "0.4em") .attr("fill", "#2f2f2f") .attr("font-weight", (d) => angle(d.category) > 0 && angle(d.category) < Math.PI ? "bold" : "normal" ) .attr( "font-size", angle(d.category) > 0 && angle(d.category) < Math.PI ? 10 : 8 ) .text((d) => angle(d.category) > 0 && angle(d.category) < Math.PI ? d.category : d3.format(".2~s")(d.amount) ); }); // ───────────────────────────────────────────────────────────── // Top-level annotation arcs (ordered & contiguous) // ───────────────────────────────────────────────────────────── // ───────────────────────────────────────────────────────────── // Top-level annotation arcs (ordered, contiguous, auto-flipped) // ───────────────────────────────────────────────────────────── const topLevelCategories = groupOrder.map((key) => ({ label: key, categories: groupings[key].map((d) => d.category) })); const annotationGroup = chart.append("g"); topLevelCategories.forEach((group, i) => { // Sort categories by angular position const cats = group.categories .map((c) => ({ c, a: angle(c) })) .sort((a, b) => a.a - b.a) .map((d) => d.c); // Arc bounds (slightly inset to avoid touching bars) const start = angle(cats[0]) + angle.bandwidth() * 0.1; const end = angle(cats[cats.length - 1]) + angle.bandwidth() - angle.bandwidth() * 0.1; // Mid-angle determines whether text should be flipped const midAngle = (start + end) / 2; const flip = midAngle > Math.PI / 2 && midAngle < (3 * Math.PI) / 2; const pathId = `top-level-arc-2-${i}`; // Draw arc path (direction may be reversed for readability) annotationGroup .append("path") .attr("id", pathId) .attr( "d", d3 .arc() .innerRadius(arcRadius) .outerRadius(arcRadius) .startAngle(flip ? end : start) .endAngle(flip ? start : end) ) .attr("fill", "none") .attr("stroke", "#4a4a4a") .attr("stroke-width", group.label === "Other" ? 1 : 3) .attr("opacity", group.label === "Other" ? 0.2 : 0.5); // Label follows the path (now always upright) annotationGroup .append("text") .attr("font-size", 14) .attr("font-weight", 600) .attr("fill", "#4a4a4a") .attr("opacity", group.label === "Other" ? 0.5 : 0.85) .attr( "dy", group.label === "Other" || group.label === "Conflict & Control" ? "1em" : "-0.5em" ) .append("textPath") .attr("href", `#${pathId}`) .attr("startOffset", "25%") .attr("text-anchor", "middle") .text(group.label); }); // ───────────────────────────────────────────────────────────── // Footnote // ───────────────────────────────────────────────────────────── svg .append("foreignObject") .attr("x", margin.left) .attr("y", height - margin.bottom + 10) .attr("width", width - margin.left - margin.right) .attr("height", margin.bottom - 20) .append("xhtml:div") .style("font-family", fontFamily) .style("font-size", "10px") .style("font-style", "italic") .style("color", "#6b6b6b").html(`

Source: BoardGameGeek (boardgame categories)

`); return svg.node(); }35:T3fb9,{ const curvedRailPath = (a0, a1, r0, r1, rArc) => { const p0 = polar(a0, r0); const p1 = polar(a0, rArc); const p2 = polar(a1, rArc); const p3 = polar(a1, r1); const largeArc = Math.abs(a1 - a0) > Math.PI ? 1 : 0; const sweep = a1 > a0 ? 1 : 0; return ` M ${p0[0]} ${p0[1]} L ${p1[0]} ${p1[1]} A ${rArc} ${rArc} 0 ${largeArc} ${sweep} ${p2[0]} ${p2[1]} L ${p3[0]} ${p3[1]} `; }; // ───────────────────────────────────────────────────────────── // CANONICAL GROUP ORDER // ───────────────────────────────────────────────────────────── const groupOrder = Object.keys(groupings); const allCategories = Object.values(groupings).flat(); // ───────────────────────────────────────────────────────────── // DATA // ───────────────────────────────────────────────────────────── const cleanDataSorted = groupOrder.flatMap((key) => { const group = groupings[key]; group.sort((a, b) => b.amount - a.amount); return group; }); const imageUrl = await FileAttachment("boardgame1.jpg").url(); // ───────────────────────────────────────────────────────────── // LAYOUT & STYLING // ───────────────────────────────────────────────────────────── const width = 700; const height = 880; const margin = { top: 40, right: 40, bottom: 80, left: 40 }; const headerHeight = 110; const backgroundColor = "#f6efe6"; const fontFamily = '"Libre Baskerville", Georgia, serif'; const approxCharWidth = 5.8; // px, Libre Baskerville @ ~9–10px // ───────────────────────────────────────────────────────────── // RADIAL GEOMETRY // ───────────────────────────────────────────────────────────── const outerRadius = 170; const innerRadius = 20; const labelOffset = 12; const arcRadius = outerRadius + 146; const startAngle = -(Math.PI / 2) - 0.2481923510112518 / 2; const chartOffset = { x: -5, y: 36 }; // ───────────────────────────────────────────────────────────── // ANNOTATION GEOMETRY // ───────────────────────────────────────────────────────────── const gameLabelDy = "1.33em"; const gameAnchorInset = 24; const categoryAnchorOffset = 10; const railStroke = "#2f2f2f"; // ───────────────────────────────────────────────────────────── // SVG ROOT // ───────────────────────────────────────────────────────────── const svg = d3.select(DOM.svg(width, height)).attr( "style", ` background:${backgroundColor}; font-family:${fontFamily}; border-radius:16px; ` ); // ───────────────────────────────────────────────────────────── // HEADER // ───────────────────────────────────────────────────────────── svg .append("foreignObject") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.left - margin.right) .attr("height", headerHeight) .append("xhtml:div") .style("font-family", fontFamily) .style("color", "#2f2f2f") .style("text-align", "center") .style("line-height", "1.35").html(`

How Players Perceive Board Games

BoardGameGeek categories reveal how players organize board games into broader themes. Each theme is illustrated by the top-ranked game in its largest category, showing that highly rated games tend to center on a dominant idea while spanning multiple related themes.

`); // ───────────────────────────────────────────────────────────── // CHART ROOT // ───────────────────────────────────────────────────────────── const chart = svg .append("g") .attr( "transform", `translate(${width / 2 + chartOffset.x}, ${height / 2 + chartOffset.y})` ); // ───────────────────────────────────────────────────────────── // SCALES // ───────────────────────────────────────────────────────────── const angle = d3 .scaleBand() .domain(cleanDataSorted.map((d) => d.category)) .range([startAngle, startAngle + Math.PI * 2]) .padding(0.025); const radius = d3 .scaleRadial() .domain([0, d3.max(cleanDataSorted, (d) => d.amount)]) .range([innerRadius, outerRadius]); const arc = d3 .arc() .innerRadius(innerRadius) .outerRadius((d) => radius(d.amount)) .startAngle((d) => angle(d.category)) .endAngle((d) => angle(d.category) + angle.bandwidth()); const polar = (a, r) => [ Math.cos(a - Math.PI / 2) * r, Math.sin(a - Math.PI / 2) * r ]; // ───────────────────────────────────────────────────────────── // MASK // ───────────────────────────────────────────────────────────── const maskSize = outerRadius; const defs = chart.append("defs"); const mask = defs.append("mask").attr("id", "radial-bars-mask-final"); mask .append("rect") .attr("x", -maskSize) .attr("y", -maskSize) .attr("width", maskSize * 2) .attr("height", maskSize * 2) .attr("fill", "black"); mask .append("g") .selectAll("path") .data(cleanDataSorted) .join("path") .attr("d", arc) .attr("fill", "white"); chart .append("image") .attr("href", imageUrl) .attr("x", -maskSize) .attr("y", -maskSize) .attr("width", maskSize * 2) .attr("height", maskSize * 2) .attr("preserveAspectRatio", "xMidYMid slice") .attr("mask", "url(#radial-bars-mask-final)"); chart .append("rect") .attr("x", -maskSize) .attr("y", -maskSize) .attr("width", maskSize * 2) .attr("height", maskSize * 2) .attr("fill", "#222") .attr("fill-opacity", 0.6) .attr("mask", "url(#radial-bars-mask-final)"); // ───────────────────────────────────────────────────────────── // BARS // ───────────────────────────────────────────────────────────── chart .append("g") .selectAll("path") .data(cleanDataSorted) .join("path") .attr("d", arc) .attr("fill", "none") .attr("stroke", backgroundColor) .attr("stroke-width", 0.5); // ───────────────────────────────────────────────────────────── // CATEGORY LABELS ← FIX APPLIED HERE // ───────────────────────────────────────────────────────────── chart .append("g") .selectAll("text") .data(cleanDataSorted) .join("text") .attr("transform", (d) => { const a = angle(d.category) + angle.bandwidth() / 2; const t = a - Math.PI / 2; const r = (t * 180) / Math.PI; const flip = t < -Math.PI / 2 || t > Math.PI / 2 ? 180 : 0; return `rotate(${r}) translate(${ radius(d.amount) + labelOffset },0) rotate(${flip})`; }) .attr("text-anchor", (d) => { const t = angle(d.category) + angle.bandwidth() / 2 - Math.PI / 2; return t < -Math.PI / 2 || t > Math.PI / 2 ? "end" : "start"; }) .attr("dominant-baseline", "middle") .attr("fill", "#2f2f2f") .attr("font-size", (d) => angle(d.category) > 0 && angle(d.category) < Math.PI ? 8 : 10 ) .attr("font-weight", (d) => angle(d.category) > 0 && angle(d.category) < Math.PI ? "normal" : "bold" ) .text((d) => angle(d.category) > 0 && angle(d.category) < Math.PI ? d3.format(".2~s")(d.amount) : d.category ) .each(function (d) { const labelText = `${d3.format(".2~s")(d.amount)} ${d.category}`; const textLen = labelText.length * approxCharWidth; d._labelAnchorRadius = radius(d.amount) + labelOffset + textLen; console.log(labelText, textLen); d3.select(this) .append("tspan") .attr("dx", "0.4em") .attr("fill", "#2f2f2f") .attr("font-weight", (d) => angle(d.category) > 0 && angle(d.category) < Math.PI ? "bold" : "normal" ) .attr( "font-size", angle(d.category) > 0 && angle(d.category) < Math.PI ? 10 : 8 ) .text((d) => angle(d.category) > 0 && angle(d.category) < Math.PI ? d.category : d3.format(".2~s")(d.amount) ); }); // ───────────────────────────────────────────────────────────── // TOP-LEVEL ARCS + EXEMPLARS // ───────────────────────────────────────────────────────────── const annotationGroup = chart.append("g"); const railGroup = chart.append("g"); groupOrder.forEach((groupLabel, i) => { const groupData = groupings[groupLabel]; const cats = groupData .map((d) => d.category) .sort((a, b) => angle(a) - angle(b)); const start = angle(cats[0]) + angle.bandwidth() * 0.1; const end = angle(cats[cats.length - 1]) + angle.bandwidth() * 0.9; const mid = (start + end) / 2; const flip = mid > Math.PI / 2 && mid < (3 * Math.PI) / 2; const pathId = `top-level-arc-2-${i}`; const gamePathId = `top-level-arc-game-${i}`; annotationGroup .append("path") .attr("id", pathId) .attr( "d", d3 .arc() .innerRadius(arcRadius) .outerRadius(arcRadius) .startAngle(flip ? end : start) .endAngle(flip ? start : end) ) .attr("fill", "none") .attr("stroke", "#4a4a4a") .attr("stroke-width", groupLabel === "Other" ? 1 : 3) .attr("opacity", groupLabel === "Other" ? 0.2 : 0.5); annotationGroup .append("path") .attr("id", gamePathId) .attr( "d", d3 .arc() .innerRadius(arcRadius) .outerRadius(arcRadius) .startAngle(start) .endAngle(end) ) .attr("fill", "none"); annotationGroup .append("text") .attr("font-size", 14) .attr("font-weight", 600) .attr("fill", "#4a4a4a") .attr("opacity", groupLabel === "Other" ? 0.5 : 0.85) .attr( "dy", groupLabel === "Other" || groupLabel === "Conflict & Control" ? "1em" : "-0.5em" ) .append("textPath") .attr("href", `#${pathId}`) .attr("startOffset", "25%") .attr("text-anchor", "middle") .text(groupLabel); if (i < 3) { const exemplar = [...groupData].sort((a, b) => b.amount - a.amount)[0]; const linkedCategories = allCategories.filter( (d) => d.game === exemplar.game && d.rank === exemplar.rank ); annotationGroup .append("text") .attr("font-size", 11) .attr("fill", "#4a4a4a") .attr("opacity", 0.85) .attr("dy", gameLabelDy) .append("textPath") .attr("href", `#${gamePathId}`) .attr("startOffset", "25%") .attr("text-anchor", "middle") .text( `${exemplar.game} · #${exemplar.rank}${ i === 0 ? " highest ranked game on BGG" : "" }` ); const [gx, gy] = polar(mid, arcRadius - gameAnchorInset); linkedCategories.forEach((d) => { const a = angle(d.category) + angle.bandwidth() / 2; const r0 = (d._labelAnchorRadius ?? radius(d.amount)) + categoryAnchorOffset; railGroup .append("path") .attr( "d", curvedRailPath( a, mid, r0, arcRadius - gameAnchorInset, arcRadius - gameAnchorInset - 12 - i * 8 ) ) .attr("fill", "none") .attr("stroke", railStroke) .attr("stroke-width", 1.5) .attr("opacity", 0.6); const [cx, cy] = polar(a, r0); railGroup .append("circle") .attr("cx", cx) .attr("cy", cy) .attr("r", 3) .attr("fill", backgroundColor) .attr("stroke", railStroke) .attr("stroke-width", 1.5); }); railGroup .append("circle") .attr("cx", gx) .attr("cy", gy) .attr("r", 4) .attr("fill", railStroke); } }); // ───────────────────────────────────────────────────────────── // FOOTER // ───────────────────────────────────────────────────────────── svg .append("foreignObject") .attr("x", margin.left) .attr("y", height - margin.bottom + 10) .attr("width", width - margin.left - margin.right) .attr("height", margin.bottom - 20) .append("xhtml:div") .style("font-family", fontFamily) .style("font-size", "10px") .style("font-style", "italic") .style("color", "#6b6b6b").html(`

Source: BoardGameGeek (boardgame categories)

`); return svg.node(); }36:T149e,{ // ───────────────────────────────────────────────────────────── // CONFIG // ───────────────────────────────────────────────────────────── const width = 500; const height = 400; const startAngle = -Math.PI / 2; const totalAngle = Math.PI * 2; const innerRadius = 20; const outerRadius = 170; const groupGap = 0.25; const overlapFactor = 0.85; const backgroundColor = "#f6efe6"; const labelOffset = 12; // ───────────────────────────────────────────────────────────── // SVG // ───────────────────────────────────────────────────────────── const svg = d3 .select(DOM.svg(width, height)) .style("background", backgroundColor); const chart = svg .append("g") .attr("transform", `translate(${width / 2},${height / 2})`); // ───────────────────────────────────────────────────────────── // DATA // ───────────────────────────────────────────────────────────── const groupOrder = Object.keys(groupings); const groups = groupOrder.map((key) => [...groupings[key]].sort((a, b) => b.amount - a.amount) ); const allCount = d3.sum(groups, (g) => g.length); // ───────────────────────────────────────────────────────────── // ANGULAR LAYOUT // ───────────────────────────────────────────────────────────── const usableAngle = totalAngle - groupGap * groupOrder.length; let cursor = startAngle; const angularData = []; groups.forEach((group, gi) => { const span = usableAngle * (group.length / allCount); const step = span / group.length; const barWidth = step / overlapFactor; group.forEach((d, i) => { const center = cursor + i * step + step / 2; angularData.push({ ...d, _group: groupOrder[gi], _center: center, _startAngle: center - barWidth / 2, _endAngle: center + barWidth / 2 }); }); cursor += span + groupGap; }); // ───────────────────────────────────────────────────────────── // SCALES // ───────────────────────────────────────────────────────────── const radius = d3 .scaleRadial() .domain([0, d3.max(angularData, (d) => d.amount)]) .range([innerRadius, outerRadius]); const arc = d3 .arc() .innerRadius(innerRadius) .outerRadius((d) => radius(d.amount)) .startAngle((d) => d._startAngle) .endAngle((d) => d._endAngle); // ───────────────────────────────────────────────────────────── // BARS // ───────────────────────────────────────────────────────────── chart .append("g") .selectAll("path") .data(angularData) .join("path") .attr("d", arc) .attr("fill", backgroundColor) .attr("stroke", "#222") .attr("stroke-width", 0.6); // ───────────────────────────────────────────────────────────── // LABELS (NO LINES) // ───────────────────────────────────────────────────────────── chart .append("g") .selectAll("text") .data(angularData) .join("text") .attr("transform", (d) => { const t = d._center - Math.PI / 2; const flip = t < -Math.PI / 2 || t > Math.PI / 2 ? 180 : 0; return ` rotate(${(t * 180) / Math.PI}) translate(${radius(d.amount) + labelOffset},0) rotate(${flip}) `; }) .attr("text-anchor", (d) => { const t = d._center - Math.PI / 2; return t < -Math.PI / 2 || t > Math.PI / 2 ? "end" : "start"; }) .attr("dominant-baseline", "middle") .attr("font-size", 9) .attr("fill", "#2f2f2f") .text((d) => `${d3.format(".2~s")(d.amount)} ${d.category}`); return svg.node(); }37:T1f26,{ // ───────────────────────────────────────────────────────────── // DATA // ───────────────────────────────────────────────────────────── const games = top20games.slice(0, 10).map((d, i) => ({ ...d, categories: d.categories.split(",").map((s) => s.trim()), color: d3.schemeTableau10[i] })); cleanData.sort((a, b) => b.amount - a.amount); // ───────────────────────────────────────────────────────────── // LAYOUT // ───────────────────────────────────────────────────────────── const width = 1000; const height = 700; const innerRadius = 30; const outerRadius = 340; const labelOffset = 6; // tighter to bars const barAngleSpan = Math.PI * 1.5; const rotationCW = Math.PI / 2; const barStartAngle = Math.PI - barAngleSpan / 2 + rotationCW; const chartOffset = { x: -220, y: -40 }; const listX = width - 320; const listYStart = height / 2 - 120; const listSpacing = 22; const backgroundColor = "#f6efe6"; // ───────────────────────────────────────────────────────────── // SVG // ───────────────────────────────────────────────────────────── const svg = d3 .select(DOM.svg(width, height)) .style("background", backgroundColor) .style("font-family", `"Libre Baskerville", Georgia, serif`); const chart = svg .append("g") .attr( "transform", `translate(${width / 2 + chartOffset.x}, ${height / 2 + chartOffset.y})` ); // ───────────────────────────────────────────────────────────── // SCALES // ───────────────────────────────────────────────────────────── const angle = d3 .scaleBand() .domain(cleanData.map((d) => d.category)) .range([barStartAngle, barStartAngle + barAngleSpan]) .padding(0.08); const radius = d3 .scaleRadial() .domain([0, d3.max(cleanData, (d) => d.amount)]) .range([innerRadius, outerRadius]); const arc = d3 .arc() .innerRadius(innerRadius) .outerRadius((d) => radius(d.amount)) .startAngle((d) => angle(d.category)) .endAngle((d) => angle(d.category) + angle.bandwidth()); // ───────────────────────────────────────────────────────────── // BARS // ───────────────────────────────────────────────────────────── chart .append("g") .selectAll("path") .data(cleanData) .join("path") .attr("d", arc) .attr("fill", "rgba(0,0,0,0.18)") .attr("stroke", backgroundColor) .attr("stroke-width", 0.5); // ───────────────────────────────────────────────────────────── // CATEGORY LABELS — BAR-SPECIFIC RADIUS // ───────────────────────────────────────────────────────────── chart .append("g") .selectAll("text") .data(cleanData) .join("text") .attr("transform", (d) => { const a = angle(d.category) + angle.bandwidth() / 2; const t = a - Math.PI / 2; const r = radius(d.amount) + labelOffset; return ` rotate(${(t * 180) / Math.PI}) translate(${r},0) rotate(${t < -Math.PI / 2 || t > Math.PI / 2 ? 180 : 0}) `; }) .attr("text-anchor", (d) => { const t = angle(d.category) + angle.bandwidth() / 2 - Math.PI / 2; return t < -Math.PI / 2 || t > Math.PI / 2 ? "end" : "start"; }) .attr("font-size", 8.5) .attr("font-weight", "bold") .attr("fill", "#2f2f2f") .text((d) => d.category); // ───────────────────────────────────────────────────────────── // GAME LABELS — SMALLER, FILLED // ───────────────────────────────────────────────────────────── games.forEach((game, i) => { const y = listYStart + i * listSpacing; const g = svg.append("g").attr("transform", `translate(${listX}, ${y})`); const label = i === 0 ? `${game.rank}. ${game.game} • ${game.categories.length} categories` : `${game.rank}. ${game.game} • ${game.categories.length}`; const text = g .append("text") .attr("x", 6) .attr("y", 10) .attr("font-size", 9) // ↓ smaller .attr("dominant-baseline", "middle") .attr("fill", "#2f2f2f") // editorial text color .text(label); const bbox = text.node().getBBox(); g.insert("rect", "text") .attr("x", 0) .attr("y", 0) .attr("rx", 3) .attr("ry", 3) .attr("width", bbox.width + 12) .attr("height", 16) // ↓ smaller .attr("fill", game.color) .attr("opacity", 0.25); game._connectorTarget = { x: listX, y: y + 8 }; }); // ───────────────────────────────────────────────────────────── // CONNECTORS — unchanged geometry // ───────────────────────────────────────────────────────────── const links = chart .append("g") .attr("fill", "none") .attr("stroke-linecap", "round"); const dx = listX - (width / 2 + chartOffset.x) - innerRadius; const cp1X = innerRadius + dx * 0.18; const cp2X = innerRadius + dx * 0.3; const cp3X = innerRadius + dx * 0.55; const spineHeight = innerRadius * 0.35; const concavePull = innerRadius * 0.6; const polar = (a, r) => ({ x: Math.cos(a - Math.PI / 2) * r, y: Math.sin(a - Math.PI / 2) * r }); games.forEach((game, i) => { const spineY = -spineHeight / 2 + (i / (games.length - 1)) * spineHeight; const tx = game._connectorTarget.x - (width / 2 + chartOffset.x); const ty = game._connectorTarget.y - (height / 2 + chartOffset.y); game.categories.forEach((cat) => { const a = angle(cat) + angle.bandwidth() / 2; const p0 = polar(a, innerRadius); const p1 = polar(a, innerRadius - concavePull); links .append("path") .attr("stroke", game.color) .attr("stroke-opacity", 0.65) .attr("stroke-width", 1.4) .attr( "d", ` M ${p0.x},${p0.y} C ${p1.x},${p1.y} ${cp1X},${spineY} ${cp1X},${spineY} L ${cp2X},${spineY} C ${cp3X},${spineY} ${cp3X},${ty} ${tx},${ty} ` ); }); }); return svg.node(); }38:T212b,{ // ───────────────────────────────────────────────────────────── // DATA // ───────────────────────────────────────────────────────────── const games = top20games.slice(0, 10).map((d, i) => ({ ...d, categories: d.categories.split(",").map((s) => s.trim()), color: d3.schemeTableau10[i] })); cleanData.sort((a, b) => b.amount - a.amount); // ───────────────────────────────────────────────────────────── // LAYOUT // ───────────────────────────────────────────────────────────── const width = 1400; const height = 700; const bubbleRailRadius = 250; const barAngleSpan = Math.PI * 1.5; const rotationCW = Math.PI / 2; const startAngle = Math.PI - barAngleSpan / 2 + rotationCW; const chartOffset = { x: -300, y: -20 }; const listX = width - 520; const listYStart = height / 2 - 120; const listSpacing = 22; const backgroundColor = "#f6efe6"; // ───────────────────────────────────────────────────────────── // SVG // ───────────────────────────────────────────────────────────── const svg = d3 .select(DOM.svg(width, height)) .style("background", backgroundColor) .style("font-family", `"Libre Baskerville", Georgia, serif`); const chart = svg .append("g") .attr( "transform", `translate(${width / 2 + chartOffset.x}, ${height / 2 + chartOffset.y})` ); // ───────────────────────────────────────────────────────────── // ANGLE SCALE // ───────────────────────────────────────────────────────────── const angle = d3 .scaleBand() .domain(cleanData.map((d) => d.category)) .range([startAngle, startAngle + barAngleSpan]) .padding(0.12); // ───────────────────────────────────────────────────────────── // BUBBLE SIZE SCALE (AREA-TRUE) // ───────────────────────────────────────────────────────────── const bubbleRadius = d3 .scaleSqrt() .domain([0, d3.max(cleanData, (d) => d.amount)]) .range([5, 50]); const polar = (a, r) => ({ x: Math.cos(a - Math.PI / 2) * r, y: Math.sin(a - Math.PI / 2) * r }); // ───────────────────────────────────────────────────────────── // CATEGORY BUBBLES // ───────────────────────────────────────────────────────────── chart .append("g") .selectAll("circle") .data(cleanData) .join("circle") .attr("cx", (d) => { const a = angle(d.category) + angle.bandwidth() / 2; return polar(a, bubbleRailRadius).x; }) .attr("cy", (d) => { const a = angle(d.category) + angle.bandwidth() / 2; return polar(a, bubbleRailRadius).y; }) .attr("r", (d) => bubbleRadius(d.amount)) .attr("stroke", "rgba(0,0,0,0.18)") .attr("fill", backgroundColor); // ───────────────────────────────────────────────────────────── // CATEGORY LABELS — JUST OUTSIDE EACH BUBBLE // ───────────────────────────────────────────────────────────── chart .append("g") .selectAll("text") .data(cleanData) .join("text") .attr("transform", (d) => { const a = angle(d.category) + angle.bandwidth() / 2; const t = a - Math.PI / 2; const r = bubbleRailRadius + bubbleRadius(d.amount) + 6; return ` rotate(${(t * 180) / Math.PI}) translate(${r},0) rotate(${t < -Math.PI / 2 || t > Math.PI / 2 ? 180 : 0}) `; }) .attr("text-anchor", (d) => { const t = angle(d.category) + angle.bandwidth() / 2 - Math.PI / 2; return t < -Math.PI / 2 || t > Math.PI / 2 ? "end" : "start"; }) .attr("font-size", 8.5) .attr("font-weight", "bold") .attr("fill", "#2f2f2f") .text((d) => d.category); // ───────────────────────────────────────────────────────────── // GAME LABELS (unchanged) // ───────────────────────────────────────────────────────────── games.forEach((game, i) => { const y = listYStart + i * listSpacing; const g = svg.append("g").attr("transform", `translate(${listX}, ${y})`); const label = i === 0 ? `${game.rank}. ${game.game} • ${game.categories.length} categories` : `${game.rank}. ${game.game} • ${game.categories.length}`; const text = g .append("text") .attr("x", 6) .attr("y", 10) .attr("font-size", 9) .attr("dominant-baseline", "middle") .attr("fill", "#2f2f2f") .text(label); const bbox = text.node().getBBox(); g.insert("rect", "text") .attr("x", 0) .attr("y", 0) .attr("rx", 3) .attr("ry", 3) .attr("width", bbox.width + 12) .attr("height", 16) .attr("fill", game.color) .attr("opacity", 0.25); game._connectorTarget = { x: listX, y: y + 8 }; }); // ───────────────────────────────────────────────────────────── // CONNECTORS — BUBBLE EDGE → SPINE → LABEL // ───────────────────────────────────────────────────────────── const links = chart .append("g") .attr("fill", "none") .attr("stroke-linecap", "round"); const dx = listX - (width / 2 + chartOffset.x) - bubbleRailRadius; const cp1X = bubbleRailRadius; const cp2X = bubbleRailRadius + dx * 0.3; const cp3X = bubbleRailRadius + dx * 0.55; const spineHeight = bubbleRailRadius * 0.22; const concavePull = bubbleRailRadius * 0.6; games.forEach((game, i) => { const spineY = -spineHeight / 2 + (i / (games.length - 1)) * spineHeight; const tx = game._connectorTarget.x - (width / 2 + chartOffset.x); const ty = game._connectorTarget.y - (height / 2 + chartOffset.y); game.categories.forEach((cat) => { const d = cleanData.find((c) => c.category === cat); if (!d) return; const a = angle(cat) + angle.bandwidth() / 2; const r0 = bubbleRailRadius - bubbleRadius(d.amount); const p0 = polar(a, r0); const p1 = polar(a, r0 - concavePull); links .append("path") .attr("stroke", game.color) .attr("stroke-opacity", 0.65) .attr("stroke-width", 1.4) .attr( "d", ` M ${p0.x},${p0.y} C ${p1.x},${p1.y} ${cp1X},${spineY} ${cp1X},${spineY} L ${cp2X},${spineY} C ${cp3X},${spineY} ${cp3X},${ty} ${tx},${ty} ` ); }); }); return svg.node(); }39:T1be4,{ // ───────────────────────────────────────────────────────────── // CONFIG / MAGIC NUMBERS // ───────────────────────────────────────────────────────────── const WIDTH = 800; const HEIGHT = 640; const OUTER_RADIUS = 350; const INNER_RADIUS = 80; const BAR_PADDING = -0.1; // overlap const BAR_PAD_ANGLE = 0.012; // subtle taper const BAR_CORNER_RADIUS = 6; // petal softness const BAR_STROKE_WIDTH = 1.1; const LABEL_OFFSET = 14; const INNER_BUBBLE_RAIL = INNER_RADIUS * 0.7; const INNER_BUBBLE_MIN_R = 2; const INNER_BUBBLE_MAX_R = 14; const START_ANGLE = -(Math.PI / 2) - 0.2481923510112518 / 3; const CHART_OFFSET = { x: 60, y: 50 }; // ── FLORA PALETTE ──────────────────────────────────────────── const PAPER = "#f6efe6"; const INK = "#111111"; const RED = "#d9382c"; const VALUE_COLOR = "#555555"; // ───────────────────────────────────────────────────────────── // DATA // ───────────────────────────────────────────────────────────── // ⚠️ DO NOT SORT const data = cleanData; const top10 = top20games.slice(0, 10).map((d) => ({ ...d, categories: d.categories.split(",").map((s) => s.trim()) })); const top10Counts = d3.rollup( top10.flatMap((g) => g.categories), (v) => v.length, (d) => d ); // ───────────────────────────────────────────────────────────── // SVG ROOT // ───────────────────────────────────────────────────────────── const svg = d3 .select(DOM.svg(WIDTH, HEIGHT)) .style("background", PAPER) .style("font-family", `"Libre Baskerville", Georgia, serif`); const chart = svg .append("g") .attr( "transform", `translate(${WIDTH / 2 + CHART_OFFSET.x}, ${HEIGHT / 2 + CHART_OFFSET.y})` ); // ───────────────────────────────────────────────────────────── // SCALES // ───────────────────────────────────────────────────────────── const angle = d3 .scaleBand() .domain(data.map((d) => d.category)) .range([START_ANGLE, START_ANGLE + Math.PI * 2]) .padding(BAR_PADDING); const radius = d3 .scaleRadial() .domain([0, d3.max(data, (d) => d.amount)]) .range([INNER_RADIUS, OUTER_RADIUS]); const innerBubbleRadius = d3 .scaleSqrt() .domain([0, d3.max(top10Counts.values()) || 1]) .range([INNER_BUBBLE_MIN_R, INNER_BUBBLE_MAX_R]); // ───────────────────────────────────────────────────────────── // ARC GENERATOR — ROUNDED + TAPERED PETALS // ───────────────────────────────────────────────────────────── const arc = d3 .arc() .innerRadius(INNER_RADIUS) .outerRadius((d) => radius(d.amount)) .startAngle((d) => angle(d.category)) .endAngle((d) => angle(d.category) + angle.bandwidth()) .cornerRadius(BAR_CORNER_RADIUS) .padAngle(BAR_PAD_ANGLE) .padRadius(OUTER_RADIUS); // ───────────────────────────────────────────────────────────── // RADIAL PETALS // ───────────────────────────────────────────────────────────── chart .append("g") .selectAll("path") .data(data) .join("path") .attr("d", arc) .attr("fill", PAPER) .attr("stroke", INK) .attr("stroke-width", BAR_STROKE_WIDTH) .attr("stroke-linejoin", "round"); // ───────────────────────────────────────────────────────────── // INNER BUBBLES (TOP-10 SIGNAL) // ───────────────────────────────────────────────────────────── chart .append("g") .selectAll("circle") .data(data) .join("circle") .attr("cx", (d) => { const a = angle(d.category) + angle.bandwidth() / 2; return Math.cos(a - Math.PI / 2) * INNER_BUBBLE_RAIL; }) .attr("cy", (d) => { const a = angle(d.category) + angle.bandwidth() / 2; return Math.sin(a - Math.PI / 2) * INNER_BUBBLE_RAIL; }) .attr("r", (d) => innerBubbleRadius(top10Counts.get(d.category) || 0)) .attr("fill", RED) .attr("stroke", INK) .attr("stroke-width", 2); // ───────────────────────────────────────────────────────────── // CATEGORY LABELS // ───────────────────────────────────────────────────────────── chart .append("g") .selectAll("text") .data(data) .join("text") .attr("transform", (d) => { const a = angle(d.category) + angle.bandwidth() / 2; const t = a - Math.PI / 2; const flip = t < -Math.PI / 2 || t > Math.PI / 2 ? 180 : 0; return ` rotate(${(t * 180) / Math.PI}) translate(${radius(d.amount) + LABEL_OFFSET},0) rotate(${flip}) `; }) .attr("text-anchor", (d) => { const t = angle(d.category) + angle.bandwidth() / 2 - Math.PI / 2; return t < -Math.PI / 2 || t > Math.PI / 2 ? "end" : "start"; }) .attr("dominant-baseline", "middle") .attr("font-size", 9) .attr("font-weight", 600) .attr("fill", RED) .attr("font-family", "verdana") .text((d) => d.category) .each(function (d) { d3.select(this) .append("tspan") .attr("dx", "0.4em") .attr("font-size", "8px") .attr("fill", VALUE_COLOR) .text(d.amount); }); return svg.node(); }3a:T1b21,{ // ───────────────────────────────────────────────────────────── // CONFIG // ───────────────────────────────────────────────────────────── const WIDTH = 800; const HEIGHT = 800; const INNER_RADIUS = 80; const OUTER_RADIUS = 350; const BAR_PADDING = -0.1; const BAR_PAD_ANGLE = 0.012; const BAR_CORNER_RADIUS = 6; const BAR_STROKE_WIDTH = 1.1; const LABEL_OFFSET = 12; // botanical dot system const DOT_RADIUS = 2; const ROW_GAP = DOT_RADIUS * 2.8; const EDGE_MARGIN = DOT_RADIUS * 1.2; const START_ANGLE = -(Math.PI / 2) - 0.2481923510112518 / 3; const CHART_OFFSET = { x: 60, y: 30 }; // colors const PAPER = "#f6efe6"; const INK = "#111111"; const RED = "#d9382c"; const VALUE_COLOR = "#555555"; // ───────────────────────────────────────────────────────────── // DATA // ───────────────────────────────────────────────────────────── const games = top20games.map((d) => ({ ...d, categories: d.categories.split(",").map((s) => s.trim()) })); const data = Array.from( d3.rollup( games.flatMap((d) => d.categories), (v) => v.length, (d) => d ), ([category, amount]) => ({ category, amount }) ).sort((a, b) => b.amount - a.amount); // ───────────────────────────────────────────────────────────── // SVG ROOT // ───────────────────────────────────────────────────────────── const svg = d3 .select(DOM.svg(WIDTH, HEIGHT)) .style("background", PAPER) .style("font-family", `"Libre Baskerville", Georgia, serif`); const chart = svg .append("g") .attr( "transform", `translate(${WIDTH / 2 + CHART_OFFSET.x}, ${HEIGHT / 2 + CHART_OFFSET.y})` ); // ───────────────────────────────────────────────────────────── // SCALES // ───────────────────────────────────────────────────────────── const angle = d3 .scaleBand() .domain(data.map((d) => d.category)) .range([START_ANGLE, START_ANGLE + Math.PI * 2]) .padding(BAR_PADDING); const radius = d3 .scaleRadial() .domain([0, d3.max(data, (d) => d.amount)]) .range([INNER_RADIUS, OUTER_RADIUS]); // ───────────────────────────────────────────────────────────── // PETAL ARC // ───────────────────────────────────────────────────────────── const arc = d3 .arc() .innerRadius(INNER_RADIUS) .outerRadius((d) => radius(d.amount)) .startAngle((d) => angle(d.category)) .endAngle((d) => angle(d.category) + angle.bandwidth()) .cornerRadius(BAR_CORNER_RADIUS) .padAngle(BAR_PAD_ANGLE) .padRadius(OUTER_RADIUS); chart .append("g") .selectAll("path") .data(data) .join("path") .attr("d", arc) .attr("fill", PAPER) .attr("stroke", INK) .attr("stroke-width", BAR_STROKE_WIDTH); // ───────────────────────────────────────────────────────────── // BOTANICAL DOT PACKING (VEIN-BASED) // ───────────────────────────────────────────────────────────── const dots = []; data.forEach((d) => { let remaining = d.amount; const a0 = angle(d.category); const a1 = a0 + angle.bandwidth(); const aMid = (a0 + a1) / 2; let r = INNER_RADIUS + 12; while (remaining > 0 && r < radius(d.amount) - DOT_RADIUS) { const usableArc = (a1 - a0) * r - EDGE_MARGIN * 2; const capacity = Math.max(1, Math.floor(usableArc / (DOT_RADIUS * 2.4))); const count = Math.min(capacity, remaining); // botanical bias: grow outward from center vein for (let i = 0; i < count; i++) { const t = count === 1 ? 0 : i / (count - 1) - 0.5; const spread = (usableArc / r) * 0.5; dots.push({ angle: aMid + t * spread, radius: r + Math.abs(t) * DOT_RADIUS * 1.2 }); } remaining -= count; r += ROW_GAP; } }); chart .append("g") .attr("fill", RED) .attr("stroke", INK) .attr("stroke-width", 0.5) .selectAll("circle") .data(dots) .join("circle") .attr("cx", (d) => Math.cos(d.angle) * d.radius) .attr("cy", (d) => Math.sin(d.angle) * d.radius) .attr("r", DOT_RADIUS); // ───────────────────────────────────────────────────────────── // LABELS // ───────────────────────────────────────────────────────────── chart .append("g") .selectAll("text") .data(data) .join("text") .attr("transform", (d) => { const a = angle(d.category) + angle.bandwidth() / 2; const t = a - Math.PI / 2; const flip = t < -Math.PI / 2 || t > Math.PI / 2 ? 180 : 0; return ` rotate(${(t * 180) / Math.PI}) translate(${radius(d.amount) + LABEL_OFFSET},0) rotate(${flip}) `; }) .attr("text-anchor", (d) => { const t = angle(d.category) + angle.bandwidth() / 2 - Math.PI / 2; return t < -Math.PI / 2 || t > Math.PI / 2 ? "end" : "start"; }) .attr("dominant-baseline", "middle") .attr("font-size", 9) .attr("font-weight", 600) .attr("fill", RED) .text((d) => d.category) .each(function (d) { d3.select(this) .append("tspan") .attr("dx", "0.4em") .attr("font-size", "8px") .attr("fill", VALUE_COLOR) .text(d.amount); }); return svg.node(); }3b:T5cbf,{ const WIDTH = 1000; const HEIGHT = 750; // ───────────────────────────────────── // HEADER LAYOUT // ───────────────────────────────────── const margin = { top: 24, right: 24, bottom: 24, left: 24 }; const headerHeight = 120; const INNER_RADIUS = 30; const OUTER_RADIUS = 2200; const BAR_PADDING = -0.1; const BAR_PAD_ANGLE = 0.012; const BAR_CORNER_RADIUS = 6; const LABEL_OFFSET = 12; const PETAL_OFFSET_FACTOR = 0.25; const START_ANGLE = -(Math.PI / 2) - 0.2481923510112518 / 3; // ───────────────────────────────────── // GUIDE LABEL ARC — RIGHT SIDE // ───────────────────────────────────── const GUIDE_TEXT_START = Math.PI * 0.4; // ~2 o’clock const GUIDE_TEXT_END = Math.PI * 0.6; // ~3 o’clock const PAPER = "#f6efe6"; const INK = "#111111"; const RED = "#d9382c"; const fontFamily = `"Libre Baskerville", Georgia, serif`; // ───────────────────────────────────── // DATA // ───────────────────────────────────── const totalClean = d3.sum(cleanData2, (d) => d.amount); const secondaryCounts = d3.rollup( top20games.flatMap((d) => d.categories.split(",").map((c) => c.trim())), (v) => v.length, (d) => d ); const totalTop20 = d3.sum([...secondaryCounts.values()]); const categoryStats = cleanData2 .map((d) => ({ category: d.category, pctAll: d.amount / totalClean, pctTop20: (secondaryCounts.get(d.category) ?? 0) / totalTop20 })) .sort((a, b) => b.pctAll - a.pctAll); // ───────────────────────────────────── // SVG // ───────────────────────────────────── const svg = d3 .select(DOM.svg(WIDTH, HEIGHT)) .style("background", PAPER) .style("font-family", fontFamily) .style("border-radius", "8px"); // ───────────────────────────────────── // HEADER // ───────────────────────────────────── svg .append("foreignObject") .attr("x", margin.left) .attr("y", margin.top) .attr("width", WIDTH - margin.left - margin.right) .attr("height", headerHeight) .append("xhtml:div") .style("font-family", fontFamily) .style("color", "#2f2f2f") .style("text-align", "center") .style("line-height", "1.35").html(`

Fantasy and war dominate board games
(they are just not the best)

They make up nearly 30% of all board games, but just about 10% of the top 100 ranked titles.

`); // ───────────────────────────────────── // DEFS (SEPARATED CORRECTLY) // ───────────────────────────────────── const svgDefs = svg.append("defs"); svgDefs.append("style").text(` .label-halo { paint-order: stroke fill; stroke: ${PAPER}; stroke-width: 6.5px; stroke-linejoin: round; } `); // ───────────────────────────────────── // CHART GROUP // ───────────────────────────────────── const chartCenterY = -40 + HEIGHT / 2 + headerHeight / 2; const chart = svg .append("g") .attr("transform", `translate(${WIDTH / 2}, ${chartCenterY})`); const chartDefs = chart.append("defs"); // ───────────────────────────────────── // SCALES // ───────────────────────────────────── const angle = d3 .scaleBand() .domain(categoryStats.map((d) => d.category)) .range([START_ANGLE, START_ANGLE + Math.PI * 2]) .padding(BAR_PADDING); const radius = d3 .scaleLinear() .domain([0, 1]) .range([INNER_RADIUS, OUTER_RADIUS]); const secondaryRadius = d3 .scaleLinear() .domain([0, 1]) .range([INNER_RADIUS, OUTER_RADIUS]); // ───────────────────────────────────── // GUIDE RINGS + LABELS (CORRECT SPACE) // ───────────────────────────────────── const guidePercents = [0.05, 0.1]; chart .append("circle") .attr("r", radius(0) - 1) .attr("fill", "none") .attr("stroke", INK) .attr("stroke-width", 0.5) .attr("opacity", 0.3); guidePercents.forEach((pct, index) => { chart .append("circle") .attr("r", radius(pct)) .attr("fill", "none") .attr("stroke", INK) .attr("stroke-dasharray", `${3 * (index + 1)},${4 * (index + 1)}`) .attr("opacity", 0.4); }); guidePercents.forEach((pct) => { chartDefs .append("path") .attr("id", `guide-path-${pct}`) .attr( "d", d3 .arc() .innerRadius(radius(pct)) .outerRadius(radius(pct)) .startAngle(GUIDE_TEXT_START) .endAngle(GUIDE_TEXT_END)() ); }); // ───────────────────────────────────── // PRIMARY PETALS // ───────────────────────────────────── const primaryArc = d3 .arc() .innerRadius(INNER_RADIUS) .outerRadius((d) => radius(d.pctAll)) .startAngle((d) => angle(d.category)) .endAngle((d) => angle(d.category) + angle.bandwidth()) .cornerRadius(BAR_CORNER_RADIUS) .padAngle(BAR_PAD_ANGLE); chart .append("g") .selectAll("path") .data(categoryStats) .join("path") .attr("d", primaryArc) .attr("fill", RED) .attr("stroke", PAPER); // ───────────────────────────────────── // SECONDARY PETALS // ───────────────────────────────────── const secondaryArc = d3 .arc() .innerRadius(INNER_RADIUS) .outerRadius((d) => secondaryRadius(d.pctTop20)) .startAngle( (d) => angle(d.category) + angle.bandwidth() * PETAL_OFFSET_FACTOR ) .endAngle( (d) => angle(d.category) + angle.bandwidth() * (1 - PETAL_OFFSET_FACTOR) ) .cornerRadius(4) .padAngle(BAR_PAD_ANGLE * 0.6); chart .append("g") .selectAll("path") .data(categoryStats) .join("path") .attr("d", secondaryArc) .attr("fill", INK) .attr("stroke", PAPER); // ───────────────────────────────────── // CATEGORY LABELS // ───────────────────────────────────── const labels = chart .append("g") .selectAll("text") .data(categoryStats) .join("text") .attr("class", "label-halo") .attr("dominant-baseline", "middle") .attr("text-anchor", (d) => { const t = angle(d.category) + angle.bandwidth() / 2 - Math.PI / 2; return t < -Math.PI / 2 || t > Math.PI / 2 ? "end" : "start"; }) .attr("transform", (d) => { const a = angle(d.category) + angle.bandwidth() / 2; const t = a - Math.PI / 2; const flip = t < -Math.PI / 2 || t > Math.PI / 2 ? 180 : 0; const r = Math.max(radius(d.pctAll), secondaryRadius(d.pctTop20)); return `rotate(${(t * 180) / Math.PI}) translate(${ r + LABEL_OFFSET },0) rotate(${flip})`; }); labels .append("tspan") .attr("font-size", 10) .attr("font-weight", 700) .attr("fill", INK) .text((d) => d.category); labels .append("tspan") .attr("font-size", 8) .attr("fill", RED) .text((d) => ` • ${(d.pctAll * 100).toFixed(1)}%`); labels .append("tspan") .attr("font-size", 8) .attr("fill", INK) .text((d) => ` • ${(d.pctTop20 * 100).toFixed(1)}%`); // ───────────────────────────────────── // ⭐ STAR ANNOTATIONS (TEXT-LENGTH AWARE) // ───────────────────────────────────── const STAR_CATEGORIES = ["Economic", "Wargame"]; const STAR_SIZE = 16; const STAR_GAP = 4; // breathing room after text function starColor(d) { if (d.category === "Economic") return INK; if (d.category === "Wargame") return RED; return INK; } const starredData = categoryStats.filter((d) => STAR_CATEGORIES.includes(d.category) ); chart .append("g") .attr("class", "annotation-stars") .selectAll("text") .data(starredData) .join("text") .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .attr("font-size", STAR_SIZE) .attr("font-weight", 700) .attr("fill", (d) => starColor(d)) .attr("transform", (d, index) => { const a = angle(d.category) + angle.bandwidth() / 2; const t = a - Math.PI / 2; const flip = t < -Math.PI / 2 || t > Math.PI / 2 ? 180 : 0; const r = Math.max(radius(d.pctAll), secondaryRadius(d.pctTop20)); // Tunable values (design constants) const STAR_INLINE_OFFSET = index === 0 ? -109 - 8 : -105 - 8; // distance from label origin const dir = flip === 180 ? -1 : 1; return ` rotate(${(t * 180) / Math.PI}) translate(${r + LABEL_OFFSET + dir * STAR_INLINE_OFFSET}, 0) rotate(${flip}) `; }) .text("✪"); const NA_CATEGORIES = [ { category: "Prehistoric", offset: -112 - 8 }, { category: "Music", offset: 85 + 8 }, { category: "Mafia", offset: -85 - 8 }, { category: "Humor", offset: -94 - 8 } ]; const naCategoryOffsets = Object.fromEntries( NA_CATEGORIES.map(({ category, offset }) => [category, offset]) ); const naStarredData = categoryStats .filter((d) => d.category in naCategoryOffsets) .map((d) => ({ ...d, offset: naCategoryOffsets[d.category] })); console.log(naStarredData); chart .append("g") .attr("class", "annotation-stars") .selectAll("text") .data(naStarredData) .join("text") .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .attr("font-size", STAR_SIZE - 2) .attr("font-weight", 700) .attr("fill", (d) => starColor(d)) .attr("transform", (d, index) => { const a = angle(d.category) + angle.bandwidth() / 2; const t = a - Math.PI / 2; const flip = t < -Math.PI / 2 || t > Math.PI / 2 ? 180 : 0; const r = Math.max(radius(d.pctAll), secondaryRadius(d.pctTop20)); const dir = flip === 180 ? -1 : 1; console.log(d); return ` rotate(${(t * 180) / Math.PI}) translate(${r + LABEL_OFFSET + dir * d.offset}, 0) rotate(${flip}) `; }) .text("★"); svg .append("foreignObject") .attr("x", WIDTH * 0.7) .attr("y", HEIGHT * 0.225) .attr("width", 180) .attr("height", 160) .append("xhtml:div") .style("font-family", fontFamily) .style("font-size", "10px") .style("line-height", "1.2") .style("color", INK).html(`

✪

Economic games are far more common in the top 100 than among board games overall

`); svg .append("foreignObject") .attr("x", WIDTH * 0.74) .attr("y", HEIGHT * 0.305) .attr("width", 180) .attr("height", 160) .append("xhtml:div") .style("font-family", fontFamily) .style("font-size", "10px") .style("line-height", "1.2") .style("color", RED).html(`

✪

Wargames are widespread among board games overall but scarce in the top 100

`); svg .append("foreignObject") .attr("x", WIDTH * 0.78) .attr("y", HEIGHT * 0.45) .attr("width", 180) .attr("height", 160) .append("xhtml:div") .style("font-family", fontFamily) .style("font-size", "10px") .style("line-height", "1.2") .style("color", INK).html(`

★

No games from this category appear in the top 100

`); // ───────────────────────────────────── // LEGEND — COMPLETE // ───────────────────────────────────── const LEGEND_INNER = 6; const LEGEND_OUTER = 60; const legendData = [0.35, 0.65, 1]; // Position legend const legend = svg .append("g") .attr("transform", `translate(${WIDTH * 0.1}, ${HEIGHT * 0.75})`); // ───────────────────────────────────── // SCALES // ───────────────────────────────────── const legendAngle = d3 .scaleBand() .domain(d3.range(legendData.length)) .range([Math.PI, Math.PI * 2]) .padding(0.15); const legendRadius = d3 .scaleLinear() .domain([0, 1]) .range([LEGEND_INNER, LEGEND_OUTER]); const legendArc = d3 .arc() .innerRadius(LEGEND_INNER) .outerRadius((d) => legendRadius(d)) .startAngle((_, i) => legendAngle(i)) .endAngle((_, i) => legendAngle(i) + legendAngle.bandwidth()) .cornerRadius(2); // ───────────────────────────────────── // RED FAN — All games // ───────────────────────────────────── const legendAll = legend.append("g"); legendAll .selectAll("path") .data(legendData) .join("path") .attr("d", legendArc) .attr("fill", RED) .attr("fill-opacity", 0.8) .attr("stroke", PAPER); legendAll .append("text") .attr("x", -20) .attr("y", LEGEND_OUTER - 4) .attr("text-anchor", "middle") .attr("font-size", 9) .attr("font-weight", 600) .attr("fill", INK) .text("All BoardGameGeek games"); // ───────────────────────────────────── // BLACK FAN — Top 100 // ───────────────────────────────────── const legendTop = legend.append("g").attr("transform", "translate(130,0)"); legendTop .selectAll("path") .data(legendData) .join("path") .attr("d", legendArc) .attr("fill-opacity", 0.8) .attr("stroke", PAPER); legendTop .append("text") .attr("x", -20) .attr("y", LEGEND_OUTER - 4) .attr("text-anchor", "middle") .attr("font-size", 9) .attr("font-weight", 600) .attr("fill", INK) .text("Top 100 games"); // ───────────────────────────────────── // LEGEND — HALF-CIRCLE GUIDE ARCS (5% / 10%) // ───────────────────────────────────── // visual (iconic) base radius const BASE_R = 18; // derived radii (equal spacing) const GUIDE_ARCS = [ { label: "5 %", r: BASE_R }, { label: "10 %", r: BASE_R * 2 } ]; // true half-circle on right side const GUIDE_START = 0; const GUIDE_END = (2 * Math.PI) / 2; const redGuideGroup = legendAll.append("g"); const inkGuideGroup = legendTop.append("g"); GUIDE_ARCS.forEach(({ r }) => { redGuideGroup .append("path") .attr( "d", d3 .arc() .innerRadius(r) .outerRadius(r) .startAngle(GUIDE_START) .endAngle(GUIDE_END)() ) .attr("fill", "none") .attr("stroke", INK) .attr("stroke-width", 0.7) .attr("stroke-dasharray", "2.5,3.5") .attr("opacity", 0.35); }); const guideDefs = legendTop.append("defs"); GUIDE_ARCS.forEach(({ r, label }) => { guideDefs .append("path") .attr("id", `legend-guide-path-${label}`) .attr( "d", d3 .arc() .innerRadius(r + 6) .outerRadius(r + 6) .startAngle(GUIDE_START) .endAngle(GUIDE_END)() ); }); GUIDE_ARCS.forEach(({ label, r }) => { // dashed half-circle inkGuideGroup .append("path") .attr( "d", d3 .arc() .innerRadius(r) .outerRadius(r) .startAngle(GUIDE_START) .endAngle(GUIDE_END)() ) .attr("fill", "none") .attr("stroke", INK) .attr("stroke-width", 0.7) .attr("stroke-dasharray", "2.5,3.5") .attr("opacity", 0.6); inkGuideGroup .append("text") .attr("font-size", 8) .attr("fill", INK) .attr("opacity", 0.75) .attr("dominant-baseline", "middle") .append("textPath") .attr("href", `#legend-guide-path-${label}`) .attr("startOffset", "26%") .attr("text-anchor", "middle") .text(label); }); // ───────────────────────────────────── // EXPLANATORY NOTE // ───────────────────────────────────── const legendNote = legend .append("text") .attr("y", LEGEND_OUTER + 12) .attr("font-size", 8) .attr("fill", INK) .attr("opacity", 0.7); legendNote .append("tspan") .attr("x", -84) .text("Each bar shows how often a category appears across games."); legendNote .append("tspan") .attr("x", -84) .attr("dy", "1.33em") .text("Percentages are normalized separately for each group."); // ───────────────────────────────────── // FOOTNOTE (BOTTOM RIGHT) // ───────────────────────────────────── svg .append("foreignObject") .attr("x", WIDTH * 0.1) .attr("y", HEIGHT * 0.91) .attr("width", 800) .attr("height", 160) .append("xhtml:div") .style("font-family", fontFamily) .style("font-size", "10px") .style("line-height", "1.45") .style("color", "#6b6b6b").html(`

Categories reflect community-assigned board-game categories, not gameplay mechanics. Formats were excluded, and overlapping or overly specific labels were excluded in favour of broader categories. Percentages are normalized separately for each group, showing relative preference rather than total volume.

Source: BoardGameGeek (boardgame categories)

`); // ───────────────────────────────────── // MINI CHART — TOP 5 (ULTRA-COMPACT) // ───────────────────────────────────── // Position const MINI_X = WIDTH * 0.74; const MINI_Y = HEIGHT * 0.65; // Dimensions const MINI_WIDTH = 200; const MINI_HEIGHT = 150; // Geometry const MINI_CX = 190; const MINI_CY = 90; const MINI_BASE_RADIUS = 90; // Arc span const MINI_ARC_START = Math.PI * 1.4; const MINI_ARC_END = Math.PI * 1.6; // Bars const MINI_BAR_HEIGHT = 8; const MINI_BAR_RADIUS = 3; // Data const miniData = categoryStats .slice() .sort((a, b) => b.pctTop20 - a.pctTop20) .slice(0, 5) .reverse(); // Scale const miniBarLen = d3 .scaleLinear() .domain([0, d3.max(miniData, (d) => d.pctTop20)]) .range([0, 68]); // Group const mini = svg .append("g") .attr("transform", `translate(${MINI_X}, ${MINI_Y})`) .attr("font-family", fontFamily); // Title mini .append("text") .attr("y", 41 - 6) .attr("font-size", 9) .attr("fill", INK) .attr("opacity", 0.75) .attr("letter-spacing", "0.02em") .attr("font-weight", "bold") .selectAll("tspan") .data(["Top categories among the 100", "highest-ranked board games"]) .enter() .append("tspan") .attr("x", 40) .attr("dy", (d, i) => (i === 0 ? 0 : "1.33em")) .text((d) => d); // Anchor points const miniPoints = miniData.map((d, i) => { const t = miniData.length === 1 ? 0.5 : i / (miniData.length - 1); const a = MINI_ARC_START + t * (MINI_ARC_END - MINI_ARC_START) * 0.9 + 0.05; const [x, y] = d3 .arc() .innerRadius(MINI_BASE_RADIUS) .outerRadius(MINI_BASE_RADIUS) .startAngle(a) .endAngle(a) .centroid(); return { ...d, x: MINI_CX + x, y: MINI_CY + y }; }); mini .append("path") .attr( "d", d3 .arc() .innerRadius(MINI_BASE_RADIUS) .outerRadius(MINI_BASE_RADIUS) .startAngle(MINI_ARC_START + 0.72) .endAngle(MINI_ARC_START - 0.07)() ) .attr("transform", `translate(${MINI_CX}, ${MINI_CY})`) .attr("fill", "none") .attr("stroke", INK) .attr("stroke-width", 1); // Bars mini .selectAll("rect") .data(miniPoints) .join("rect") .attr("x", (d) => d.x - miniBarLen(d.pctTop20)) .attr("y", (d) => d.y - MINI_BAR_HEIGHT / 2) .attr("width", (d) => miniBarLen(d.pctTop20)) .attr("height", MINI_BAR_HEIGHT) .attr("rx", MINI_BAR_RADIUS) .attr("fill", d3.color(INK).brighter(3)); // Dots mini .selectAll("circle") .data(miniPoints) .join("circle") .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", 4.5) .attr("fill", PAPER) .attr("stroke", d3.color(INK).brighter(3)) .attr("stroke-width", 1.5); // Labels const miniFmt = new Intl.NumberFormat("en-US", { style: "percent", maximumFractionDigits: 1 }); mini .selectAll("text.label") .data(miniPoints) .join("text") .attr("x", (d) => d.x + 10) .attr("y", (d) => d.y) .attr("dominant-baseline", "middle") .attr("font-size", 8) .attr("fill", INK) .text( (d, i) => `#${miniPoints.length - i} ${d.category} ${miniFmt.format(d.pctTop20)}` ); return svg.node(); }3c:Tf0d,data = [ { category: "Abstract Strategy", amount: 11922 }, { category: "Action / Dexterity", amount: 7342 }, { category: "Adventure", amount: 8758 }, { category: "Age of Reason", amount: 790 }, { category: "American Civil War", amount: 1001 }, { category: "American Indian Wars", amount: 258 }, { category: "American Revolutionary War", amount: 396 }, { category: "American West", amount: 1495 }, { category: "Ancient", amount: 3513 }, { category: "Animals", amount: 10593 }, { category: "Arabian", amount: 253 }, { category: "Aviation / Flight", amount: 2456 }, { category: "Bluffing", amount: 5427 }, { category: "Book", amount: 5209 }, { category: "Card Game", amount: 45895 }, { category: "Children's Game", amount: 19312 }, { category: "City Building", amount: 2087 }, { category: "Civil War", amount: 719 }, { category: "Civilization", amount: 6890 }, { category: "Collectible Components", amount: 4212 }, { category: "Comic Book / Strip", amount: 2851 }, { category: "Deduction", amount: 4932 }, { category: "Dice", amount: 13044 }, { category: "Economic", amount: 14541 }, { category: "Educational", amount: 3967 }, { category: "Electronic", amount: 1178 }, { category: "Environmental", amount: 1802 }, { category: "Expansion for Base-game", amount: 14932 }, { category: "Exploration", amount: 6043 }, { category: "Fan Expansion", amount: 596 }, { category: "Fantasy", amount: 27777 }, { category: "Farming", amount: 2658 }, { category: "Fighting", amount: 3542 }, { category: "Game System", amount: 312 }, { category: "Horror", amount: 6839 }, { category: "Humor", amount: 8123 }, { category: "Industry / Manufacturing", amount: 1432 }, { category: "Korean War", amount: 167 }, { category: "Mafia", amount: 1269 }, { category: "Math", amount: 2194 }, { category: "Mature / Adult", amount: 2241 }, { category: "Maze", amount: 1049 }, { category: "Medical", amount: 519 }, { category: "Medieval", amount: 5807 }, { category: "Memory", amount: 4299 }, { category: "Miniatures", amount: 18341 }, { category: "Modern Warefare", amount: 2448 }, { category: "Movies / TV / Radio theme", amount: 6582 }, { category: "Murder / Mystery", amount: 9152 }, { category: "Music", amount: 2644 }, { category: "Mythology", amount: 5866 }, { category: "Napoleonic", amount: 1589 }, { category: "Nautical", amount: 1734 }, { category: "Negotiation", amount: 2678 }, { category: "Novel-based", amount: 3896 }, { category: "Number", amount: 1824 }, { category: "Party Game", amount: 11241 }, { category: "Pike and Shot", amount: 568 }, { category: "Pirates", amount: 1742 }, { category: "Political", amount: 2213 }, { category: "Post-Napoleonic", amount: 1141 }, { category: "Prehistoric", amount: 911 }, { category: "Print & Play", amount: 3184 }, { category: "Puzzle", amount: 7016 }, { category: "Racing", amount: 3312 }, { category: "Real-time", amount: 1923 }, { category: "Religious", amount: 912 }, { category: "Renaissance", amount: 1877 }, { category: "Science Fiction", amount: 15442 }, { category: "Space Exploration", amount: 2145 }, { category: "Spies / Secret Agents", amount: 1111 }, { category: "Sports", amount: 6708 }, { category: "Territory Building", amount: 2628 }, { category: "Third-party Expansion", amount: 71 }, { category: "Trains", amount: 1841 }, { category: "Transportation", amount: 2168 }, { category: "Travel", amount: 2622 }, { category: "Trivia", amount: 8288 }, { category: "Video Game Theme", amount: 2244 }, { category: "Vietnam War", amount: 380 }, { category: "Wargame", amount: 25478 }, { category: "Word Game", amount: 4712 }, { category: "World War I", amount: 1398 }, { category: "World War II", amount: 7593 }, { category: "Zombies", amount: 1592 } ]3d:T766,cleanData = [ // Gameplay / Genre { category: "Adventure", amount: 8758 }, { category: "Exploration", amount: 6043 }, { category: "Fighting", amount: 3542 }, { category: "Economic", amount: 14541 }, { category: "Wargame", amount: 25478 }, { category: "Racing", amount: 3312 }, { category: "Negotiation", amount: 2678 }, { category: "Puzzle", amount: 7016 }, { category: "Deduction", amount: 4932 }, { category: "Territory Building", amount: 2628 }, // Setting / Theme { category: "Fantasy", amount: 27777 }, { category: "Science Fiction", amount: 15442 }, { category: "Horror", amount: 8431 }, { category: "Mythology", amount: 5866 }, { category: "Post-Apocalyptic", amount: 2665 }, { category: "Nautical", amount: 1734 }, { category: "Space Exploration", amount: 2145 }, { category: "Environmental", amount: 1802 }, { category: "Medieval", amount: 5807 }, { category: "Ancient", amount: 3513 }, { category: "Renaissance", amount: 1877 }, { category: "Prehistoric", amount: 911 }, { category: "Zombies", amount: 1592 }, // Subject Matter / Domain { category: "Animals", amount: 10593 }, { category: "City Building", amount: 2087 }, { category: "Civilization", amount: 6890 }, { category: "Farming", amount: 2658 }, { category: "Music", amount: 2644 }, { category: "Sports", amount: 6708 }, { category: "Transportation", amount: 2168 }, { category: "Pirates", amount: 1742 }, { category: "Political", amount: 2213 }, { category: "Industry / Manufacturing", amount: 1432 }, // Tone / Audience { category: "Humor", amount: 8123 }, { category: "Mature / Adult", amount: 2241 }, // Source / Origin { category: "Licensed / Adapted IP", amount: 20782 }, { category: "Movies / TV / Radio theme", amount: 6582 }, { category: "Video Game Theme", amount: 2244 }, { category: "Book / Novel-based", amount: 3896 } ]3e:T8d0,cleanDataReordered = [ // ───────────────────────────── // Narrative / Story // ───────────────────────────── { category: "Fantasy", amount: 27777, }, { category: "Science Fiction", amount: 15442 }, { category: "Murder / Mystery", amount: 9152 }, { category: "Adventure", amount: 8758 }, { category: "Horror", amount: 8431 }, { category: "Medieval", amount: 5807 }, { category: "Mythology", amount: 5866 }, { category: "Ancient", amount: 3513 }, { category: "Space Exploration", amount: 2145 }, { category: "Renaissance", amount: 1877 }, { category: "Zombies", amount: 1592 }, { category: "Prehistoric", amount: 911 }, // ───────────────────────────── // Systems // ───────────────────────────── { category: "Economic", amount: 14541 }, { category: "Civilization", amount: 6890 }, { category: "Farming", amount: 2658 }, { category: "Territory Building", amount: 2628 }, { category: "Transportation", amount: 2168 }, { category: "City Building", amount: 2087 }, { category: "Environmental", amount: 1802 }, { category: "Industry / Manufacturing", amount: 1432 }, // ───────────────────────────── // Conflict // ───────────────────────────── { category: "Wargame", amount: 25478 }, { category: "Fighting", amount: 3542 }, { category: "Political", amount: 2213 }, { category: "Mafia", amount: 1269 }, { category: "Spies / Secret Agents", amount: 1111 }, // ───────────────────────────── // Others // ───────────────────────────── { category: "Animals", amount: 10593 }, { category: "Humor", amount: 8123 }, { category: "Sports", amount: 6708 }, { category: "Exploration", amount: 6043 }, { category: "Music", amount: 2644 }, { category: "Pirates", amount: 1742 }, { category: "Nautical", amount: 1734 } ]3f:T3826,groupings = ({ "Worlds & Stories": [ { category: "Fantasy", amount: 27777, game: "Gloomhaven", rank: 4, description: "Fantasy games are those that have themes and scenarios that exist in a fictional world. It is a genre that uses magic and other supernatural forms as a primary element of plot, theme, and/or setting. Fantasy is generally distinguished from science fiction and horror by the expectation that it steers clear of scientific and macabre themes, respectively, though there can be a great deal of overlap between the three. Fantasy game elements usually include: a- Creatures that are common in fantasy books and comics, such as orcs, trolls, goblins, dragons, etc. b- Magic that can be used with units or abilities c- Can involve a struggle between good and evil forces." }, { category: "Science Fiction", amount: 15442, game: "Dune: Imperium", rank: 5, description: "Science Fiction games often have themes relating to imagined possibilities in the sciences. Such games need not be futuristic; they can be based on an alternative past. (For example, the writings of Jules Verne and the Star Wars saga are set before present time.) Many of the most popular Science Fiction games are set in outer space, and often involve alien races." }, { category: "Horror", amount: 8431, description: "Horror games often contain themes and imagery depicting morbid and supernatural elements." }, { category: "Mythology", amount: 5866, game: "Spirit Island", rank: 11, description: "Mythology games are those that incorporate a thematic narrative that defines how the game world or characters came into existence, especially those related or based on narratives of ancient civilizations of the world. The storyline in a number of Mythology games usually includes supernatural elements, such as gods, goddesses and demigods, and are sometimes set in a fabled, primordial time, which usually corresponds to a general corpus of folk stories (myths) that used to have some form of religious or sacred nature for the cultures that engendered these stories. Examples of Mythology themed games include Ra (based on Egyptian mythology), Odin's Ravens (based on Norse mythology) and Cyclades (based on Greek mythology)." }, { category: "Zombies", amount: 1592, description: "Zombie games often contain themes and imagery concerning the animated dead. Some of the more popular storylines in Zombie games include apocalyptic themes, horror, and fighting." }, { category: "Prehistoric", amount: 911, description: "Prehistoric games often have themes or storylines set in a time before recorded history. These unwritten histories are usually compiled under time periods, including the Stone Age, Bronze Age, and Iron Age. Many of the popular Prehistoric games are set in the Stone Age, hunter/gatherer societies, or time periods when dinosaurs existed." }, { category: "Ancient", amount: 3513, description: "Ancient games often have themes or storylines set across all continents in the historical context between the beginning of recorded human history through late antiquity, generally between 3000 BC and AD 476 (the fall of the Western Roman Empire). Some of the themes and imagery found in the popular Ancient games concerns ancient Egyptian, Greek, Roman, and Mesoamerican civilizations and the category spans Asian, African and Polynesian civilizations as well." }, { category: "Medieval", amount: 5807, description: "Medieval games that have themes or storylines set in Europe or Asia, between the 5th century (476, the fall of the Western Roman Empire) and the 15th century (1492, the beginnings of European overseas colonization)." }, { category: "Renaissance", amount: 1877, game: "Azul", rank: 94, description: "Renaissance games are those set between the end of the XIV (14)th century (when the Renaissance began in Italy) and roughly the end of the XVI (16)th century when firearms were not yet dominating the battle field. Approximately from 1380 to 1590." }, { category: "Pirates", amount: 2622, game: "Orléans", rank: 37, description: "Pirate games have a main character, theme or storyline of piracy. Some of the most popular themes and imagery in Pirate games concerns treasure hunting, sea robbery, swords and cannons, swashbuckling, and ship racing. Many Pirate games occur in timelines prior to the 20th century." }, { category: "Religious", amount: 912, game: "Orléans", rank: 37, description: "A Religious themed boardgame features elements of their narrative, setting or characters that relates to current belief systems (religions) of the world, either in their historical aspect and its development through time or in their actual objects of faith, like sacred scriptures and articles of doctrine. Some boardgames categorized as Religious may address particular settings or stories from a religious text, for example The Settlers of Canaan, which is themed around the biblical account of the Israelite's settling of the land of Canaan. Other Religious boardgames may have direct references to scriptures, like the Bible Trivia, or explore aspects of the faith in a playful fashion, like Credo!: the Game of Dueling Dogmas or Intelligent Design vs. Evolution." } ], "Economy & Simulation": [ { category: "Economic", amount: 14541, game: "Brass: Birmingham", rank: 1, description: "Economic games encourage players to manage a system of production, distribution, trade, and/or consumption of goods. The games usually simulate a market in some way. The term is often used interchangeably with resource management games." }, { category: "Industry / Manufacturing", amount: 1432, game: "Brass: Birmingham", rank: 1, description: "Industry / Manufacturing games encourage players to build, manage and/or operate tools and machinery in order to manufacture raw materials into goods and products." }, { category: "Farming", amount: 2658, description: "Farming games encourage players to build and manage farmland for the purposes of growing crops and/or tending to livestock, often to be sold or traded later on." }, { category: "City Building", amount: 2087, game: "7 Wonders Duel", rank: 22, description: "City Building games compel players to construct and manage a city in a way that is efficient, powerful, and/or lucrative." }, { category: "Trains", amount: 1841, game: "Brass: Birmingham", rank: 1, description: "Train games often involve gameplay and imagery related to railroads and rail vehicles. Many of the most popular Train games are set in the late 19th and early 20th centuries (although some games, like Lunar Rails, are set in the future)." }, { category: "Environmental", amount: 1802, game: "Ark Nova", rank: 2, description: "Environmental games often have themes and storylines regarding environmental conservation and management." }, { category: "Animals", amount: 10593, game: "Ark Nova", rank: 2, description: "Animals games involve animals as a major component of the theme or gameplay. Animals games often require players to attend to the management or control of animals. Players may even take on the role of an animal (or animals) in the game." } ], "Conflict & Control": [ { category: "Murder / Mystery", amount: 9152, game: "Mansions of Madness: Second Edition", rank: 72, description: "Murder/Mystery games often involve an unsolved murder or murders. A requirement of these games is usually for players to investigate these crimes, and determine the criminal details and/or perpetrator(s)." }, { category: "Wargame", amount: 25478, game: "Twilight Imperium: Fourth Edition", rank: 6, description: "argames are games that depict military actions. Wargames are set in a variety of timelines, from the Ancient period to present conflicts and even in the future. Thematically, Wargames cover everything from actions between small units on a very small board to larger, extremely detailed conflicts and even global-scale wars. Although most Wargames are based on historical situations, there are Wargames based on fantasy or science fiction, as well as Wargames based on hypothetical but historically-based situations (e.g., nuclear war between the Soviet Union and the USA). Probably the most popular period for Wargames is World War II, followed by the Napoleonic Wars and the American Civil War. However, Wargames cover a vast range of conflicts, and if you are interested in a particular war you are quite likely to be able to find a game that covers it in some way." }, { category: "Fighting", amount: 3542, game: "Gloomhaven", rank: 4, description: "Fighting games are those that encourage players to engage game characters in close quarter battles and hand-to-hand combat. Fighting games differ from Wargames in that the combat in Wargames exists as one part of a large-scale military simulation, while in Fighting games the focus is on the particular combat scenarios." }, { category: "Political", amount: 2213, game: "Dune: Imperium", rank: 5, description: "Political games encourage players to use their character's authority to manipulate societal activities and policy." }, { category: "Mafia", amount: 1269, game: "The Godfather: Corleone's Empire", rank: 445, description: "Mafia games have themes and scenarios related to classic Sicilian criminal organizations. However, some games in the Mafia category may be related to other organized criminal groups. This is not a mechanic, it's a narrative or theme." }, { category: "Spies / Secret Agents", amount: 1111, game: "Pax Pamir: Second Edition", rank: 51, description: "Spies/Secret Agents games often have themes or storylines relating to espionage. Often, players must identify another player who has taken the role of spy or secret agent and attempt to reveal secret information that this player holds. Many of the most popular Spies/Secret Agents games are also categorized under Bluffing and/or Deduction, and as such have an element of hidden information to them." } ], Other: [ { category: "Adventure", amount: 8758, game: "Gloomhaven", rank: 4, description: "Adventure games often have themes of heroism, exploration, and puzzle-solving. The storyline behind such games often have fantastical elements, and involve the characters in some sort of quest." }, { category: "Civilization", amount: 6890, game: "Twilight Imperium: Fourth Edition", rank: 6, description: "Civilization games often have players developing and managing a society of people. The aim of each player is usually to employ citizens in ways that are beneficial to society, and have them progress throughout the game so that their civilization gains superiority over others. Civilization games may have each player build their society independently, or through warfare and diplomacy, each player may find themselves benefiting or suffering from the actions of others." }, { category: "Sports", amount: 6708, description: "Sports games often have themes or storylines related to the physical activity of sports. The sports represented in the most popular Sports boardgames are football and racing (whether car, boat, bicycle or horse)." }, { category: "Racing", amount: 3312, game: "Heat: Pedal to the Metal", rank: 46, description: "Games where the objective is to be the first to reach a checkpoint by navigation or steering around obstacles, usually by having greater speed and/or control than your opponents." }, { category: "Travel", amount: 2622, game: "Orléans", rank: 37, description: "Travel games often have gameplay where an objective is to move to and from different geographic locations. As such, Travel games usually employ a map as the main feature of the game board." }, { category: "Nautical", amount: 1734, game: "Concordia", rank: 29, description: "Nautical games involve sailors, ships, and/or maritime navigation as a major component of the theme or gameplay. Most Nautical games require players to effectively control ships as an objective." }, { category: "Music", amount: 2644, game: "Hitster", rank: 516, description: "Music games are thematically linked to music, bands and/or the music industry. While many of the popular Music games test players knowledge on music (e.g., Cranium Pop 5, Encore), a number of these games are only linked to music as a theme in the game environment (e.g., Schrille Stille, Battle of the Bands)." }, /* { category: "Movies / TV / Radio theme", amount: 6582, game: "Dune: Imperium", rank: 5, description: "Movies/TV/Radio games are often those that are thematically linked with a popular movie, television show, or radio program. Other Movies/TV/Radio games may test players' knowledge about these media, or the game environment may be set in the movie, television, or radio industry." },*/ { category: "Humor", amount: 8123, game: "Secret Hitler", rank: 261, description: "Humor games often have themes and gameplay that provoke laughter and amusement. More specifically, humor games may require players to engage in clowning, comedy, jokes, and/or satire as an objective of the game." } ] })40:T2e85,top20games = [ { game: "Brass: Birmingham", rank: 1, categories: "Age of Reason,Economic,Industry / Manufacturing,Post-Napoleonic,Trains,Transportation" }, { game: "Ark Nova", rank: 2, categories: "Animals,Card Game,Environmental" }, { game: "Pandemic Legacy: Season 1", rank: 3, categories: "Environmental,Medical" }, { game: "Gloomhaven", rank: 4, categories: "Adventure,Exploration,Fantasy,Fighting,Miniatures" }, { game: "Dune: Imperium", rank: 5, categories: "Movies / TV / Radio theme,Novel-based,Political,Science Fiction" }, { game: "Twilight Imperium: Fourth Edition", rank: 6, categories: "Civilization,Economic,Exploration,Negotiation,Political,Science Fiction,Space Exploration,Territory Building,Wargame" }, { game: "Dune: Imperium – Uprising", rank: 7, categories: "Movies / TV / Radio theme,Novel-based,Science Fiction" }, { game: "War of the Ring: Second Edition", rank: 8, categories: "Fantasy,Fighting,Novel-based,Territory Building,Wargame" }, { game: "Terraforming Mars", rank: 9, categories: "Civilization,Economic,Environmental,Industry / Manufacturing,Science Fiction,Space Exploration,Territory Building" }, { game: "Star Wars: Rebellion", rank: 10, categories: "Civil War,Movies / TV / Radio theme,Science Fiction,Space Exploration,Wargame" }, { game: "Spirit Island", rank: 11, categories: "Environmental,Fantasy,Mythology,Territory Building" }, { game: "Gloomhaven: Jaws of the Lion", rank: 12, categories: "Adventure,Exploration,Fantasy,Fighting,Miniatures" }, { game: "Gaia Project", rank: 13, categories: "Civilization,Economic,Science Fiction,Space Exploration,Territory Building" }, { game: "Twilight Struggle", rank: 14, categories: "Modern Warfare,Political,Wargame" }, { game: "The Castles of Burgundy", rank: 15, categories: "Animals,Dice,Medieval,Territory Building" }, { game: "Through the Ages: A New Story of Civilization", rank: 16, categories: "Card Game,Civilization,Economic" }, { game: "Great Western Trail", rank: 17, categories: "American West,Animals" }, { game: "Frosthaven", rank: 18, categories: "Adventure,Exploration,Fantasy,Fighting,Miniatures" }, { game: "SETI: Search for Extraterrestrial Intelligence", rank: 19, categories: "Science Fiction,Space Exploration" }, { game: "Eclipse: Second Dawn for the Galaxy", rank: 20, categories: "Civilization,Exploration,Science Fiction,Space Exploration,Territory Building,Wargame" }, { game: "Slay the Spire: The Board Game", rank: 21, categories: "Adventure,Card Game,Fantasy,Fighting,Video Game Theme" }, { game: "Brass: Lancashire", rank: 22, categories: "Economic,Educational,Industry / Manufacturing,Post-Napoleonic,Transportation" }, { game: "7 Wonders Duel", rank: 23, categories: "Ancient,Card Game,City Building,Civilization,Economic" }, { game: "Scythe", rank: 24, categories: "Economic,Fighting,Science Fiction,Territory Building" }, { game: "Nemesis", rank: 25, categories: "Adventure,Horror,Miniatures,Science Fiction" }, { game: "A Feast for Odin", rank: 26, categories: "Animals,Farming,Industry / Manufacturing,Medieval,Puzzle" }, { game: "The Lord of the Rings: Duel for Middle-earth", rank: 27, categories: "Card Game,Fantasy,Novel-based" }, { game: "Clank! Legacy: Acquisitions Incorporated", rank: 28, categories: "Adventure,Fantasy" }, { game: "Concordia", rank: 29, categories: "Ancient,Economic,Nautical" }, { game: "Lost Ruins of Arnak", rank: 30, categories: "Adventure,Card Game,Exploration,Fantasy" }, { game: "Great Western Trail: Second Edition", rank: 31, categories: "American West,Animals" }, { game: "Arkham Horror: The Card Game", rank: 32, categories: "Adventure,Card Game,Collectible Components,Exploration,Horror,Novel-based" }, { game: "Sky Team", rank: 33, categories: "Aviation / Flight,Dice" }, { game: "Root", rank: 34, categories: "Animals,Fantasy,Negotiation,Territory Building,Wargame" }, { game: "Terra Mystica", rank: 35, categories: "Civilization,Economic,Fantasy,Territory Building" }, { game: "Too Many Bones", rank: 36, categories: "Adventure,Dice,Fantasy,Fighting" }, { game: "Orléans", rank: 37, categories: "Medieval,Religious,Travel" }, { game: "Wingspan", rank: 38, categories: "Animals,Card Game,Educational" }, { game: "Barrage", rank: 39, categories: "Economic,Environmental,Industry / Manufacturing" }, { game: "Mage Knight Board Game", rank: 40, categories: "Adventure,Exploration,Fantasy,Fighting" }, { game: "Hegemony: Lead Your Class to Victory", rank: 41, categories: "Economic,Educational,Negotiation,Political" }, { game: "Everdell", rank: 42, categories: "Animals,Card Game,City Building,Fantasy" }, { game: "The Crew: Mission Deep Sea", rank: 43, categories: "Adventure,Card Game,Mythology,Nautical" }, { game: "Viticulture Essential Edition", rank: 44, categories: "Economic,Farming" }, { game: "Crokinole", rank: 45, categories: "Action / Dexterity" }, { game: "Heat: Pedal to the Metal", rank: 46, categories: "Racing,Sports" }, { game: "Kanban EV", rank: 47, categories: "Economic,Industry / Manufacturing" }, { game: "Marvel Champions: The Card Game", rank: 48, categories: "Card Game,Collectible Components,Comic Book / Strip,Fighting" }, { game: "Underwater Cities", rank: 49, categories: "Card Game,City Building,Industry / Manufacturing,Nautical,Science Fiction" }, { game: "Food Chain Magnate", rank: 50, categories: "Economic,Industry / Manufacturing" }, { game: "Pax Pamir: Second Edition", rank: 51, categories: "Economic,Educational,Negotiation,Political,Post-Napoleonic,Spies / Secret Agents" }, { game: "Cthulhu: Death May Die", rank: 52, categories: "Fantasy,Fighting,Horror,Miniatures,Novel-based" }, { game: "Puerto Rico", rank: 53, categories: "City Building,Economic,Farming" }, { game: "Age of Innovation", rank: 54, categories: "Civilization,Economic,Fantasy,Territory Building" }, { game: "Clank!: Catacombs", rank: 55, categories: "Adventure,Fantasy" }, { game: "Cascadia", rank: 56, categories: "Abstract Strategy,Animals,Environmental" }, { game: "On Mars", rank: 57, categories: "City Building,Economic,Exploration,Science Fiction,Space Exploration,Territory Building" }, { game: "Pandemic Legacy: Season 0", rank: 58, categories: "Medical,Spies / Secret Agents" }, { game: "Caverna: The Cave Farmers", rank: 59, categories: "Animals,Economic,Fantasy,Farming" }, { game: "Anachrony", rank: 60, categories: "Economic,Science Fiction" }, { game: "Blood Rage", rank: 61, categories: "Fantasy,Fighting,Miniatures,Mythology" }, { game: "Ticket to Ride Legacy: Legends of the West", rank: 62, categories: "Trains" }, { game: "Harmonies", rank: 63, categories: "Abstract Strategy,Animals,Environmental" }, { game: "Agricola", rank: 64, categories: "Animals,Economic,Farming" }, { game: "Oathsworn: Into the Deepwood", rank: 65, categories: "Adventure,Card Game,Dice,Exploration,Fantasy,Fighting,Miniatures,Mythology,Puzzle" }, { game: "Grand Austria Hotel", rank: 66, categories: "Economic" }, { game: "Obsession", rank: 67, categories: "Post-Napoleonic" }, { game: "Lisboa", rank: 68, categories: "City Building,Economic,Industry / Manufacturing,Political" }, { game: "Sleeping Gods", rank: 69, categories: "Adventure,Exploration,Fantasy,Fighting,Nautical" }, { game: "Pandemic Legacy: Season 2", rank: 70, categories: "Environmental,Exploration,Medical,Science Fiction" }, { game: "Tzolk'in: The Mayan Calendar", rank: 71, categories: "Ancient,Civilization,Economic,Farming,Mythology" }, { game: "Mansions of Madness: Second Edition", rank: 72, categories: "Adventure,Exploration,Fantasy,Fighting,Horror,Miniatures,Murder / Mystery,Mythology,Novel-based,Puzzle" }, { game: "Power Grid", rank: 73, categories: "Economic,Industry / Manufacturing" }, { game: "Blood on the Clocktower", rank: 74, categories: "Bluffing,Deduction,Murder / Mystery,Party Game" }, { game: "Clans of Caledonia", rank: 75, categories: "Economic,Farming" }, { game: "The White Castle", rank: 76, categories: "Dice,Economic" }, { game: "Quacks", rank: 77, categories: "Fantasy,Medieval" }, { game: "Paladins of the West Kingdom", rank: 78, categories: "Medieval" }, { game: "Le Havre", rank: 79, categories: "City Building,Economic,Industry / Manufacturing,Nautical" }, { game: "The Gallerist", rank: 80, categories: "Economic" }, { game: "Android: Netrunner", rank: 81, categories: "Bluffing,Card Game,Collectible Components,Science Fiction" }, { game: "Star Wars: Imperial Assault", rank: 82, categories: "Adventure,Exploration,Fighting,Miniatures,Movies / TV / Radio theme,Science Fiction,Wargame" }, { game: "Great Western Trail: New Zealand", rank: 83, categories: "Animals" }, { game: "Agricola (Revised Edition)", rank: 84, categories: "Animals,Economic,Farming" }, { game: "Maracaibo", rank: 85, categories: "Economic,Exploration,Nautical,Pirates" }, { game: "Mechs vs. Minions", rank: 86, categories: "Fantasy,Fighting,Miniatures,Video Game Theme" }, { game: "Darwin's Journey", rank: 87, categories: "Exploration,Travel" }, { game: "Kingdom Death: Monster", rank: 88, categories: "Adventure,Dice,Fantasy,Fighting,Horror,Mature / Adult,Miniatures,Mythology" }, { game: "The Crew: The Quest for Planet Nine", rank: 89, categories: "Card Game,Science Fiction,Space Exploration" }, { game: "Revive", rank: 90, categories: "Civilization,Industry / Manufacturing,Science Fiction" }, { game: "Race for the Galaxy", rank: 91, categories: "Card Game,Civilization,Economic,Science Fiction,Space Exploration" }, { game: "Voidfall", rank: 92, categories: "Civilization,Economic,Science Fiction,Space Exploration" }, { game: "Wingspan Asia", rank: 93, categories: "Animals,Economic,Educational" }, { game: "Azul", rank: 94, categories: "Abstract Strategy,Renaissance" }, { game: "Five Tribes: The Djinns of Naqala", rank: 95, categories: "Arabian,Fantasy,Mythology" }, { game: "Clank!: A Deck-Building Adventure", rank: 96, categories: "Adventure,Fantasy" }, { game: "Final Girl", rank: 97, categories: "Card Game,Fantasy,Horror" }, { game: "Fields of Arle", rank: 98, categories: "Economic,Farming,Industry / Manufacturing" }, { game: "Eclipse: New Dawn for the Galaxy", rank: 99, categories: "Civilization,Fighting,Science Fiction,Space Exploration,Territory Building,Wargame" }, { game: "El Grande", rank: 100, categories: "Medieval" } ]41:T536,normalisedZipedData = { function normalizeTopGames(topGames) { const counts = {}; // Count category occurrences for (const game of topGames) { const categories = game.categories.split(",").map((c) => c.trim()); for (const category of categories) { counts[category] = (counts[category] || 0) + 1; } } // Total number of category tags const total = Object.values(counts).reduce((sum, n) => sum + n, 0); // Normalize return Object.entries(counts).map(([category, count]) => ({ category, value: count / total })); } function normalizeAllGames(data) { const total = data.reduce((sum, d) => sum + d.amount, 0); return data.map((d) => ({ category: d.category, pct: d.amount / total })); } function zipNormalized(allGamesNorm, topGamesNorm) { const topMap = Object.fromEntries( topGamesNorm.map((d) => [d.category, d.value]) ); return allGamesNorm.map((d) => ({ category: d.category, allGames: d.pct, topGames: topMap[d.category] ?? 0, diff: (topMap[d.category] ?? 0) - d.pct, diff: (topMap[d.category] ?? 0) - d.pct, diff2: d.pct / (topMap[d.category] ?? 0) })); } return zipNormalized( normalizeAllGames(cleanData2), normalizeTopGames(top20games) ); }42:[{"id":"2ce5974be43e89bca78ee94c7cfd8e76c54c83574fd646dc88b0c5eee8cc2e7a6a4c44dd42088157887845be6cdbfaab2537babee5395c0656c0139dbb9bbcbf","href":"https://static.observableusercontent.com/files/2ce5974be43e89bca78ee94c7cfd8e76c54c83574fd646dc88b0c5eee8cc2e7a6a4c44dd42088157887845be6cdbfaab2537babee5395c0656c0139dbb9bbcbf","name":"best-board-games-for-kids-2902249234.jpg","type":"image/jpeg","lastModified":1767457138027.936,"size":160743},{"id":"14ceb10e57b8641c4ee755c6ebc588f04e91cb610bf7d04863accb4d2b766b63d58ac05a86a201b5d26c718a9709356f0cc8e2ce221fe7e5af35cc353b098583","href":"https://static.observableusercontent.com/files/14ceb10e57b8641c4ee755c6ebc588f04e91cb610bf7d04863accb4d2b766b63d58ac05a86a201b5d26c718a9709356f0cc8e2ce221fe7e5af35cc353b098583","name":"pandemic-board-game-2472360100.jpg","type":"image/jpeg","lastModified":1767457138604.822,"size":76023},{"id":"a725f433e346486db8db7422fd35bae045b4a05180a133a3e7caeb60d136698a9d07e33aac01d290acbe006278b959143c28920c2fee6f257c7d5c609c4e43f3","href":"https://static.observableusercontent.com/files/a725f433e346486db8db7422fd35bae045b4a05180a133a3e7caeb60d136698a9d07e33aac01d290acbe006278b959143c28920c2fee6f257c7d5c609c4e43f3","name":"boardgame1.jpg","type":"image/jpeg","lastModified":1767482396129.879,"size":217157}] 2d:{"id":"33703039e1484511","slug":null,"title":"Radial hierarchical bar chart with grouping arcs","thumbnail":"9e4de035db209c60704990af4b8bc6edc035cc0a5ad562707cb672654d4928d3","access_level":"public","create_time":"$D2026-01-03T16:18:58.027Z","update_time":"$D2026-01-22T21:01:56.087Z","view_time":null,"first_public_time":"$D2026-01-22T21:07:44.015Z","fork":true,"stars":25,"starred":false,"owner":{"type":"team","id":"02bf290f098d5a95","login":"gitnoise","name":"Patrick Wojda","avatar_url":"https://avatars-next.observableusercontent.com/37de83ff866855b411b5ed7c2da3c3587abe6a5035f6f746f9988ddddeadc493","tier":"starter_2024"},"version":2758,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"66c365e4a7f918e6","login":"gitnoise","name":"Patrick Wojda","avatar_url":"https://avatars-next.observableusercontent.com/37de83ff866855b411b5ed7c2da3c3587abe6a5035f6f746f9988ddddeadc493","tier":null}],"members":[{"type":"individual","id":"66c365e4a7f918e6","login":"gitnoise","name":"Patrick Wojda","avatar_url":"https://avatars-next.observableusercontent.com/37de83ff866855b411b5ed7c2da3c3587abe6a5035f6f746f9988ddddeadc493","tier":null,"role":"editor"},{"type":"team","id":"02bf290f098d5a95","login":"gitnoise","name":"Patrick Wojda","avatar_url":"https://avatars-next.observableusercontent.com/37de83ff866855b411b5ed7c2da3c3587abe6a5035f6f746f9988ddddeadc493","tier":"starter_2024","role":"viewer"}],"comments":[{"id":"fe8359dd51ddbcbc","reply_to_id":null,"content":"I like this better than the previous, I can see the background image better. Maybe rotate the chart, make the bars horizontal?","create_time":"$D2026-01-18T08:07:39.265Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"71547321364094fe","login":"gkaramanis","name":"Georgios Karamanis","avatar_url":"https://avatars-next.observableusercontent.com/d04b260bc7d1a02428ff22eed9622a803726f66628a9e7e7d2c233a1d6db1961","tier":null}},{"id":"d31c151b4b1a8df8","reply_to_id":null,"content":"Good one, the image is distracting here I think. Confused by the order, I don't see the themes here?","create_time":"$D2026-01-18T08:08:34.563Z","update_time":"$D2026-01-18T08:12:06.623Z","resolved":true,"user":{"type":"individual","id":"71547321364094fe","login":"gkaramanis","name":"Georgios Karamanis","avatar_url":"https://avatars-next.observableusercontent.com/d04b260bc7d1a02428ff22eed9622a803726f66628a9e7e7d2c233a1d6db1961","tier":null}},{"id":"4dc4fa919746cb4d","reply_to_id":null,"content":"I like the text labels here, but I see how it gets too crowded in some places","create_time":"$D2026-01-18T08:14:11.743Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"71547321364094fe","login":"gkaramanis","name":"Georgios Karamanis","avatar_url":"https://avatars-next.observableusercontent.com/d04b260bc7d1a02428ff22eed9622a803726f66628a9e7e7d2c233a1d6db1961","tier":null}},{"id":"f92928d98d090b95","reply_to_id":null,"content":"Good one. Better with a dark image, at this point I wonder if it is better to remove it and use different colors for the 4 themes? :)","create_time":"$D2026-01-18T08:16:27.839Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"71547321364094fe","login":"gkaramanis","name":"Georgios Karamanis","avatar_url":"https://avatars-next.observableusercontent.com/d04b260bc7d1a02428ff22eed9622a803726f66628a9e7e7d2c233a1d6db1961","tier":null}},{"id":"a88848eafe066d31","reply_to_id":null,"content":"Interesting! Hard to follow the lines of each game. Mostly for Gloomhaven that goes all the way to the other side. Maybe use the 3/4 of the circle with the \"opening\" at the bottom? Different colors for the games?","create_time":"$D2026-01-18T08:21:03.057Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"71547321364094fe","login":"gkaramanis","name":"Georgios Karamanis","avatar_url":"https://avatars-next.observableusercontent.com/d04b260bc7d1a02428ff22eed9622a803726f66628a9e7e7d2c233a1d6db1961","tier":null}},{"id":"00a434d753b59390","reply_to_id":null,"content":"Wow! I like it visually, like a lot. Too bad that the lines are overlapping in the middle and maybe too many colors? I could see this working as an interactive with highlighting. Keep it but fewer games?","create_time":"$D2026-01-18T08:25:30.682Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"71547321364094fe","login":"gkaramanis","name":"Georgios Karamanis","avatar_url":"https://avatars-next.observableusercontent.com/d04b260bc7d1a02428ff22eed9622a803726f66628a9e7e7d2c233a1d6db1961","tier":null}},{"id":"7f757ee971c589d3","reply_to_id":null,"content":"This doesn't do it for me","create_time":"$D2026-01-18T08:26:41.687Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"71547321364094fe","login":"gkaramanis","name":"Georgios Karamanis","avatar_url":"https://avatars-next.observableusercontent.com/d04b260bc7d1a02428ff22eed9622a803726f66628a9e7e7d2c233a1d6db1961","tier":null}},{"id":"63128627eb8f0322","reply_to_id":null,"content":"Not sure about this but I like the style!","create_time":"$D2026-01-18T08:27:23.450Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"71547321364094fe","login":"gkaramanis","name":"Georgios Karamanis","avatar_url":"https://avatars-next.observableusercontent.com/d04b260bc7d1a02428ff22eed9622a803726f66628a9e7e7d2c233a1d6db1961","tier":null}},{"id":"8d4c021903fa3869","reply_to_id":null,"content":"Nice visual style! I can see this working if the dots were all contained in the bars :)","create_time":"$D2026-01-18T08:29:05.610Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"71547321364094fe","login":"gkaramanis","name":"Georgios Karamanis","avatar_url":"https://avatars-next.observableusercontent.com/d04b260bc7d1a02428ff22eed9622a803726f66628a9e7e7d2c233a1d6db1961","tier":null}},{"id":"fb6f96c82b31393f","reply_to_id":null,"content":"Like it! Not too much to say about it, it just takes a moment to look at the legend and understand the meaning of the bar colors. Maybe you could mention it more explicitly in the subtitle? Details, it's good as it is","create_time":"$D2026-01-18T08:34:20.820Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"71547321364094fe","login":"gkaramanis","name":"Georgios Karamanis","avatar_url":"https://avatars-next.observableusercontent.com/d04b260bc7d1a02428ff22eed9622a803726f66628a9e7e7d2c233a1d6db1961","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":12,"collection":null,"type":"notebook","body":{"title":"Radial hierarchical bar chart with grouping arcs","cells":[{"id":0,"value":"# Radial hierarchical bar chart with grouping arcs\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6,"value":"Plot.plot({\n marginLeft: 80,\n marginBottom: 140,\n height: 600,\n width: 900,\n x: {\n label: \"Category\",\n tickRotate: -45,\n domain: data\n .slice()\n .sort((a, b) => b.amount - a.amount)\n .map((d) => d.category)\n },\n y: {\n label: \"Number of games\"\n },\n marks: [\n Plot.barY(data, {\n x: \"category\",\n y: \"amount\"\n }),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1381,"value":"{\n const cleanArr = cleanData2.map((d) => d.category);\n\n // 1. Parse & count categories\n const categoryCounts = Array.from(\n d3.rollup(\n top20games.flatMap((d) => d.categories.split(\",\").map((c) => c.trim())),\n (v) => v.length,\n (d) => d\n ),\n ([category, count]) => ({ category, count })\n )\n .sort((a, b) => b.count - a.count)\n .filter((d) => cleanArr.includes(d.category));\n\n // 2. Render bar chart\n return Plot.plot({\n marginLeft: 180,\n height: 800,\n x: {\n label: \"Number of games\",\n grid: true\n },\n y: {\n label: null,\n domain: categoryCounts.map((d) => d.category)\n },\n marks: [\n Plot.barX(categoryCounts, {\n x: \"count\",\n y: \"category\"\n }),\n Plot.text(categoryCounts, {\n x: \"count\",\n y: \"category\",\n text: (d) => d.count,\n dx: 4,\n textAnchor: \"start\"\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1885,"value":"Plot.plot({\n marginLeft: 180,\n height: 800,\n\n marks: [\n Plot.barX(normalisedZipedData, {\n x: \"diff\",\n y: \"category\",\n sort: {\n y: \"x\"\n }\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":198,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":357,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":404,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":558,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":634,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":944,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1069,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1137,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1230,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1273,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1327,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1402,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":194,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":401,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":617,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1105,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1783,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1975,"value":"cleanData2 = {\n const whiteList = [\n \"Fantasy\",\n \"Wargame\",\n \"Science Fiction\",\n \"Economic\",\n \"Animals\",\n \"Murder / Mystery\",\n \"Adventure\",\n \"Humor\",\n \"Civilization\",\n \"Horror\",\n \"Sports\",\n \"Exploration\",\n \"Mythology\",\n \"Medieval\",\n \"Ancient\",\n \"Farming\",\n \"Music\",\n \"Travel\",\n \"Political\",\n \"Transportation\",\n \"Renaissance\",\n \"Environmental\",\n \"Nautical\",\n \"Spies / Secret Agents\",\n \"Religious\",\n \"Prehistoric\",\n \"Age of Reason\",\n \"Medical\",\n \"Arabian\",\n \"Mafia\"\n ];\n\n return data.filter((d) => whiteList.includes(d.category));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W42","stdlib":"1","titling":"auto"}} 2e:"$2d:body"