Skip to main content
Log in
C

CasualWanderer20XX

@Noviphyte-Wanderer·35 public vizzes

Loading thumbnail…

Basic Kinematic Graph and Tables

This example visualizes the position of an object over time with a scatter plot of data points connected by either straight lines or arrowheads, toggled via a dropdown menu. Built with React and D3.js, the SVG graph uses `scaleLinear` for axes and `axisBottom`/`axisLeft` for ticks. The line style changes dynamically by redrawing paths, with arrows computed using trigonometry from the mathjs library. The visualization includes position and velocity data tables alongside the graph.

Dec 6, 2025
Loading thumbnail…

Creeper Head Project Test

A CSS art project renders a pixelated creeper head from Minecraft against a gradient sky, with interactive buttons cycling through twelve day and sunset lighting states. The drawing uses layered HTML `<div>` elements with CSS `linear-gradient` and `radial-gradient` backgrounds for the sky, sun, head, neck, and ocean. JavaScript updates CSS custom properties on the `:root` element to switch between color palettes, while masks and box shadows simulate lighting effects on the character's face.

Oct 19, 2025
Loading thumbnail…

Testing D3.geoPath / D3.path

This example tests the D3.js v7 `geoPath` and `path` APIs by rendering an empty, full-window SVG with a black border. The code creates an SVG container sized to the browser viewport and uses `d3.select` and `append` to add it to the body. No geographic data is loaded or drawn, so the visualization demonstrates only the setup and styling of the SVG canvas.

Oct 1, 2025
Loading thumbnail…

fCC D3 Project #3: Heat Map Project

This heat map visualizes global land temperatures from 1753 to 2015, with each cell representing a month-year combination colored by its deviation from a baseline of 8.66°C. The SVG rendering uses D3.js scales for axes and color mapping, fetching data from freeCodeCamp’s GitHub repository. Tooltips and a legend are implemented to show exact values on hover, while the color gradient divides temperature ranges into nine discrete categories via a custom `applyColor` function.

Sep 29, 2025
Loading thumbnail…

fCC D3 Project #2: Scatterplot Graph

This scatterplot visualizes the performance of professional cyclists, plotting race times against years. The time to complete the course is mapped on the y-axis using a time scale, while the x-axis uses a linear scale for the year. The graph distinguishes between riders with doping allegations in blue and those without in red, and includes a legend for clarity. Data is fetched from the freeCodeCamp cyclist-data.json. The visualization is built with D3.js (version 7.9.0), using the `scaleTime` and `scaleLinear` APIs, and renders an SVG with tooltips that display rider details on hover.

Sep 20, 2025
Loading thumbnail…

Making a TItle on the Scatterplot

This example displays the classic Iris dataset as a scatterplot, mapping petal width to the horizontal axis and sepal width to the vertical axis. Each data point is rendered as an SVG circle with a tooltip showing its coordinate values. The code uses d3.csv for data loading, d3.scaleLinear for mapping data to pixel coordinates, and d3.axisBottom and d3.axisLeft for the chart axes, all within an SVG created by d3.select.

Sep 19, 2025
Loading thumbnail…

D3 Scatterplot Viz (D3 Tutorial)

A D3.js scatterplot visualizes the Iris dataset, mapping petal width on the x-axis and sepal width on the y-axis. Each of the 150 data points is rendered as a circle in an SVG canvas that fills the browser window. The code uses `d3.csv` to load the data, `scaleLinear` and `extent` to compute scales, and `axisLeft` and `axisBottom` to draw the axes. The visualization demonstrates a minimal, full-screen scatterplot with no color encoding or labels beyond the axes.

Sep 19, 2025
Loading thumbnail…

Music Store Project

This music store mockup displays a catalog of four fictional songs as interactive product cards. Each card shows an album image, song title, artist, genre, duration, and price. React renders the song data from an in-file array via the `App.jsx` component and custom `Header` and `Items` components. The interface includes responsive hover effects, an active click state, and a gopher mascot illustration, all styled with CSS using flexbox, Google Fonts, and the `index.css` file.

