Skip to main content
Log in
A

abell@wpi.edu

@abell625·16 public vizzes

Loading thumbnail…

Pokemon GO Final Viz

This interactive visualization explores a Pokémon dataset from Kaggle, displaying a selected Pokémon's base stats, type effectiveness, and movepool alongside a level-scaling CP curve. The interface uses D3.js to render a radar chart comparing stats to maximum values, a line graph for CP growth, and a matchup table, with dropdowns and an input box to select different Pokémon. The CP curve can be toggled to show absolute values, though labeling is limited in that mode.

Dec 6, 2024
Loading thumbnail…

Pokemon GO Week 6

This interactive dashboard explores Pokémon Go’s base stats, CP scaling, and type matchups. A radar chart compares a Pokémon’s attack, defense, and stamina to the dataset maximums, while a line chart uses the CPLevelScaling.csv multiplier to show CP progression up to level 51. A table displays type effectiveness multipliers and learnable moves. The interface uses d3-selection and d3-scale to update charts when selecting a Pokémon from a dropdown or entering a name or ID.

Nov 27, 2024
Loading thumbnail…

Pokemon GO Week 5

This visualization explores Pokémon stats and type matchups, with a dropdown menu to select a Pokémon and display its radar chart of base stats, movepools, and type weaknesses/resistances. It includes a level curve showing CP multiplier scaling from the CSV data, with annotations at key levels. The code uses D3.js (select) and custom functions to parse CSV data with regex-based tokenizers, building an 18x18 type matchup matrix and calculating effectiveness from the Pokémon's type combination.

Nov 22, 2024
Loading thumbnail…

Pokemon GO Week 4

This interactive visualization explores Pokémon GO data, displaying a selected Pokémon's stats, type matchups, movepools, and a CP level curve. It uses d3 to render a radar chart, tables, and an SVG plot. The level curve, scaled using the CPLevelScaling.csv data, highlights a notable change at level 30. Users select a Pokémon from a dropdown menu, updating the visuals to show its weaknesses, resistances, and other attributes.

Nov 12, 2024
Loading thumbnail…

Pokemon GO Week 3

A dropdown menu populated with all Pokémon names from a Pokémon GO dataset selects an individual creature, whose base stats are displayed as a radar chart overlaid with labeled values for Max CP, Base Attack, Base Defense, and Base Stamina. The chart draws concentric circles and a translucent polygon using D3 selections, updating in place when the selection changes. Data is loaded from a CSV file and numerical fields are parsed before rendering.

Nov 7, 2024
Loading thumbnail…

Pokemon GO Week 2

A radar chart displays the base stats of a selected Pokemon, with concentric circles and a polygon connecting values for max CP, attack, defense, and stamina. The visualization uses D3.js selections to append SVG circles, polygons, and text labels, scaling values via linear interpolation against the dataset’s minimum and maximum stats. The code processes a Pokemon GO dataset from Kaggle, loading CSV data into numeric fields and rendering a static view of Bulbasaur.

Oct 31, 2024
Loading thumbnail…

Pokemon GO

This visualization explores a Pokémon GO dataset, showing how a selected Pokémon's stats like base attack, defense, and stamina vary, along with its available moves. It uses a radar chart to display these stats, and includes a dropdown menu for selecting different Pokémon to update the display. The code parses CSV data using standard JavaScript and renders the structured information, such as charged and fast moves, directly into the container.

Oct 25, 2024
Loading thumbnail…

World Map

This world map visualizes global population distribution, with countries shaded in increasingly deep reds to indicate higher 2022 population figures. The visualization loads geographic boundaries from the visionscarto-world-atlas TopoJSON file and joins it with population data from a CSV file. Using D3’s `geoNaturalEarth1` projection, `geoPath`, and `scaleSequential` with `interpolateReds`, it renders each country as a filled path. A graticule and outline provide geographic context, while the map fetches and processes the atlas data asynchronously via `fetch` and `topojson.feature`.

Oct 25, 2024
Loading thumbnail…

World Cities

