Skip to main content
SimilarExport ZIP
100%

Unemployment rate in UK #HAW25

✓ Published0🌍 Public
Wwuc280@haw-hamburg.de
Last edited Dec 5, 2025
Created on Dec 5, 2025
Forked from CV: Line Chart

This interactive line chart visualizes UK unemployment rates from 1971 to 2024, with data parsed from a CSV file. Users can filter by year range using dual sliders, toggle the line visibility via a checkbox, and view statistical summaries for the selected period. The visualization uses React with D3 v7, leveraging `d3.csv` for data loading, `d3.scaleLinear` for scales, and `d3.line` for the path generation. A hover overlay with bisector-based nearest-point detection shows tooltips with exact values.

AI-generated description

Interactive Unemployment Rate Visualization

An interactive D3.js + React visualization of unemployment rates over time.

Features

  • Interactive Year Range Slider: Filter data by year range
  • Hover Tooltips: See exact values when hovering over the line
  • Toggle Line: Show/hide the visualization
  • Statistics Panel: View min, max, and average unemployment rates for the selected range
  • Responsive Design: Adapts to different screen sizes

How to Use

  1. Use the year range sliders to filter the data
  2. Hover over the line to see exact unemployment rates
  3. Toggle the "Show Line" checkbox to hide/show the visualization
  4. View real-time statistics for the selected data range

Data Source

Historical unemployment rates (aged 16+, seasonally adjusted) from 1971-2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Unemployment rate in UK #HAW

This interactive line chart visualizes the UK unemployment rate from 1971 to 2024, using data from a CSV file. Users can toggle between yearly, quarterly, or monthly data aggregation and filter by time period. Built with React and D3 v7, the visualization draws a line path and axes, with hoverable transparent circles that trigger a tooltip showing the date and unemployment percentage.

Wwuc280@haw-hamburg.de
95% match
Loading thumbnail…

abc

This visualization shows the UK unemployment rate from 1971 to 2025 as a line chart, with a hover tooltip displaying the year and exact rate for each data point. The chart uses D3.js v7's `scaleLinear`, `line`, and `axisBottom`/`axisLeft` to render the line and axes within a React component. The data comes from a CSV file containing annual, quarterly, and monthly unemployment figures, and the visualization filters the data to include only annual entries. The code implements interactive hover detection using transparent circles, making the tooltip and highlight circle appear when the cursor is near a data point.

Wwuc280@haw-hamburg.de
83% match
Loading thumbnail…

Unemployment rate by Country Scatter Plot (UN Stats), using D3.js

This scatter plot displays the unemployment rate for countries in 2019, with each point positioned by unemployment percentage on the x-axis and country name on the y-axis. The visualization uses D3.js to load the CSV data, filter for the relevant year and series, and render the chart as an SVG. It applies `scaleLinear` and `scalePoint` for axes, and `axisBottom` and `axisLeft` to generate tick marks, with filtered data sorted by value before plotting.

AAdamFrankWhite
74% match
Loading thumbnail…

3rd visual

This interactive line chart visualizes unemployment rates over time for multiple countries between 1991 and 2021, using data loaded via `d3.csv` from a GitHub repository. Each country appears as a colored line, with dashed grid lines and rotated x-axis labels to improve readability. The visualization uses `d3.scalePoint`, `d3.scaleLinear`, and `d3.line` within an SVG, and includes a hover tooltip that displays country-specific values. The chart animates by redrawing paths dynamically, with colors assigned from `d3.schemeCategory10`.

Vvenkatabhaskaratetali@my.unt.edu
74% match
Loading thumbnail…

Line Chart

This line chart displays the US unemployment rate from 1920 to 1980. It uses D3 v5 with scales from `d3.scaleLinear` and `d3.scaleTime`, and axes from `d3.axisLeft` and `d3.axisBottom`. The line is generated with `d3.line`, and the data is loaded as CSV from a GitHub gist. The SVG rendering includes styled grid lines, axis labels, and a title, with the blue stroke path emphasized via CSS.

JJerlineJJ
72% match
Loading thumbnail…

line chart

This line chart visualizes unemployment rates across multiple countries, with each country plotted on the x-axis and its corresponding rate on the y-axis. The chart is rendered on a canvas using Chart.js, which fetches CSV data from a GitHub gist and parses it into labels and numeric values. The code creates a line dataset with a teal border color, includes a legend at the top, and displays axis titles for countries and unemployment rate. The visualization updates responsively based on the canvas dimensions.

Ssaisathyapriya097@gmail.com
69% match
Loading thumbnail…

area chart

This area chart displays the unemployment rate in different countries, using a single teal line filled with a semi-transparent color to emphasize the values. The chart is rendered on an HTML `<canvas>` element using Chart.js, with data fetched from a remote CSV file provided via a GitHub Gist. The CSV is parsed manually in JavaScript, extracting country names and numeric unemployment rates, which are then passed to the chart’s line dataset configuration.

Ssaisathyapriya097@gmail.com
68% match
Loading thumbnail…

U.S. Unemployment in 2017

This example displays the monthly U.S. unemployment rate for 2017 as a horizontal bar chart, with each bar labeled by month and the exact percentage value shown alongside it. The chart reveals a slight decreasing trend in joblessness across the year, as encoded by bar lengths. The visualization is built with D3.js v4, using `d3.select`, `d3.scaleLinear`, and `d3.scaleBand` to map data to SVG rectangles and text elements. Data comes from the Bureau of Labor Statistics, and the layout is adapted from a Curran Kelleher block.

RRobertDelgado
68% match