Sep 17, 2025
Loading thumbnail…

D3 Tutotial Video 5 Viz Project #1: Hammer Dodge/Goren Hammer (SASUKE)

This example shows a set of gray hammer-like shapes swinging from a fixed point, with each hammer rotating back and forth at varying angles and speeds. The animation uses D3 v7 with an SVG rendering approach, where `setInterval` drives a 60fps update loop, passing time-based data to a custom `vizData` function. The code generates five hammers from a `makeData` function that uses `Math.sin` to compute rotation transforms, and appends rectangles and circles to group elements within the SVG canvas.

Sep 15, 2025
Loading thumbnail…

D3 Tutotial Video 5 Viz Project #2: Wavy Bars

Animated wavy bars fill the browser window, with each bar's height, vertical position, and opacity oscillating over time to form a flowing wave pattern. The visualization runs a continuous animation loop, updating every 60th of a second using JavaScript's `setInterval`. The D3 library's `select`, `selectAll`, and `join` methods bind data to SVG `rect` elements, while a custom `makeData` function generates the wave values using trigonometric sine functions. The bars animate across the full viewport width, with D3 7.9.0 handling all rendering and data updates.

Sep 13, 2025
Loading thumbnail…

Fork of D3 Tutotial Video 5 Viz (adding modules)

A circular swarm of 15 dots orbits a central point, with each dot’s opacity oscillating between transparent and fully opaque as the animation updates 60 times per second. The visualization uses D3 7.9.0’s `select`, `range`, and `selectAll` APIs to render SVG circles, with position and opacity derived from sine and cosine functions of an incrementing time parameter. Data is generated procedurally in `makeData` and passed to the `vizData` renderer, which updates circle attributes via D3’s join operation.

Sep 12, 2025
Loading thumbnail…

D3 Tutotial Video 5 Viz (using functions to separate code)

Fifteen circles orbit in a smooth, looping dance, their opacity pulsing in a rhythmic wave as they trace overlapping circular paths. The animation is generated using D3 v7, with the `select` and `range` functions creating and updating SVG circle elements. Position and opacity values for each frame are computed from trigonometric functions based on an incrementing time variable, with data binding handled through `.data()` and `.join()`. The visualization runs on a fixed 60 FPS interval, showcasing a simple procedural approach to generative animation.

Sep 12, 2025
Loading thumbnail…

D3 Tutotial Video 5 Viz

A pulsing ring of fifteen translucent circles animates in a looping orbit around a central point. The visualization demonstrates D3.js’s declarative join operation, where each frame’s data array maps to circle positions and opacity values derived from trigonometric functions. Using `selectAll('circle').data(data).join('circle')`, the code updates circle attributes at 60 frames per second through `setInterval`, with a time variable `t` incrementing to drive continuous motion. The SVG rendering fills the browser window, showcasing dynamic, data-driven animation without user interaction.

Sep 12, 2025
Loading thumbnail…

Sol Lewitt with D3 Project (from Scratch)

This example recreates Sol LeWitt’s geometric wall drawings using D3.js, rendering a dense grid of thin vertical and horizontal lines across the full browser window. Two opposing masks, each containing five distinct symbols from D3’s `symbol` API, selectively hide or expose portions of the line grid, creating overlapping, patterned regions. The visualization uses `d3.select`, `range`, and `join` to generate 120 rectangles in each orientation, with SVG masks applied via `mask.append` and `attr('mask', ...)`. The result is a digital homage that blends generative code with minimalist art.

Sep 11, 2025
Loading thumbnail…

Sol Lewitt Project in D3 Attempt #1 (using data & d3-shape)

