benclark.3rd@gmail.com

Fork of Final Project Rev. 5

Fork of ver2 Earthquake Scatter Plot

Ben Clark Final Project

Fork of Parallel Coordinates with Brushing

This example demonstrates a fork of the classic parallel coordinates plot, where each Pokémon is represented as a polyline across numeric stat axes. Brushing any axis highlights the selected range in red while dimming excluded lines, enabling rapid comparison of attributes like Attack, Defense, and Speed across the dataset. The animation smoothly transitions selections, making it easy to explore correlations and distributions across the Pokémon stats encoded in the linked data.csv.

Distance Relay

Distance Relay is a D3.js visualization that renders three labeled distance vectors radiating from a central point, each paired with a circle whose diameter equals the vector's magnitude. The vectors use red, green, and magenta strokes, and their angles and lengths define the circle centers and radii. The code employs `d3.select`, `extent`, and SVG circle elements, with manual trigonometry converting polar coordinates to Cartesian positions. The viewBox is dynamically adjusted to fit all geometric elements, and the example invites creative theming variations like Halloween or Christmas modifications.

Fork of Responsive Axes with Crosshair (SSP) and Tooltips and Comparison

This scatter plot visualization displays Pokémon attack and defense statistics, with each point colored by generation and interactive tooltips showing exact values. The chart uses D3.js with responsive axes that maintain consistent tick mark density through dynamic tick calculation based on plot dimensions, ensuring readability across different screen sizes. A crosshair follows the mouse position within the plotting area, and clicking points displays their attack values in a comparison panel, while a ResizeObserver tracks container size to trigger redraws. The SVG rendering includes a legend, axis labels, and handles the Pokémon dataset from CSV.

Responsive Axes with Crosshair (SSP) and Tooltips

A scatter plot of Pokémon Attack versus Defense values uses responsive axes that maintain consistent tick mark density as the container resizes. The visualization leverages D3 scales and axis components, with a ResizeObserver tracking dimensions and a SVG crosshair that follows the mouse within the plot area. Tooltips display the Attack and Defense values for each data point, while a color legend distinguishes Pokémon by generation.

Fork of Responsive Axes with Crosshair (SSP)

This scatterplot displays Pokemon Attack and Defense stats, with points colored by generation and a hoverable crosshair that tracks the mouse position. The visualization uses SVG rendering with D3.js scales and axes, and implements responsive tick mark density via `axisBottom` and `axisLeft` with computed tick counts based on container dimensions. Data comes from a CSV file containing Pokemon attributes, and the code uses ResizeObserver to adapt the chart to resizing windows.

Fork of Responsive Axes (SSP)

This visualization shows the relationship between Attack and Defense stats for Pokémon, with each point colored by generation and a legend indicating the generation. The scatter plot uses D3.js scales and axis functions, but its key feature is responsive axes that maintain consistent tick mark density as the viewport resizes. The code calculates the number of ticks based on the inner width and height divided by a fixed tick density constant, ensuring axes remain readable at any size. Data comes from a CSV file containing Pokémon attributes.

Fork of Simple Scatter Plot

This scatter plot shows the relationship between Attack and Defense stats for Pokémon, with each point colored by generation and accompanied by a legend. Built with D3.js, it uses `scaleLinear` for axes, `scaleOrdinal` with `schemeDark2` for color encoding, and `axisBottom`/`axisLeft` for tick marks. The SVG rendering includes a light gray inner rectangle, semi-transparent circles, and dynamically adjusted margins to fit the legend. Data comes from a CSV of Pokémon attributes.

Fork of SSP with Responsive Axes & Viz

A scatter plot maps Pokémon Attack and Defense stats, with each circle colored by generation and a legend identifying each generation. The visualization uses D3’s `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` to position points, render axes, and assign categorical colors. An inner rectangle highlights the plotting area, while the code reads data from a CSV file and converts numeric fields. The example is a fork of a scatter plot with responsive axes.

Fork of Simple Bar Chart

This example displays the average total stats per generation for Pokémon, using data from a CSV file that includes attributes like HP, Attack, and Speed across all generations. The bar chart is built with D3 version 7, leveraging `scaleBand` and `scaleLinear` for positioning, and `axisLeft` for the y-axis. The visualization processes the raw dataset by grouping entries by generation and computing the mean Total value. It includes a gray inner rectangle to highlight the plot area, with axes and labels added via the `@curran/axis-labels` library.

Fork of Simple Bar Chart

