Project Momentum v4

100%

Project Momentum v4

✓ Published1🌍 Public

Last edited Nov 13, 2024

Created on Nov 12, 2024

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.

AI-generated description

Proposal

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Fork of Project Momentum v3

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`.

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

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

91% 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

70% match

Loading thumbnail…

Pie chart in React & D3 - with Legend

A React and D3 donut chart visualizes budget allocations across five categories, with a legend mapping category names to a color scale interpolated between coral and crimson. The `pie` and `arc` generators compute slice geometry, while `scaleOrdinal` assigns colors from the interpolated range. Percentages appear on slices via `arc.centroid`, and the `ColorLegend` component renders interactive-free color swatches with tick spacing. The chart uses SVG rendering with `d3.interpolateRgb` for gradient transitions and `format` for numeric labels, based on static data in the `donThemes` array.

BbeauMarko

69% match

Loading thumbnail…

donut chart

This donut chart displays three proportional values as colored arc segments, with percentage labels positioned outside the chart. The visualization uses D3 v4’s `d3.pie()` and `d3.arc()` functions to compute segment angles and paths, rendering the SVG chart dynamically. An interactive element positions HTML labels via absolute styling, calculating their coordinates from the arc centroids and canvas dimensions. The static data is embedded in the code, with colors and suffixes defined per segment. Bare bones and functional, it demonstrates a simple, clean alternative to a standard pie chart.

PPatrick Wojda

69% match

Loading thumbnail…

Activity 7.1.2

This area chart visualizes LEGO sales over the past decade, showing a smooth, curved trend of annual revenue growth. The visualization uses D3 v5 APIs, including `area` and `line` generators with `curveBasis` for smooth interpolation, along with `scaleTime` and `scaleLinear` for axes. Gridlines and axis labels are rendered via `axisBottom` and `axisLeft`. Data is loaded from a CSV hosted on GitHub, parsed with `timeParse`, and displayed as an SVG with a steelblue filled area and darkblue line.

Yyadlapallisaisathvik@gmail.com

69% match