Skip to main content
SimilarExport ZIP
100%

Fork of Simple Scatter Plot

✓ Published0🌍 Public
IIan Wright
Last edited Sep 17, 2024
Created on Sep 17, 2024

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.

AI-generated description

A simple scatter plot with D3 showing the Penguins Dataset.

Challenge

  • Fork this viz
  • Modify it to show your data
MIT Licensed

Similar vizzes

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
75% 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
74% match
Loading thumbnail…

Fork of Simple Scatter Plot

This fork of a simple scatter plot visualizes a time-series dataset, plotting data values against years. The x-axis represents the year extracted from a `Time_Period` attribute, while the y-axis shows the corresponding `Data_Value`. The visualization uses D3's `scaleLinear`, `axisLeft`, and `extent` functions to map data to screen coordinates and renders circles with a fixed radius and opacity. It also employs custom `xAxis`, `yAxis`, `xAxisLabel`, and `yAxisLabel` functions from the `@curran/axis-labels` library to display axes and labels. The data source is imported from a VizHub dataset.

Vvigneshs1006@gmail.com
72% 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
71% 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
71% match
Loading thumbnail…

Lego Sets by Year from Rebrickable

A bar chart visualizes the cumulative number of LEGO sets released each year from 1949 to 2019, using data from Rebrickable. The chart shows a steady upward trend over time. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render the SVG output. The `csv` function loads the data, which is parsed and plotted with rectangles, while custom tick intervals are defined using `d3.timeYear`.

Eelaine-xiao
71% match
Loading thumbnail…

Lego Sets by Year from Rebrickable

A bar chart visualizes the cumulative number of LEGO sets released each year from 1949 to 2019, using data from Rebrickable. The chart shows a steady upward trend over time. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render the SVG output. The `csv` function loads the data, which is parsed and plotted with rectangles, while custom tick intervals are defined using `d3.timeYear`.

Eelaine-xiao
71% 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
70% match