Skip to main content
SimilarExport ZIP
100%

Project Momentum

✓ Published1🌍 Public
IIan Wright
Last edited Oct 19, 2024
Created on Oct 19, 2024

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.

AI-generated description

An approximation of a line chart using D3.js!

Watch the video and study the code to learn about:

  • SVG Path Elements
  • fill, stroke, stroke-width
  • stroke-linecap, stroke-linejoin
  • Vanilla HTML SVG Paths
  • D3.line
  • AI Assist

See also:

Full Playlist: Constructing Visualizations

MIT Licensed

Similar vizzes

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
95% match
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 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
92% 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
91% 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
71% 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
71% match
Loading thumbnail…

Lego Sets by Year from Rebrickable

This visualization displays the cumulative number of Lego sets released each year, using data from Rebrickable. It shows a running total over time with a bar chart rendered as SVG. The code imports specific D3 v5 modules, including `scaleLinear`, `scaleTime`, `csv`, `axisLeft`, and `axisBottom`, to construct the axes and plot. The x-axis is formatted with time intervals, while the y-axis is scaled linearly. The visualization reads the dataset from a CSV file, calculates the maximum value for domain scaling, and appends rectangles to represent the data.

Ccyanea1
69% match
Loading thumbnail…

Untitled

This visualization shows a labeled pie chart breaking down a dataset by category, with each slice filled with a distinct ordinal color and accompanied by its category name. Built with D3 v4, the chart loads CSV data from a GitHub gist and uses the `d3.pie` layout, `d3.arc` for both the slice paths and label positioning, and `d3.scaleOrdinal` for the color palette. The SVG output centers the pie and adds a bold title, with pink stroke outlines on each slice.

AArv1228
69% match