This work uses generative shapes drawn with d3-shape’s `symbol` and `symbols` to create large mask patterns. Vertical and horizontal bands of rectangles are clipped via two SVG masks arranged over a full-window canvas, each mask containing a row of distinct symbols laid along the center line. The render uses D3.js 7.9.0 for selections, joins, and attribute updates.

Sep 10, 2025
Loading thumbnail…

Sol Lewitt Project in D3 Attempt #2

This D3.js (v7.9.0) visualization recreates a Sol LeWitt-inspired wall drawing using two perpendicular sets of vertical and horizontal strips. Each set is masked by a distinct pattern, with one mask inverted relative to the other, creating an interlocking grid of geometric symbols. The SVG output is rendered directly to the browser window, using D3’s selection, symbol, and mask APIs to compose the overlapping forms. The code employs `d3.select`, `d3.range`, `d3.symbol`, and mask definitions to generate the alternating shapes at fixed intervals.

Sep 10, 2025
Loading thumbnail…

Sol Lewitt Project in D3 Attempt #1 (d3-shape & function block)

A generative SVG composition draws on Sol Lewitt's geometric wall drawings, using striped vertical and horizontal bands overlaid with a central symbol. The code employs D3 v3's `select`, `range`, and `join` to create rect grids, while `d3.symbol` and `symbols[6]` define a star-shaped path. Function blocks `renderMask` apply inverted and normal SVG masks, combining the shapes to produce layered, intersecting patterns across the full viewport.

Sep 9, 2025
Loading thumbnail…

Sol Lewitt Project in D3 Attempt #1 (using enter method)

This example renders a grid of vertical and horizontal bars overlaid with two circular masks, creating a crosshatch pattern that fades within a central circle. It uses D3 v7’s `select`, `range`, and the enter method to append SVG rectangles, while defining masks with `circle` and `rect` elements to control visibility. The code draws 100 vertical and 100 horizontal strips, each masked to reveal only the intersecting circular regions. The visualization demonstrates a geometric generative composition inspired by Sol Lewitt, rendered entirely with SVG.

Sep 9, 2025
Loading thumbnail…

Sol Lewitt Project in D3 Attempt #1 (group method)

This D3.js (v7.9.0) example constructs an SVG composition inspired by Sol LeWitt's geometric art. It draws a grid of vertical and horizontal stripes, each set masked by overlapping circles centered on the canvas. The first group of vertical rectangles is clipped by a circular mask, while the second group of horizontal rectangles is clipped by an inverse mask, revealing a cross-like pattern. The project uses D3's `select`, `append`, `range`, and the `.join()` API to build the SVG elements programmatically.

Sep 9, 2025
Loading thumbnail…

Sol Lewitt Project in D3 Attempt #1

This D3.js example uses SVG masks to create an abstract composition inspired by Sol LeWitt’s wall drawings. Vertical and horizontal striped rectangles, generated with `d3.range` and `d3.select().join()`, are each partially revealed through circular masks defined with `mask` elements. Two distinct mask configurations alternate the visual prominence of the stripes, producing a dynamic interplay of lines and negative space across the full browser viewport. The rendering is purely algorithmic, with no external data source.

Sep 9, 2025
Loading thumbnail…

Sol LeWitt Attempt #5 Vanilla JS (Pattern #2)

This example recreates a Sol LeWitt wall drawing using two layered masks to generate a grid of repeated geometric patterns. The SVG renders alternating vertical and horizontal stripes, where each stripe is clipped by a hexagon-based mask created with nested polygons. The code uses raw Document Object Model (DOM) methods like `document.createElementNS` to build the SVG structure, with no external libraries. The pattern emerges from the intersection of the two masks, producing a dynamic optical effect across the 1000 by 700 pixel canvas.

Sep 9, 2025
Loading thumbnail…

Sol LeWitt Attempt #5 Vanilla JS (Pattern #1)