This fork of a simple bar chart displays the top 10 Pokémon by total stats from a bundled CSV dataset. It sorts the data by the total stat column in descending order and selects the first ten entries for visualization. The chart uses d3's `scaleBand` and `scaleLinear` for axes and position encoding, with bars drawn as SVG rectangles. The code relies on the `select`, `descending`, and data join operations from D3 to manage the SVG elements and rendering.

Fork of Penguins League of Legends

This gallery example displays the League of Legends champion statistics dataset, revealing correlations between ban rates, win percentages, and roles such as TOP, MID, or JUNGLE. The visualization parses quantitative attributes like Score, Win %, and Ban % from CSV data, then renders a single champion’s summary as pretty-printed JSON text. The code uses D3.js to load and transform the data, with plain JavaScript template literals for output, highlighting specific entries like Caitlyn’s high pick rate and Irelia’s ban percentage.

Forked Penguins Power Load

This visualization shows daily power generation across Indian regions, comparing actual versus estimated output for thermal, nuclear, and hydro sources. It highlights seasonal shifts in reliance on different energy types and regional variations. The view uses raw JSON data displayed in a `<pre>` element, parsed with JavaScript numeric conversions. The code imports a CSV dataset and renders the first record, demonstrating basic data parsing and display without additional visualization libraries.

Fork of Solar System - Galaxy

This animation visualizes the solar system with planet sizes drawn to scale, while orbital distances are compressed for visibility. Each planet appears sequentially as a colored circle with a white label, positioned along a horizontal line against a starry background. The visualization uses D3.js with `transition` and `easeLinear` to animate the circles’ radii and opacity, binding data through `selectAll` and `join`. Data on planet radii and distances comes from Wikipedia’s list of gravitationally rounded objects, with the Sun and planets rendered as simple SVG circles.

Fork of Solar System

This fork of the “Solar System” template uses data from Wikipedia’s list of gravitationally rounded objects to animate circles representing planets and a subset of skyscrapers, with relative sizes shown but distances not to scale. It uses d3’s `select`, `transition`, and `easeLinear` to stagger the growth of each circle and label via delays. The rendering is a black-background SVG, and the code includes an option to add SVG gradients for more planet-like shading.

Fork of Solar System

This fork of the original solar system visualization compares the relative sizes of the world’s tallest buildings, scaling each circle’s area to the square root of its height. Animated with D3 transitions, circles and labels expand in sequence, with faster transitions used for updates and slower ones for entry and exit. Data comes from the building list embedded in the code, with each structure colored individually and labeled by name. The visualization uses `select`, `transition`, and `easeLinear` from D3 7.8.5 to manage the SVG rendering.

Solar System of Forks

The visualization animates a stylized solar system constructed from kitchen utensils, with two concentric circles representing plates as the central “sun” and orbiting forks of varying sizes as “planets.” It shows relative scale through the sizes of the circular and rectangular shapes, though distances are not depicted to scale. The animation, built with D3.js, uses `transition` to grow the elements from zero to their full dimensions, then rotates the fork shapes around the center using an `interval` loop that updates their positions via trigonometric calculations. Data on planetary sizes comes from Wikipedia’s list of gravitationally rounded objects.

Fork of Penguins Pokemon

This fork of the Penguins Pokemon visualization uses the Kaggle Pokemon dataset to explore whether legendary Pokemon have higher stats and how different stats correlate. The code loads data from a CSV file, parses quantitative attributes into numbers, and renders the first data entry as JSON in a preformatted block. It relies on the native JavaScript array parsing and template literals to display the data, with no external visualization libraries currently applied.

Forked Penguin Power Plants of North America

This fork of the visualization displays the first row of a 15-minute interval solar power generation dataset, showing parsed numeric values for DC power, AC power, daily yield, and total yield as JSON. The code uses JavaScript’s `Date` constructor for date-time parsing and the unary plus operator to coerce quantitative fields into numbers. It presents the data without additional charting libraries, using a `<pre>` element to render the structured output. The dataset originates from Kaggle’s solar power generation records.

Olympic Circles with D3

This example renders the Olympic rings as five semi-transparent circles arranged in the classic overlapping pattern against a light green background. The code uses D3’s `select` and `join` pattern to bind an array of coordinate and color data to SVG `circle` elements, setting each circle’s `cx`, `cy`, `r`, and `fill` attributes directly. The rings are drawn statically with an opacity of 0.7, emphasizing the layered interlocking effect rather than animation.