Skip to main content
SimilarExport ZIP
100%

Fork of bubble chart

✓ Published0🌍 Public
Oomniaabouhassan@gmail.com
Last edited Nov 18, 2024
Created on Nov 7, 2024

This interactive bubble chart compares unemployment rates over time across ten selected U.S. states. Each circle’s position encodes the year and unemployment percentage, while its size and color map to the rate and state, respectively, using d3.scaleLinear, d3.scaleOrdinal, and d3.schemeCategory10. The visualization includes a legend and interactive tooltips, rendering SVG elements with axis functions d3.axisBottom and d3.axisLeft. Data comes from the @oabouhas/unemployment package.

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…

Fork of Bar Chart: the unemployment rates for 25 random states over 10 years

This interactive grouped bar chart displays unemployment rates for 25 randomly selected states across 10 randomly chosen years, with each bar color-coded by year and a legend identifying the mapping. Users can select a specific year to view the corresponding rates, and hovering over any bar reveals a tooltip with the exact unemployment percentage for that state and year. The visualization uses D3.js v7 APIs including `scaleBand`, `scaleLinear`, `scaleOrdinal`, `schemeCategory10`, `axisBottom`, `axisLeft`, and `d3.group`, with state management triggering chart updates. Data comes from the @oabouhas/unemployment package.

Oomniaabouhassan@gmail.com
84% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines Unemployment Rates Comparison

This visualization compares unemployment rates across ten US states over time using a multi-line chart. Each colored line represents a state, with a legend on the right identifying the color mapping. Hovering over a line highlights it by increasing stroke width and displays the state name near the final data point. The chart uses D3's `scaleTime`, `scaleLinear`, `scaleOrdinal`, and `line` APIs, with responsive axes from `@curran/responsive-axes`. Unemployment rate data originates from the `@oabouhas/unemployment` package.

Oomniaabouhassan@gmail.com
84% match
Loading thumbnail…

Fork of Bar Chart: the unemployment rates for 25 random states over 10 years with a dropDown

This fork of a D3.js bar chart displays unemployment rates for 25 randomly selected states across 10 randomly chosen years. A dropdown menu lets the user select a specific year, dynamically updating the chart to show each state's unemployment percentage for that period. Hovering over a bar reveals a tooltip with the exact rate. The visualization uses `d3.scaleBand`, `d3.scaleLinear`, `d3.scaleOrdinal`, `axisBottom`, and `axisLeft` to render the chart, with data from the @oabouhas/unemployment package.

Oomniaabouhassan@gmail.com
84% match
Loading thumbnail…

Fork of CO2 emissions bubble chart

This interactive map visualization displays unemployment rates across U.S. states, using a blue sequential color scale where darker shades represent higher percentages. Built with D3.js, the code loads state boundaries from GeoJSON via topojson-client, applies the geoAlbersUsa projection, and renders paths using d3.geoPath with fill colors assigned through d3.scaleQuantize. A legend automatically generates color-to-value mappings using the invertExtent method, while the chart title and margin-based layout structure the composition. The visualization demonstrates choropleth mapping with data-driven styling and interactive SVG rendering.

Oomniaabouhassan@gmail.com
83% match
Loading thumbnail…

US Unemployment Bubble Map

This interactive bubble map visualizes U.S. unemployment rates by state for 2022, with each bubble’s size and color intensity reflecting the unemployment percentage. Users can hover over bubbles to view tooltips with state names and exact rates, while a gradient legend indicates the rate range, and zoom and pan controls allow regional exploration. Built with D3.js, it uses `d3.geoPath` and the `geoAlbersUsaTerritories` projection to render state boundaries, `d3.scaleSqrt` for bubble radii, and `d3.scaleSequential` with `interpolateReds` for coloring. Data comes from the `@oabouhas/unemployment` package, and state centroids are calculated via `d3.geoCentroid` from TopoJSON US Atlas data.

Oomniaabouhassan@gmail.com
83% match
Loading thumbnail…

Fork of Bar Chart: the unemployment rates for each state from 1990 to 2010

This interactive grouped bar chart, built with D3.js, visualizes unemployment rates for each state from 1990 to 2010. It shows the percentage of the labor force unemployed per state, with a dropdown menu to select a specific year, dynamically updating the chart’s bars. The visualization uses D3’s `scaleBand`, `scaleLinear`, and `scaleOrdinal` to manage the x, y, and color axes, plus `axisBottom` and `axisLeft` for tick marks. Hovering over a bar reveals a tooltip with the precise rate and year.

Oomniaabouhassan@gmail.com
82% match
Loading thumbnail…

Fork of Bar Chart: Unemployment Rates by State

This chart displays the top 10 U.S. states by unemployment rate for 2022, using a horizontal bar layout where each bar’s color intensity reflects the rate. Sorted descending, the visualization highlights state rankings with percentage labels and a gradient legend. It filters source data, aggregates by state, and relies on d3-scaleBand, d3-scaleLinear, and d3-scaleSequential with interpolateBlues for encoding. Axes are generated via d3-axis, while hover tooltips and event listeners add interactivity. The data originates from the `@oabouhas/unemployment` package.

Oomniaabouhassan@gmail.com
81% match
Loading thumbnail…

Fork of Simple Scatter Plot

This scatter plot visualizes the unemployment rate across different US states for a given year, using data from the "Unemployment in America Per US State" dataset. Each circle represents a state, with its position on the y-axis scaled to the unemployment rate. The plot uses D3's `scaleBand` for the categorical x-axis (states) and `scaleLinear` for the y-axis, with axes from `axisBottom` and `axisLeft`. Circles are rendered with configurable radius and opacity, and clicking a circle triggers an alert showing the state and its rate. The visualization is built using D3's join methodology for declarative SVG updates.

Oomniaabouhassan@gmail.com
81% match