This example generates an SVG composition inspired by Sol LeWitt's geometric wall drawings, using two masks to create an intersecting grid of vertical and horizontal stripes. The code builds a hexagonal pattern with `document.createElementNS` for SVG elements, applying `mask-1` and `mask-2` to 50 vertical and 50 horizontal rectangles. The masks are constructed from repeated polygon coordinates, producing a checkerboard-like overlay of alternating shapes. No external libraries are used; the rendering relies entirely on vanilla JavaScript and SVG masks to achieve the Op Art effect.

Sep 9, 2025
Loading thumbnail…

Sol LeWitt Attempt #5 Vanilla JS

This example generates an abstract geometric composition inspired by Sol LeWitt, built with vanilla JavaScript and the SVG API. It uses two SVG masks to create a pattern of interlocking diamond shapes from a grid of polygons. Fifty vertical and fifty horizontal rectangles are drawn, each masked to reveal or hide portions of the grid, producing a layered, woven effect. The code demonstrates manual SVG element creation via `document.createElementNS`, with no external libraries.

Sep 9, 2025
Loading thumbnail…

Fork of Sol Lewitt in Vanilla JS Project Attempt #1 (Finishing up)

This example shows a geometric composition of concentric rectangles that shrink toward the center of an SVG canvas, with a visible mask creating a hollow square hole in the middle. The rectangles are generated in a JavaScript while loop, using the SVG DOM API to create mask elements and rect elements dynamically. The code sets stroke widths and border increments to space each rectangle, while the mask, defined with white and black fill regions, determines which parts of the rectangles remain visible. The result is a minimalist, grid-like pattern inspired by Sol LeWitt, rendered entirely in SVG.

Sep 9, 2025
Loading thumbnail…

Sol LeWitt Attempt #3 Vanilla JS

This example renders an abstract geometric composition inspired by Sol LeWitt’s wall drawings, built with vanilla JavaScript and the SVG API. It shows a 1000×700 canvas filled with alternating vertical and horizontal stripes that appear to weave through a central hourglass-like polygon shape. Two SVG masks define the visible regions: the first mask applies to 50 vertical red stripes, the second to 50 horizontal red stripes, creating a layered visual effect where the pattern changes orientation within the polygon. The code constructs the SVG elements dynamically using `createElementNS`, with mask polygons and stripe rectangles, demonstrating a low-level approach without external libraries.

Sep 9, 2025
Loading thumbnail…

Sol Lewitt Vanilla JS Project Attempt #2

This example generates an interactive Sol LeWitt-inspired drawing using only native JavaScript and SVG APIs, without external libraries. It shows a grid of thin horizontal and vertical lines across the full browser viewport, masked by two circles at the center. The first mask reveals horizontal bars within a dark circle, while the second mask inverts the effect for vertical bars in a contrasting ring, creating a crosshatched circular pattern that stands out against the plain background. The code creates elements dynamically via `document.createElementNS` and applies masks (`circle-mask`, `circle-mask-2`) to clip the repeated rectangles.

Sep 8, 2025
Loading thumbnail…

Sol Lewitt in Vanilla JS Project Attempt #1

This example recreates a Sol Lewitt-inspired geometric drawing using nested, alternating black-and-white rectangles that shrink toward the center of an SVG canvas. The work is generated entirely with vanilla JavaScript, manipulating SVG elements through the Document Object Model (DOM) and the `createElementNS` API. It renders a grid of concentric rectangles with varying stroke widths and fill colors, producing a static, pattern-based composition. The code uses raw SVG string concatenation within a loop to build the shapes, with no external libraries or data sources involved.

Sep 8, 2025
Loading thumbnail…

SVG Paths Practice: Symbols

This example demonstrates hand-crafted SVG symbols, presenting both Japanese Hiragana characters and stylized English block letters as single-line vector drawings. The rendering relies entirely on inline SVG `path` elements, with coordinates specified using relative and shorthand `d` commands to define each character's stroke. Styling is applied via CSS classes, with stroke widths differentiating the thicker Japanese glyphs from the thinner English set. While the JavaScript file exists only as a placeholder, the visualization shows how raw path data and straightforward CSS can produce compact, customizable typographic forms without external libraries.

