BenLeathers

@MoneyBrawl·9 public vizzes

D3 Scatter Plot

This interactive D3 scatter plot visualizes University of Georgia football performance, plotting average points per game against recruiting scores across different seasons. Each circle’s size represents average opponent points allowed, while color encodes the offensive coordinator. The visualization uses d3.csv, d3.json, scaleLinear, scaleSqrt, axisLeft, and axisBottom, with SVG rendering and animated transitions. A custom CSS tooltip displays precise values on hover. Coordinates for coordinators come from a local JSON file, while data loads from a GitHub gist. The chart dynamically scales fonts based on viewport dimensions taken from computed styles.

May 16, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of college football data sourced from a CSV file. Each circle plots a coordinator’s average recruiting points against their average points per game, with circle size encoding opponent points allowed and color distinguishing coordinators. The visualization reads data via d3.csv, configures axes and tooltips through vega-lite-api, and renders with a custom dark theme. Hover tooltips reveal the coordinator name using Vega Tooltip.

May 10, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses Vega-Lite API to plot a scatterplot of college football team data, mapping four-year average recruiting points on the x-axis and average points per game on the y-axis. Circle size encodes scoring average, and tooltips reveal team names. It loads CSV data from a GitHub gist via d3.csv, configures chart appearance in a separate config object, and renders interactively with vega-tooltip. The Vega-Lite chart is built programmatically through vl.markPoint, vl.x, vl.y, and vl.r encodings, then rendered as SVG.

May 10, 2023

Loading thumbnail…

Fork of D3 Git History Streamgraph

This streamgraph visualizes the commit history of the D3.js ecosystem, with each layer representing a repository and thickness showing smoothed weekly commit counts. Layers are ordered by first commit date, revealing the monolithic `d3` repository’s early dominance, the 2014 package explosion for version 4.0, and later spikes like `d3-delaunay`. The code uses `d3.stack` with `stackOffsetWiggle`, `stackOrderAppearance`, `d3.area`, `d3.scaleTime`, and `d3.scaleOrdinal` for color, plus `d3-area-label` for labels and `array-blur` for smoothing. The SVG renders against a black background from JSON data loaded via `d3.json`.

Apr 28, 2023

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the simplest possible D3 setup: it renders the text “Hello D3 version 7” in large, centered type on a blank page. The code imports the `select` function from the D3 module and uses it to target the `body` element, setting its text content directly. The page loads D3 version 7.8.2 from a CDN and runs the logic in a separate `bundle.js` file, showing a minimal project structure for starting with D3.

Apr 27, 2023

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 version 6.6.1, rendering geometric symbols as black rectangles positioned across a full-screen SVG. The code imports `select`, `range`, `symbols`, and `symbol` from D3, splitting the viewport into sections based on symbol index and using chained joins to append groups and rects. Although much of the drawing logic is commented out, the visible code demonstrates placement of twenty-pixel squares anchored to predefined coordinates. The rendering approach relies on SVG elements, with the page configured to hide overflow for a clean, immersive display.

Mar 26, 2023

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWITT wall drawing as an interactive SVG visualization. The page renders a 960-by-500 SVG canvas and uses plain CSS and JavaScript, with React as the framework, to generate geometric shapes. The drawing consists of vertical and horizontal lines in a grid pattern, executed in black and white. The code includes a minimal HTML wrapper and a script that logs to the console, but the core geometry is defined through the SVG elements. The rendering relies on React’s component structure and SVG’s native shape primitives to compose the artwork.

Mar 23, 2023

Loading thumbnail…

Fork of SVG Fundamentals

This fork of SVG Fundamentals demonstrates three overlapping white circles arranged to form a stylized face on a 960 by 500 canvas. The example uses raw SVG elements, specifically `<circle>` tags with `cx`, `cy`, `r`, and `fill` attributes, to define each shape. The circles are positioned at distinct coordinates, with two smaller ones serving as eyes above a larger one, though no facial features or additional details are drawn. The code primarily relies on inline SVG markup within an HTML document, with the page style set to remove margins and hide overflow.

Mar 20, 2023

Loading thumbnail…

Untitled

A minimal HTML page renders a static greeting, "Hello HTML!", as a block of text. The example demonstrates a bare-bones setup with no external dependencies, using only basic CSS and JavaScript within the page structure. The code does not include any data manipulation, visualization, or rendering libraries; it simply showcases a clean, unstyled starting point for a web application.

Mar 19, 2023