sdv_ice_7

100%

✓ Published0🌍 Public

Last edited Mar 29, 2026

Created on Mar 29, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE7

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.

Kkpavithrasai@gmail.com

91% match

Loading thumbnail…

Scatterplot of Labor Participation and Unemployment

This scatterplot displays labor force participation and unemployment rates across multiple years, with each circle representing a country’s value for a given year. The x-axis encodes the year using a linear scale, while the y-axis maps the recorded percentage value. The visualization is built with D3 v6, using `csv` to load UN data, `scaleLinear` for axes, and SVG circles for marks, with axes rendered via `axisLeft` and `axisBottom`.

LLilly-beth Linnell

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

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

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

77% match

Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3.js scatter plot visualizes youth unemployment data, animating between two axes every two seconds to compare the unemployment rate against the median age of unemployed youth. The chart is implemented as a configurable `scatterPlot` module using d3’s `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` APIs, rendering SVG circles with a steelblue fill. Data is loaded asynchronously from a CSV via `d3.csv` and parsed with a custom row function. The animation cycles the x-axis value between two dataset columns, updating the plot through a `setInterval` timer.

Ssaisathyapriya097@gmail.com

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

76% match

Loading thumbnail…

Less Height is Sometimes Better

This visualization displays the U.S. unemployment rate from 1948 to 2021 as an area chart, using an orange semi-transparent fill over a time-series line. The chart intentionally allocates less vertical height to the plot area, which improves the perception of the data by preventing the spikes from appearing stretched and distorted. Built with D3 v7, the code uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks and labels, and `d3.area()` to generate the SVG path for the area. The data is fetched from a CSV and parsed with `d3.timeParse`.

CCurran Kelleher

75% match