Prep Data UNDP

100%

Prep Data UNDP

✓ Published0🌍 Public

Last edited Apr 13, 2021

Created on Apr 13, 2021

This interactive scatter plot visualizes United Nations Development Programme data, mapping countries by their Human Development Index and maternal mortality ratio. A small multiple display changes the x-axis variable between revenue, release year, and popularity via control buttons, with hover tooltips revealing detailed country information. The visualization uses D3 version 5, loading CSV data from a GitHub gist and employing `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and custom tooltip styling.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Starter UNDP scatter

This interactive scatter plot visualizes the relationship between the Human Development Index (HDI) and two alternative measures: child mortality rates and the Gini index, using data from the UNDP's 2019 Human Development Report. Users toggle between the two metrics via buttons, which triggers a smooth animated transition of the data points, axes, and explanatory text. Built with D3 version 5, the visualization renders as an SVG and includes interactive tooltips that reveal country-specific data on hover, with axes and labels updated programmatically using a `transition` API.

Mmaxthamt

81% match

Loading thumbnail…

Fork of HDI Over Time Line Final

This visualization displays United Nations Human Development Index (HDI) values for countries from 1990 to 2021, with a drop-down menu allowing users to switch between overall HDI, male HDI, and female HDI datasets. The line chart uses d3.scaleTime and d3.scaleLinear for axes, d3.line to generate paths for each country, and d3.scaleOrdinal with schemeCategory10 to color lines by UNDP developing region. A color legend and interactive hover effects that adjust stroke width are implemented using D3 v7 selection methods. The data is loaded from a CSV file and parsed with d3.csvParse.

SSpencer McAvey

76% match

Loading thumbnail…

HDI Over Time Scatter Final

This scatterplot displays the United Nations Human Development Index (HDI) for countries over time, comparing the year on the x-axis against the HDI value on the y-axis. The visualization uses semi-transparent circles to reveal dense clusters of data points, making trends in global development visible. The code leverages D3 version 7’s `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` functions to construct the chart, with data parsed from a CSV file using `csvParse`. The visualization also separates male and female HDI measurements into distinct datasets.

SSpencer McAvey

75% match

Loading thumbnail…

Loading My CSV Data with D3

This visualization loads a CSV of 2014 Human Development Index data and renders it as a scatterplot using D3 v3 with SVG. Each country is represented by a circle plotted by Life Expectancy on the x-axis and Mean Schooling on the y-axis, with country size encoding GNI per capita. Points are colored by region (Europe, Asia, North America, etc.) and labeled with country names. The chart includes axis labels, a legend for regional colors, and a title. A drop-down menu allows viewers to select different data columns to map to the x- and y-axes, dynamically updating the circles and tooltips. The visualization emphasizes the relationship between health, education, and income across countries, using D3’s data-join and scales to bind the CSV data to SVG circles and text elements.

DDanielleW

75% match

Loading thumbnail…

Final Project V1

This interactive scatter plot visualizes the Human Development Index dataset, allowing users to compare inequality-adjusted income against inequality in education percentages. The visualization uses React with D3 v5 scales and rendering via SVG, featuring dropdown menus to switch between different data attributes. Data loads asynchronously from a CSV file using d3.csv, with axes rendered through custom React components and tooltips provided by SVG circle titles.

Llubin-liu

74% match

Loading thumbnail…

HDI Scatter Plot With Color

This scatter plot visualizes the relationship between life expectancy at birth and gross national income per capita for countries in 2021, using the United Nations Development Programme (UNDP) HDI dataset. Each circle represents a country, colored by its UNDP developing region, with opacity revealing dense clusters. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `schemeCategory10`, and custom `axes` and `colorLegend` functions to render the chart and legend. The plot shows a clear positive trend between the two variables, with regional groupings potentially identifiable through color.

SSpencer McAvey

73% match

Loading thumbnail…

UN - Human Development Report Data

This visualization plots United Nations Human Development Index (HDI) data for 2013, mapping countries along axes of life expectancy, schooling, GNI per capita, and internet usage. Each country is represented as a point, with its position and size reflecting its development metrics. The scatterplot uses the HDI value as a color scale, highlighting the relationship between income, health, education, and technology access across nations. The chart is built from a Gist by DanielleW, encoding six quantitative variables for each of the 58 countries shown.

DDanielleW

73% match

Loading thumbnail…

HDI Over Time Line Final With Tooltip

This interactive line chart shows Human Development Index (HDI) values per country from 1990 to 2021, with a dropdown menu to switch between overall HDI, male HDI, and female HDI metrics. Lines are colored by UNDP developing region via `scaleOrdinal` and `schemeCategory10`, and hovering over a line displays a tooltip with the country name using D3’s mouse events. The visualization uses `d3.csvParse` to load data, `scaleTime` and `scaleLinear` for axes, and `d3.line` to generate the paths.

SSpencer McAvey

73% match