Spencer McAvey

@smcavey·15 public vizzes

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`.

Apr 22, 2023

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.

Apr 22, 2023

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.

Apr 8, 2023

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.

Apr 3, 2023

Loading thumbnail…

2021 Human Development Index

This map visualizes the 2021 Human Development Index (HDI) by country, using a green color scale to represent index values. It uses d3.geoPath and d3.geoNaturalEarth1 to render world map outlines, with data from a Kaggle dataset. Hovering over a country displays its name and HDI value via a tooltip, and a color legend explains the value ranges. The visualization supports zoom and pan interactions.

Mar 25, 2023

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.

Mar 24, 2023

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.

Mar 5, 2023

Loading thumbnail…

HDI Scatter Plot

This scatter plot displays the relationship between life expectancy at birth and gross national income per capita for countries in 2021, revealing a clear positive trend. The visualization uses D3 v7 with `scaleLinear` for axes and `join()` to bind data to circles with opacity for dense clusters. The data comes from a CSV file parsed with `csvParse`, and the axes are rendered using `axisLeft` and `axisBottom` from the D3 library.

Feb 23, 2023

Loading thumbnail…

Fork of Transforming Data

This example demonstrates the results of applying D3 data-transformation APIs to a dataset of Human Development Index (HDI) indicators for countries across multiple years. It shows how aggregation methods like `flatRollup`, grouping via `flatGroup`, and `bin` summarize and reshape the raw CSV data into compact summaries. The visualization outputs the transformed results as formatted JSON text using `select` and `join`, displaying counts, averages, or binned ranges depending on the uncommented transformation. The code relies on D3 v7 functions such as `csvParse`, `bin`, `min`, `max`, and `extent` to process the data.

Feb 23, 2023

Loading thumbnail…

HDI Scatter Plot Simple

A scatterplot compares mean life expectancy at birth in 2021 against gross national income per capita in 2021, with semi-transparent circles revealing dense country clusters. The visualization uses D3’s `scaleLinear` and `extent` functions to map data, and D3’s `select` and `join` API to render the circles. It loads data from a CSV, parsing values with `csvParse`. The plot lacks interactive hover details, so outlier countries remain unidentified.

Feb 14, 2023

Loading thumbnail…

HDI Pseudo-Viz

This visualization plots Syria’s mean life expectancy at birth for each year from 1990 to 2021, with points positioned along the x-axis by year index and the y-axis scaled by life expectancy. Using d3.v7, the code draws circles via the `xPosition` module, while additional unused modules (`hue`, `shape`, `size`, `length`) demonstrate alternative encodings. The data array contains 32 yearly values, rendered as a simple dot plot across the full viewport.

Feb 2, 2023

Loading thumbnail…

Loading HDI Data

This example demonstrates a data-loading workflow for the Human Development Index dataset, which tracks metrics like life expectancy, education, and income per country from 1990 to 2021. The visualization displays the raw parsed data as JSON text in a styled `<pre>` element, showing the dataset’s structure after being fetched and processed. The code uses D3 v7’s `csvParse` to convert the CSV file retrieved via `fetch` into an array of objects, managing a loading state through a simple state-management pattern with `setState`. The data originates from a Kaggle-hosted dataset covering global development indicators.

Jan 19, 2023

Loading thumbnail…

Loading Gin Data

This example demonstrates the initial loading state of a gin review dataset, first displaying a JSON preview of the raw data before fetching and parsing the CSV file. The visualization uses D3's `select` to bind to the container, `join` to manage the `<pre>` element, and `csvParse` to transform the tabular data into JavaScript objects. The code explicitly handles three states—undefined, 'LOADING', and loaded data—to show the transition from a blank screen to the final structured dataset. The dataset itself originates from a Kaggle gin review collection, containing fields such as price, ABV, score, and tasting notes.

Jan 19, 2023

Loading thumbnail…

Loading Coffee Data

This example demonstrates a simple data-loading workflow for an Arabica coffee quality dataset sourced from Kaggle. It fetches a CSV file and parses it with `d3.csvParse`, displaying the resulting array of objects as raw JSON in a `<pre>` element. The visualization tracks loading states—showing `undefined`, `'LOADING'`, or the parsed data—through a state management pattern using `select` and `join`. The code explicitly uses D3 v7’s `select`, `csvParse`, and the `join` method to handle DOM updates.

Jan 19, 2023

Loading thumbnail…

Fork of Mouse Follower

A circle follows the mouse pointer, changing to a random color and opacity with each movement. The visualization uses unidirectional data flow, where a state object is updated on mouse events and passed to a rendering function. Built with D3.js v7, it uses `select` to manage an SVG and circle element, while custom `randColor` and `randOpacity` functions generate random values.

Jan 12, 2023