ICE7

100%

✓ Published0🌍 Public

Last edited Mar 29, 2026

Created on Mar 29, 2026

This interactive scatter plot uses D3.js (v7) to visualize monthly U.S. unemployment rates against the size of the labor force from 2015 to 2020, with each year assigned a distinct color in the legend. The chart encodes the relationship between the two variables, revealing the dramatic spike in unemployment in spring 2020 alongside the corresponding drop in the labor force. Data points are rendered as circles, positioned using linear scales for both axes, with axis labels and a title. The implementation relies on D3's `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` methods, and reads data from a CSV file.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

sdv_ice_7

This scatter plot shows the relationship between U.S. unemployment rate and labor force size from 2015 to 2020, with each point colored by year and a legend distinguishing the six years. The visualization highlights the dramatic spike in unemployment in early 2020 alongside the corresponding drop in labor force. Built with D3 v7, the code uses `scaleLinear` from the Skypack CDN for axes, `axisBottom` and `axisLeft` for ticks, and the `.join()` operator to render circles. Data is loaded via `d3.csv` from a local CSV file.

Kkpavithrasai@gmail.com

91% match

Loading thumbnail…

ICE - 7

This interactive scatter plot animates through different attributes of a college dataset, cycling the x-axis among Unemployment_rate, Employed_full_time_year_round, Unemployed, and Employed every 1.9 seconds while the y-axis remains fixed on Employed. Each point represents a major category, colored distinctly by its category, with a reusable scatterPlot module built on D3's scaleLinear, axisLeft, and axisBottom. The SVG visualization, rendered on a wheat background, uses the Share Tech font and updates labels dynamically to reflect the current x-axis metric.

HHarishma Nallala

83% match

Loading thumbnail…

ICE 7 Area Chart

This example visualizes US unemployment rates from 1920 to 1980 using an area chart rendered in SVG. The chart combines a blue filled area with a black line, using curveBasis smoothing, while both axes display gridlines and labels. Data is loaded from a CSV file and parsed with d3.csv, then scales are created with d3.scaleLinear, axes with d3.axisLeft and d3.axisBottom, and the area and line paths are generated using d3.area and d3.line within a React framework.

JJerlineJJ

82% match

Loading thumbnail…

Fork of Fork of Fork of ice-7 q4

An orange semi-transparent area chart displays the monthly U.S. unemployment rate from 1948 to 2021. The visualization loads CSV data via `d3.csv`, parses dates with `d3.timeParse`, and renders an SVG path using the `d3.area` generator. Time and linear scales (`d3.scaleTime`, `d3.scaleLinear`) position the axes, which are drawn with `d3.axisBottom` and `d3.axisLeft`. The chart includes labeled axes and a title, with all styling applied via CSS classes.

Nnagalakshmibadineedi2@gmail.com

79% match

Loading thumbnail…

Fork of Fork of ice-7 q3

A single line chart shows the monthly U.S. unemployment rate from 1948 to 2021, with the x-axis as a time scale for dates and the y-axis as a linear scale for the percentage rate. The SVG chart, built with d3.v7, uses `d3.csv` to load unemployment data, `d3.timeParse` to convert date strings, and `d3.line` to generate the steel-blue path. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, and the chart includes a title and axis labels.

Nnagalakshmibadineedi2@gmail.com

78% match

Loading thumbnail…

ICE - 7

This animated scatter plot visualizes relationships between different attributes of college majors, including unemployment rates and salary data for men and women. Built with D3.js, the visualization cycles through four data dimensions every 1.9 seconds, updating the x-axis scale and labels dynamically while the y-axis remains fixed on women’s representation. Circles are color-coded by major category, with data sourced from a CSV file. The reusable chart structure follows the "Towards Reusable Charts" pattern, using D3 scales, axes, and SVG circle elements to render the changing data.

Cchakritha06

78% match

Loading thumbnail…

Scatterplot: Labor Force Participation

This interactive scatterplot visualizes U.S. labor force participation and unemployment rates over time, allowing users to step through decades from the 1970s to the present. The chart combines dual line charts with a scatterplot, using a “next” button to animate transitions between eras. It is built with D3 v3, rendering SVG elements and using d3.svg.axis, d3.svg.line, and d3.transition for animations. Data is loaded from a CSV file and points are colored by decade via CSS classes.

AAndresAnayaIsaza

77% match

Loading thumbnail…

Heatmap

This heatmap visualizes U.S. unemployment rates across states and years, using a color scale from light gray to red to indicate low to high rates. It renders an SVG via D3.js (v7), with scales and axes built using `d3.scaleBand` and `d3.axisBottom`/`d3.axisLeft`, and colors assigned through `d3.scaleLinear`. Data loads from a CSV file using `d3.csv`. It includes axis labels, a legend, and a title, but no tooltips or interactivity beyond static rendering.

Oomniaabouhassan@gmail.com

76% match