This visualization displays global cities as tiny dots on a natural Earth projection, overlaid with graticule lines and country outlines. It uses D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to render the map, while `topojson-client` converts TopoJSON country boundaries. City coordinates are projected from latitude and longitude, and each dot’s radius is fixed at 0.2 pixels. Data comes from a reduced World Cities CSV and a 110m world atlas, loaded via `fetch` and parsed with `csvParse`.

Oct 24, 2024
Loading thumbnail…

Marks and Channels

This example demonstrates the core visualization concept of marks and channels by rendering five separate SVG panels. Each panel uses the same dataset of five values to illustrate different visual encodings: X position, Y position, circle size, bar length, shape variety, and color hue. The code leverages the D3.js library, specifically using `selection.each()` to iterate over the panel generator functions. It applies D3’s `schemeCategory10` for categorical colors, custom `symbol()` paths for varied shapes, and sets positions and dimensions via `attr()` calls. The visualization serves as a clear, side-by-side comparison of how different channels encode identical data.

Sep 26, 2024
Loading thumbnail…

CSV Dataset - Pokemon GO - Alexander Bell

This example displays raw JSON from the first row of a Pokemon GO CSV dataset, parsed into numerical values within the index.js file using JavaScript’s unary plus operator. It renders the structured data in a preformatted HTML block via a container’s innerHTML, with a fixed font size. The visualization highlights the dataset’s schema, including base stats and capture rates, without further graphical or chart-based encoding.

Sep 18, 2024
Loading thumbnail…

Simple Scatter Plot

This simple scatter plot visualizes COVID-19 data, mapping confirmed cases on the x-axis against deaths on the y-axis for each country. Each circle represents a country, with the plot revealing a strong positive correlation and one prominent outlier with over 110 million confirmed cases. The visualization uses D3's `scaleLinear`, `axisLeft`, and `extent` functions to create the scales and axes, while circles are rendered with SVG elements. The code leverages `@curran/axis-labels` for axis labeling, reading from a static CSV dataset.

Sep 18, 2024
Loading thumbnail…

CSV Dataset - Temperature - Alexander Bell

This example displays the first row of a CSV dataset containing annual temperature anomalies for various countries, parsed with a simple data-loading script. It shows the raw values for a single country in a JSON-like format using a `<pre>` element. The code imports the dataset from `annual-temperature.csv`, converts the `Year` and `Temperature_anomaly` fields to numbers, and renders the first data object as text with a specified font size. No visualization library is used; the example relies on plain JavaScript and HTML.

Sep 11, 2024
Loading thumbnail…

CSV Dataset - COVID - Alexander Bell

This example displays the first entry of a COVID-19 dataset as a formatted JSON object in a large monospace font. The dataset, loaded from a CSV file, contains country-level statistics including confirmed cases, recoveries, critical cases, and deaths. The code parses the CSV, converts numeric fields to numbers, and uses template literals to render the JSON string within a `<pre>` element. It demonstrates a minimal approach to inspecting structured data without additional visualization libraries.

Sep 11, 2024
Loading thumbnail…

Top 10 Richest People

A bar chart animates the changing ranks and wealth of the world’s ten richest people, with each bar growing upward from the baseline as its label and value fade in sequentially. Using D3's `select`, `transition`, and `easeLinear` APIs, the visualization staggers the bars' entrance over two seconds, while updates and removals use faster transitions. Data, drawn from Forbes’ Real Time Billionaires list as of September 2024, is mapped to bar heights via a custom scale, with gridlines and value labels marking increments. The animation highlights wealth disparities and ranking shifts through smooth, choreographed motion.

Sep 11, 2024
Loading thumbnail…

Circles with D3 - Alexander Bell

This example demonstrates how to create a winter-themed scene using D3.js, featuring a snowman composed of circles and a snowy ground rendered as a rectangle. It uses the D3 General Update Pattern with method chaining to bind data arrays to SVG elements via `select().selectAll().data().join()`, dynamically setting attributes like `cx`, `cy`, `r`, and `fill` for circles and `x`, `y`, `width`, `height` for the rectangle. The visualization initializes an SVG sized to its container with a dark background, and the data is hardcoded in the `circleData` and `squareData` arrays, illustrating declarative SVG generation from JavaScript objects.

Aug 28, 2024