For Resize

100%

✓ Published0🌍 Public

Last edited Oct 19, 2017

Created on Oct 7, 2017

This visualization plots each country’s Human Development Index (HDI) on the x-axis against the year (1990-2015) on the y-axis, with circles colored to highlight a selected country (red) versus all others (translucent dark). It directly shows the United States’ decline in global HDI ranking over time while the rest of the world generally improves, as described in the README. Built with D3 v4, the SVG chart uses `d3.scaleLinear` for both axes, axis generators `d3.axisBottom` and `d3.axisLeft`, and proportional resizing via `chartDiv.clientHeight`. Data comes from the UNDP HDR CSV, processed with a custom `rows` parsing function.

AI-generated description

Built with blockbuilder.org

This viz depicts the United states decline in Human development index ranking from 1990 to 2015. Also note that the increase in the rest of the world's Human development index.

I basically built this from scratch. Data Source

I also got a little help with my right labels from Jose Pasini (Thanks Jose).

This viz is now resizable.

forked from <a href='http://bl.ocks.org/RobertDelgado/'>RobertDelgado</a>'s block: <a href='http://bl.ocks.org/RobertDelgado/efae20832724f14d0daa2ce223547812'>US Human Development Ranking</a>

mit Licensed

Similar vizzes

Loading thumbnail…

US Human Development Ranking

This scatterplot-style visualization tracks the decline of the United States in the Human Development Index (HDI) ranking from 1990 to 2000, highlighting the USA in red among all other countries shown as translucent dots. The chart uses D3 v4 with SVG rendering, employing `d3.scaleLinear` for both axes and `d3.axisBottom`/`d3.axisLeft` to display the HDI index (0–1) against the year. Each row of the dataset is plotted as a circle, with horizontal dashed lines and right-side labels showing the USA’s annual rank. Data comes from the UNDP’s HDR API via a CSV file.

RRobertDelgado

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

82% match

Loading thumbnail…

HDI 1990-2021

A line chart displays Human Development Index (HDI) values by country from 1990 to 2021, with a drop-down menu toggling between overall, male, and female HDI metrics. Lines are colored by UNDP developing region via `scaleOrdinal`, while event markers appear as black dots. The chart uses d3.v7 with `scaleTime`, `scaleLinear`, `line`, and `flatGroup` to render trajectories, plus interactive tooltips on hover. Data is parsed from a CSV using `csvParse` and `timeParse`.

SSpencer McAvey

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

81% match

Loading thumbnail…

HDI Over Time Flat Group 4/8

This visualization displays Human Development Index (HDI) values for countries over time from 1990 to 2021, with a dropdown menu that switches between overall HDI, male HDI, and female HDI datasets. Each country is represented as a thin line colored by its UNDP developing region, with a legend on the right side. The chart uses d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.flatGroup to organize lines by country. Data comes from a CSV file containing country, date, value, and region attributes.

SSpencer McAvey

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

79% match

Loading thumbnail…

Activity6_Task4

This visualization displays country-level development indicators for the most recent year in the dataset, plotting the Human Development Index (HDI) on the x-axis against life expectancy on the y-axis. Each bubble's size encodes per-capita CO2 consumption, while its color represents the country's continent. The chart is built with D3 v7, using `d3.tsv` to load the CSV data, `d3.scaleLinear` and `d3.scaleSqrt` for scaling, and `d3.axisBottom` and `d3.axisLeft` for axes. It renders as an SVG with tooltips and a legend, and includes an animation that removes a loading indicator once the data is processed.

Pparmuriat@gmail.com

77% match

Loading thumbnail…

Fork of 2021 Human Development Index

This visualization displays a world map of the 2021 Human Development Index (HDI) values, coloring each country according to its score using a green sequential palette. It implements zoom and pan interactions with d3.zoom and shows a color legend with ordinal scales to interpret HDI ranges. The map uses d3.geoPath with a geoNaturalEarth1 projection, loads geographic data from topojson-client, and merges HDI values from the internet_users.csv dataset, with a tooltip showing each country’s score on hover.

PPeiyang Li

75% match