Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
AAdamFrankWhite
Last edited Mar 5, 2020
Created on Mar 5, 2020
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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

scatterplot

This scatterplot displays the population of various countries using a horizontal bar chart layout, with each bar’s length proportional to the population value from the UN Population 2019 CSV dataset. The visualization is built with React and D3 v6, using `scaleBand` for the categorical y-axis and `scaleLinear` for the x-axis. SVG shapes are rendered through React components, with axes and marks created using `AxisBottom`, `AxisLeft`, and `Marks` components. Tooltips are implemented via native SVG `<title>` elements, and tick formatting uses D3’s `format` function to convert values to billions.

BBurak Senel
78% 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
78% 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
77% match
Loading thumbnail…

Scatterplot

A scatterplot shows the relationship between life expectancy at birth and unemployment rate for countries, with each circle representing a country and a tooltip revealing its name and exact values. The visualization animates circles from off-screen to their x-axis positions sorted by life expectancy, using d3.csv to load data from Countries.csv. It employs d3.svg.axis for labeled axes, d3.scale.linear for coordinate mapping, and transition with delay and duration to produce the staggered animation effect. Circle color changes on hover via CSS.

LLTymn
77% match
Loading thumbnail…

ScatterPlot

A scatterplot displays the populations of the top 18 most populated countries in 2020, using UN estimates from the World Population Prospects. It uses D3.js v5 with SVG rendering, mapping population to a linear scale on the x-axis and country names to a point scale on the y-axis. The code employs `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `format` for tick labels, with red circles sized at a fixed radius. The background is styled with a light blue color, and axis labels and a title are included.

TTebid Quinsy
76% 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
76% match
Loading thumbnail…

Scatter Plot with D3.js!

This scatter plot displays the population of the top ten most populous countries in 2018, with each circle positioned along a point scale for country names and a linear scale for population values. The visualization uses D3.js v5 within a React framework, rendering SVG elements via `select`, `scaleLinear`, `scalePoint`, and `axisBottom`/`axisLeft` to create labeled axes with custom tick formatting (converting billions to B). Data comes from the United Nations World Population Prospects 2017, loaded from a CSV with `d3.csv`, and the chart includes gridlines and axis titles styled through CSS.

Fforcox43
75% match