NJ Smith

@njsmithfm·6 public vizzes

scatter map

This interactive map displays 311 homeless encampment reports across Staten Island, with a dark-themed Leaflet map rendering circular markers for each reported location. Users can filter the data by status (Open, Closed, Pending) and date range using the provided dropdowns. The map uses CARTO’s dark basemap tiles and shows popup details for each marker, including date, status, address, and resolution description. The CSV data is loaded via D3’s `csv` parser, while Leaflet’s `map`, `tileLayer`, and `circleMarker` APIs handle map rendering and interaction.

Jan 16, 2026

Loading thumbnail…

USA Map

Clicking a text link triggers an explosion of its characters as individual particles across a full-viewport canvas. The p5.js sketch animates each letter with a random outward velocity, fading them out over roughly one second before navigating to the linked URL. The effect uses `createCanvas`, `getComputedStyle` for font metrics, and a particle array updated in the `draw` loop, with CSS managing link visibility during the animation.

Oct 1, 2025

Loading thumbnail…

p5.js test

The sketch renders the text "NJ Smith" as a cloud of animated points, with each point moving in a sinusoidal pattern to create a lively, shimmering effect. It uses the p5.js `font.textToPoints()` API to convert the text into a point cloud, sampling a Public Sans font loaded via `loadFont()`. The animation is driven by updating a global angle variable in the `draw()` loop, applying per-point offsets to the x and y coordinates. The points are drawn as individual strokes on a 1500x800 canvas with a light gray background.

Sep 13, 2025

Loading thumbnail…

Vega-Lite Scatterplot

This scatterplot visualizes automotive data, mapping miles per gallon and horsepower for individual cars, with the vehicles' country of origin (USA, Europe, or Japan) indicated by color. Built with the Vega-Lite API, the chart uses `markCircle()` for points and `encode()` with `fieldQ()` and `fieldN()` to bind quantitative axes and the categorical color channel. It loads the Auto MPG dataset from a CSV via `d3.csv`, converts string values to numbers, and renders the final result as an SVG through a Vega View.

Sep 11, 2025

Loading thumbnail…

Fork of Circles with D3

This example presents a static scatterplot-like arrangement of 14 colored circles on a 960 by 500 SVG canvas. Each circle is positioned using explicit `cx`, `cy`, and `r` attributes, with a distinct hexadecimal fill color. The code uses D3 v7’s data join pattern (`selectAll`, `data`, `join`) within a reusable `renderCircles` function, binding the `circlesData` array to SVG `<circle>` elements. The visualization directly renders this hardcoded dataset without any interaction or animation, demonstrating a clean, minimal approach to data binding and attribute assignment.

Sep 6, 2025

Loading thumbnail…

Constructing Visualizations 2025 workspace

This example demonstrates a minimal HTML starter workspace with a centered greeting message. The page renders large text using plain CSS styling, while the JavaScript file logs a simple console message upon load. The visualization uses no external libraries, relying solely on native HTML, CSS, and JavaScript to display its static content.

Sep 6, 2025