willapolman@gmail.com

@littlecelestedemon·7 public vizzes

Fork of GapMinder (CP341 Style)

This fork of GapMinder shows global health and wealth trends from 1800 to 2014, with a scatter plot of GDP per capita against average lifespan and an animated line chart tracking each country’s lifespan over time. Users can filter by continent, scrub through years with a slider, and click points to pin a country. Historical annotations, like the 1918 Spanish Flu, appear in a fact box. The visualization uses d3.v6 with SVG, transitions, scales, a line generator, and event handlers for tooltips and interactivity.

May 9, 2024

Loading thumbnail…

Pokemon Stats

A searchable Pokedex displays a radar chart of a Pokemon's base stats. Users type a Pokemon name into a form, and the app fetches the dataset from a remote JSON endpoint. It then renders six stats—HP, Attack, Defense, Speed, Special Defense, and Special Attack—as a Chart.js radar chart on an HTML canvas. The chart updates dynamically and uses Chart.js's RadarController, RadialLinearScale, PointElement, and LineElement.

May 6, 2024

Loading thumbnail…

Fork of Choropleth

This fork of a choropleth combines an interactive map with a scatter plot to explore global development metrics. It uses D3 v6 to project country polygons with `d3.geoEqualEarth` and `d3.geoPath`, while a second SVG shows life expectancy versus GDP per capita. A hover tooltip appears via CSS, and both views share data from a `Map` of country entries with attributes like population and urban rate.

May 3, 2024

Loading thumbnail…

Fork of Radar Chart

This radial chart displays monthly temperature anomalies for Massachusetts from 1895 onward, with a slider to select a specific year. Each point represents a month’s deviation from the historical average, colored along a blue-to-red diverging scale. The chart uses a D3 v7 radial line generator (`d3.lineRadial`) with a time scale for angles and a linear scale for radii, rendered as SVG. Data comes from a local CSV parsed with `d3.csv` and `d3.timeParse`.

May 3, 2024

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using D3.js v5. It fetches a world dataset from GitHub and displays the file size in kilobytes, row count, and column count in large text. The implementation uses `d3.csv` to retrieve and parse the data directly, while commented-out alternatives show the same task with `fetch`, `async`/`await`, and `d3.csvParse`. The interface is a minimal HTML page with a styled `<pre>` element for output.

May 2, 2024

Loading thumbnail…

Fork of Chloropleth

This visualization pairs a choropleth map with a scatterplot to explore global demographic data from a 2023 CSV and GeoJSON world map. The map uses `d3.geoEqualEarth` and `d3.geoPath` to color countries by birth rate, while a `d3.scaleLinear` maps fertility rate and life expectancy onto the scatterplot axes, with point size encoding population. Both SVGs support synchronized mouseover highlighting that turns matching countries or points red, using `d3.selectAll` with shared ids.

May 2, 2024

Loading thumbnail…

Fork of Chloropleth

This visualization combines a choropleth map of global birth rates with a scatter plot of fertility rate versus life expectancy, colored by continent with point size encoding population. Hovering highlights a country in red across both views. It uses d3.geoEqualEarth, d3.geoPath, d3.scaleLinear, and d3.scaleOrdinal, with data from a world GeoJSON, a 2023 country statistics CSV, and a country-to-continent JSON. Two SVG elements render the linked map and chart.

May 2, 2024