Fork of Project Momentum v3

100%

Fork of Project Momentum v3

✓ Published1🌍 Public

Last edited Nov 13, 2024

Created on Nov 4, 2024

This visualization displays the distribution of LEGO sets by theme, using a nested donut chart where three concentric arcs per slice show the total count, the number of sets priced under $100, and those under $50. Hovering dims non-selected arcs via opacity adjustments. The chart is built with D3’s `pie` and `arc` generators, with data imported from the `@Landaman/lego-csv` package and grouped by theme. Color mapping uses `scaleOrdinal` with `schemeCategory10`, while labels and leader lines are positioned using `arc().centroid`.

AI-generated description

Proposal

MIT Licensed

Similar vizzes

Loading thumbnail…

Project Momentum v4

This donut chart visualizes the distribution of LEGO sets by theme and price, showing the proportion of sets in eight top themes plus a "Miscellaneous" category. It uses D3 pie arcs and labels for each theme, with each arc segment’s color representing its theme and opacity indicating price range (under $50, $50–100, over $100, or unknown). A legend allows interactive highlighting: hovering a price category dims other segments. The visualization is built using D3's `pie` for arc generation, `arc` for path geometry, `scaleOrdinal` with `schemeCategory10` for colors, and a `ResizeObserver` for responsive sizing.

IIan Wright

92% match

Loading thumbnail…

Project Momentum v2

This visualization presents a pie chart of LEGO sets grouped by theme, using nested arcs to compare price tiers within each category. The chart employs D3.js APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to render three concentric rings per slice, showing counts of sets under $50, under $100, and all sets. Labels and connector lines are positioned using arc centroid calculations. The data comes from the `lego-csv` package.

IIan Wright

92% match

Loading thumbnail…

Project Momentum

This visualization presents LEGO set data grouped by theme as a multi-layered pie chart, where each wedge shows the total count of sets, with semi-transparent inner arcs indicating the proportion of sets priced under $100 and under $50. The chart uses D3.js APIs including `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10` to generate and color the arcs, while `Object.groupBy` and custom reduction logic aggregate the imported `@Landaman/lego-csv` data. The top eight themes are labeled, with remaining sets consolidated into a "Miscellaneous" category, and SVG path elements are styled with stroke and opacity to create depth.

IIan Wright

91% match

Loading thumbnail…

Project Momentum v5

This visualization displays the distribution of LEGO sets by theme, broken down into price categories (Under $50, $50-$100, Over $100, and Unknown). Each theme’s ring segment is proportional to its set count, with inner arcs showing price-category proportions within each theme. Hovering a legend category dims unmatched arcs, while hovering a label opens a detailed description. The code uses D3.js APIs including `d3.pie`, `d3.arc`, and `scaleOrdinal` with `schemeCategory10`, alongside a ResizeObserver for responsive resizing.

IIan Wright

90% match

Loading thumbnail…

Fork of Simple Scatter Plot

This example shows the relationship between the release year and price of LEGO sets, using a colored background rectangle to highlight the plot area. The code builds on a scatter plot template and uses D3’s `scaleLinear` and `extent` to map data values to pixel coordinates, while the `@curran/axis-labels` library positions the axis labels. The data comes from the `@Landaman/lego-csv` dataset, with each circle representing a set, and the chart’s dimensions and margins are configurable through the main module.

IIan Wright

75% match

Loading thumbnail…

Fork of Labels

A donut chart with three slices displays hardcoded apple counts, with each slice filled by a distinct image pattern loaded from external URLs via SVG `<pattern>` elements. Labels showing the numeric values are positioned outside the pie's outer radius, and thin black pointer lines with circular markers connect each label to its corresponding slice. The visualization is built with D3 v6, using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with an interpolated color ramp, while the pointer paths are drawn by manually computing angular positions and SVG path commands.

PPiotr Paszek

72% match

Loading thumbnail…

Fork of Donut Chart v2 - Le bon qui fonctionne

This example shows the distribution of language popularity as a donut chart, aggregating the six largest categories into labeled slices and grouping all remaining categories into a single "others" slice. It uses d3.pie and d3.arc to generate the SVG paths, with an ordinal color scale from d3-scale-chromatic (schemeDark2) for slice fills. Labels and connecting polylines are positioned using outerArc.centroid and conditional text-anchor logic based on mid-angle, with data loaded from data.json via d3.json.

SSuzie1022susu

72% match

Loading thumbnail…

Fork of Donut Chart v2

This donut chart displays proportional data from a JSON file (data.json) with country names and numeric sums, rendered as an SVG using D3.js v4. The visualization uses a pie layout with a half-radius inner hole and divergent color scheme from d3-scale-chromatic. Labels are positioned outside the arcs using polyline connectors and text elements, with the arc generator determining slice geometry and outerArc handling label placement. The example demonstrates D3’s modular approach to building interactive, data-driven graphics.

MMaeva B

72% match