Skip to main content
Log in
I

Ian Wright

@Landaman·13 public 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.

Nov 16, 2024
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.

Nov 13, 2024
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`.

Nov 13, 2024
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.

Oct 27, 2024
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.

Oct 19, 2024
Loading thumbnail…

NYC Map

This example visualizes the five boroughs of New York City using a conic equal-area projection. The map displays geographic boundaries as vector paths, with a graticule overlay and an outline for context. It fetches TopoJSON data from a GitHub repository and converts it to GeoJSON using `topojson-client`. The rendering relies on `d3.geoPath` and `d3.geoConicEqualArea` from the D3 library, with SVG elements joined via `selectAll().join()`. The projection parameters are tuned specifically for the city’s latitude and longitude range.

Oct 19, 2024
Loading thumbnail…

Fork of Pseudo Line Chart with D3

This example demonstrates how to build a pie chart using D3.js, transforming categorical data into visual proportions. The code uses `d3.pie()` and `d3.arc()` generators to compute the chart geometry, with each slice filled by a color from the dataset. Labels are positioned using the `arcGenerator.centroid()` method, and the SVG container dynamically sizes to match the available `container.clientWidth` and `container.clientHeight`. The visualization supports a multi-series dataset with counts and colors, showcasing basic SVG path styling and text placement within a D3 selection.

Sep 24, 2024
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.

Sep 17, 2024
Loading thumbnail…

Lego Dataset

This example displays the raw JSON of a single Lego set record, converted from the CSV data. It shows the dataset's structure, including fields like item number, theme, piece count, and regional prices. The code uses a `container.innerHTML` assignment to render a `<pre>` element, presenting the first data row formatted with `JSON.stringify`. The source is the Lego Sets Dataset, and the visualization is a simple, static data inspection rather than a chart.

Sep 8, 2024
Loading thumbnail…

NYC Air Quality Dataset

This example parses the NYC Air Quality dataset and displays the first record as a JSON object. The code loads the CSV data, converts numerical fields to numbers, and renders the data in a preformatted text block using template literals. The visualization focuses on showing the raw structure of the dataset, including fields such as air quality measurements, geographic locations, and time periods, without additional charting libraries.

Sep 8, 2024
Loading thumbnail…

USA Leading Causes of Death Dataset

This example displays the first row of the NCHS Leading Causes of Death dataset as a JSON object in a large monospace font. The code imports the CSV data, converts numeric fields to numbers, and then renders the parsed record using a template literal in an HTML `<pre>` tag. It uses the `data` export and a `main` function to populate the container, though no charting library is employed. The visualization provides a raw, static view of the dataset structure rather than an interactive graphic.

Sep 8, 2024
Loading thumbnail…

Fork of Solar System

The visualization displays a solar system with planets' relative sizes to scale, arranging them along a horizontal line with labels. Each celestial body renders as an SVG circle with a radial gradient, transitioning from a small point to its final size on load. The code uses d3’s `select`, `transition`, and `easeLinear` from the D3 library to animate circles and text smoothly. Data includes the Sun and planets, with distances derived from Wikipedia’s list of gravitationally rounded objects. The grayscale background and white text labels highlight the size comparison without distance accuracy.

Sep 8, 2024
Loading thumbnail…

Fork of Circles with D3

This example demonstrates a dynamic collection of circles rendered on an SVG canvas, with randomly generated positions, radii, and colors. It highlights the D3 General Update Pattern through method chaining, using the `select` API, `selectAll`, `data`, and `join` to create and bind data to circle elements. The code sets attributes like `cx`, `cy`, `r`, and `fill` based on an array of objects, and applies a uniform opacity. The visualization refreshes with a different number of circles each time it runs, showcasing D3’s data-driven approach to SVG manipulation.

Aug 27, 2024