Aug 30, 2025
Loading thumbnail…

Pseudo Visualizations #2: Mock Boxplot

The visualization presents a mock boxplot, explicitly intended for chart-creation practice rather than statistical accuracy. It draws a black-and-white chart on a gray background using raw Scalable Vector Graphics (SVG) primitives defined directly in the HTML. The code constructs axis lines, a complex filled path for the data distribution, and an overlaid boxplot trace, all rendered within an `svg` element using a `viewBox` of 480 by 360. The example demonstrates how to hand-code geometric shapes without any external plotting or charting libraries.

Aug 12, 2025
Loading thumbnail…

Pseudo Visualization: Scatterplot + Linear Correlation

A minimal static scatterplot displays ten gray circles on a white background with black axes, and a single black arrow labeled with a curved path that points from the plot area toward an arrow icon. The visualization is rendered entirely in inline SVG within an HTML file, using no JavaScript libraries—the accompanying script only logs "hello world". The arrow appears to suggest a linear correlation direction, though no data points are encoded with quantitative values, and the duplicate circle coordinates show identical positions for three points.

Aug 12, 2025
Loading thumbnail…

SVG Import from Figma (Note. This isn't an actual brand. It's just practice.)

This practice visualization imports a static SVG layout from Figma, displaying a minimalist chart with a single data line and a masked area, all set on a clean white-and-gray background. The SVG is embedded directly in the HTML document using the standard SVG namespace and includes a `<mask>` element to define a clipped region within the graphic. The rendering relies entirely on the inline SVG markup with vector paths and rectangles, without any external JavaScript libraries or data-processing APIs. The example serves as a technical exercise in hand-coded SVG structure and hierarchy, rather than a dynamic or interactive data-driven project.

Aug 9, 2025
Loading thumbnail…

SVG Fundamentals Project: Warped Wall

This example demonstrates the rendering of warped and distorted geometric shapes using SVG path data. The visualization draws a combination of filled and stroked paths, including curved arcs, rectangular forms, and a curved line, on a gradient background. The code uses native inline SVG elements within an HTML file, defining paths with commands like `A` (arc), `h`/`v` (horizontal/vertical lines), and `c` (cubic Bézier curves). The SVG is styled through the `styles.css` file, which sets the page background and layout, while `index.js` merely logs 'hello world' without affecting the visual output.

Aug 8, 2025
Loading thumbnail…

React Test (NW)

This React test example demonstrates interactive UI components built with React 18 and ReactDOM, featuring a simple task list, a form that captures and displays user input, and a button that reports mouse hover and click states. It also includes a counter with plus and minus buttons that update a circular display. The code uses React’s `useState` hook for state management and event handlers like `onClick` and `onMouseOver`. The styling is defined in CSS, and the React components are rendered into a root div.

Aug 5, 2025
Loading thumbnail…

Fork of HTML Starter (First Viz)

A minimal HTML starter page demonstrates basic SVG shape rendering. The visualization displays a blue rectangle and a black circle positioned on an empty canvas, created using native SVG elements within an inline `<svg>` tag. The page includes a heading and relies on plain HTML structure, with JavaScript limited to a console log and CSS providing minimal styling. No external libraries or data sources are used, showcasing fundamental SVG markup as a foundation for future interactive visualizations.

Aug 4, 2025
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal D3.js starter template that renders a static "Hello HTML!" message inside a container div. It showcases a reusable `renderMessage` function using D3’s data join pattern, where `selectAll`, `data`, `enter`, `append`, and `merge` create or update a message element idempotently. The text is styled via CSS at 13em, centered, while the module imports the full D3 library and selects the `#container` element. The code highlights a clean pattern for idempotent updates without any dynamic data or interaction.

Aug 4, 2025