Skip to main content
Log in
B

bjfmbeck

@bjfmbeck·20 public vizzes

Loading thumbnail…

Solitaire

A solitaire pegboard game rendered as an SVG using D3 version 6, where players click brown pegs to select them and then click highlighted purple target positions to jump and remove pegs. The board is a 9x9 grid with a cross-shaped play area, and the scoreboard displays the remaining pegs. The code uses D3’s `scaleLinear`, `selectAll`/`data` joins, and event handlers for click interactions, with a restart button and a "GAME OVER" message when no legal moves remain.

Mar 16, 2023
Loading thumbnail…

Animated reusable D3 scatter plot

This interactive scatter plot visualizes the classic Iris dataset, showing how different flower measurements relate to each other. The visualization cycles through four different x-axis dimensions—petal width, sepal width, petal length, and sepal length—every five seconds. It uses a reusable D3 component pattern with the `scatterPlot` function, leveraging D3's `scaleLinear` for axes, `transition` for animated updates, and the `.join()` operation for efficient circle insertion, updating, and removal. The data loads asynchronously via `d3.csv`.

Mar 15, 2023
Loading thumbnail…

Reusable D3 scatter plot

This example presents an interactive scatter plot of the classic Iris flower dataset, using SVG circles to visualize relationships between different measurements like petal length and sepal length. Built with React and D3 v3, the visualization cycles through four data columns every two seconds, smoothly animating the transition of points across axes via D3’s `transition.attr` method. The reusable `scatterPlot` function leverages D3 scales (`scaleLinear`), axes (`axisLeft`, `axisBottom`), and data joins to dynamically update the visualization. The code loads data from a remote CSV using `d3.csv` and adapts to the browser viewport dimensions.

Mar 15, 2023
Loading thumbnail…

Reusable D3 scatter plot with symbols

This example demonstrates a reusable scatter plot component built with D3 and React, visualizing the classic Iris dataset by mapping petal length and sepal length to the x and y axes. It uses `scaleLinear` and `extent` for axis scaling, and `scaleOrdinal` to assign distinct symbols to each species. The plot is rendered as SVG, with data loaded asynchronously via `csv` and the chart configured through a fluent, method-chaining interface. Axis labels and tick marks are generated using `axisLeft` and `axisBottom`.

Mar 14, 2023
Loading thumbnail…

Toggle test

This example demonstrates an interactive bar chart where colored squares can be toggled on and off by clicking on corresponding circles below the chart. The visualization uses D3's `select` and `.join` operations to efficiently update the SVG elements, with a `transition()` on rectangle attributes for smooth animations. The data is a static array of colored bars, and the toggle function adds or removes items from the selected dataset before re-rendering the chart. The rendering uses SVG with full viewport dimensions.

Mar 12, 2023
Loading thumbnail…

Reusable chart

This interactive scatter plot visualizes the Iris flower dataset, mapping petal length against sepal length with points colored by species. The visualization is built using React and D3, employing a reusable chart pattern where a `scatterPlot` function generates the SVG rendering. The code uses D3's `csv` loader to fetch data, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for tick marks. The chart connects D3 data joins with CSS classes for species-based color coding, demonstrating a modular approach to building configurable visualizations in React.

Mar 9, 2023
Loading thumbnail…

Fork of D3 selections

A dynamic swarm of circles fills the screen, with each circle's position and size oscillating smoothly over time based on a sine wave. The visualization demonstrates D3's data join pattern using `selectAll`, `data`, and `join` to efficiently update the SVG elements every millisecond. Built with React, it uses D3's `range` and custom `makeData` and `vizData` functions to generate coordinates and radii from the current time step. The animation runs continuously via `setInterval`, rendering synchronized, wave-like patterns across the viewport.

Mar 9, 2023
Loading thumbnail…

scatterplot

This example visualizes the Iris dataset as a scatterplot, mapping petal length along the x-axis and sepal length along the y-axis. Points are colored by species through CSS classes, with setosa in yellow, versicolor in red, and virginica in pink. The visualization uses D3 v7 APIs including `csv` for data loading, `scaleLinear` for scaling, `axisLeft` and `axisBottom` for axes, and SVG circles rendered by `selectAll().data().join()`. The chart fills the browser window and is built with a React-friendly plain JavaScript approach.

Mar 9, 2023
Loading thumbnail…

JavaScript Arrays

This example visualizes a dynamic sine wave as a shifting field of circles, whose count and vertical positions oscillate continuously over time. Built with React and rendered as animated SVG, it uses D3’s `select`, `range`, and data join (`join('circle')`) to update circle positions every 10 milliseconds based on a time variable. The number of circles fluctuates between 0 and 200, while each circle’s y-coordinate follows a sine function that creates a flowing, wave-like motion across the screen.

Mar 8, 2023
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with d3

This example reproduces a Sol LeWitt-style grid of black horizontal and vertical bars, using d3-selection, d3-range, and d3-symbol to generate rectangular stripes overlaid with circular and triangular mask shapes. The SVG rendering creates 100 vertical and 100 horizontal rectangles, each masked by a different pattern of d3 symbols, producing a layered geometric composition. The two masks alternate inverted fills to control which stripes remain visible, resulting in a dynamic interplay of line and shape across the full window.

Mar 8, 2023
Loading thumbnail…

Full Sol LeWitt Reproduction with d3

This piece reproduces a Sol LeWitt art work as a full-screen SVG using D3.js version 6.6.1. It shows a grid of overlapping black vertical and horizontal bars, which are created by appending `rect` elements to two groups, each masked to partially hide the lines. The `renderMask` function uses D3’s `symbol` and `symbols` API to draw a large circular path within each mask, with inverted fill colors to selectively reveal or conceal the grid, producing a dynamic, layered composition without user interaction.

Mar 8, 2023
Loading thumbnail…

Sol LeWitt Reproduction with d3

This example reproduces a Sol LeWitt art piece using d3.js. It displays a grid of horizontal and vertical black and red stripes, which are masked to create a circular viewing area in the center. The vertical stripe group is rotated 20 degrees around the center. The code uses d3 `select`, `range`, and `join` operations to generate SVG `rect` elements, and defines two SVG masks (`circle-mask` and `circle-mask-2`) to control visibility. Hovering changes stripe colors.

Mar 8, 2023
Loading thumbnail…

Sol LeWitt Reproduction

The piece reproduces a Sol LeWitt drawing as an interactive SVG, showing a large circular area filled with dense vertical and horizontal bars that shift in orientation. The rendering stacks black grid lines across the full canvas, then applies an SVG mask to reveal only the bars inside the circle’s boundary. The circle is then rotated via an SVG transform, with the mask defined in the `http://www.w3.org/2000/svg` namespace. All geometry is computed from the browser’s window dimensions, and the artwork is generated entirely through the DOM API (`createElementNS`, `setAttribute`).

Mar 8, 2023
Loading thumbnail…

Pseudo scatter plot

This pseudo scatter plot approximates a traditional scatter plot using horizontal bar rectangles as visual substitutes for data points, with labels A through E marking categorical rows. The SVG visualization emphasizes hover interaction, turning bars red when the mouse passes over them. The code relies on raw SVG elements—rect, text, and hover states via CSS—rather than JavaScript libraries or data-binding frameworks. Purple horizontal bars of varying widths suggest proportional values, while commented-out circles and vertical bars hint at alternative design explorations. The page sets a bold, tech-inspired font and hides the body margin for an immersive full-viewport rendering.

Mar 8, 2023
Loading thumbnail…

Pseudo line chart

A pseudo line chart approximates a scatter plot by drawing a single thick black polyline through five points across an SVG canvas. The path uses stroke-linecap and stroke-linejoin for rounded corners, with no underlying data points or axes. Rendered via raw SVG markup, the code defines a path element with explicit coordinate pairs (e.g., M4.5 131.5L237.5 269) and relies on styles.css for purple bars and red circles that are not present in the HTML. The chart employs Google Fonts' Share Tech typeface, though no text or additional elements appear.

Mar 8, 2023
Loading thumbnail…

Loading and parsing csv data

This example demonstrates how to load and parse CSV data using D3.js, displaying a summary of the dataset in a large preformatted text element. The visualization shows the number of rows, columns, and file size in kilobytes for a dataset of CSS named colors fetched from a GitHub gist. The code uses the `d3.csv` method to asynchronously fetch and parse the remote CSV file, then counts rows via `data.length`, columns via `data.columns.length`, and computes the approximate file size with `d3.csvFormat` and `Math.round`. Alternative fetching with `fetch` and `d3.csvParse` appears in a commented section.

Mar 6, 2023
Loading thumbnail…

Mouse Follower

A red circle follows the mouse cursor across an SVG canvas, with its position updating in real time. Built with React and D3 v7, the visualization uses React's `useState` and `useCallback` hooks to track mouse coordinates on a dedicated SVG `onMouseMove` event handler. ReactDOM renders the SVG, and the circle's `cx` and `cy` attributes update live as the pointer moves.

Mar 6, 2023
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays a simple text summary of a CSV file containing CSS named colors, showing the file size in kilobytes, the number of rows, and the number of columns. The code loads the remote CSV using the `d3.csv` method within D3 v5, which returns a promise, and then uses `d3.csvFormat` to calculate the data length. It also includes commented-out alternatives using the Fetch API with async/await and `d3.csvParse`, as well as a nested-promise "pyramid of doom" approach, demonstrating different ways to handle asynchronous data loading in a React-based project.

Mar 3, 2023
Loading thumbnail…

secondFork

Eight stylized faces overlap in a rotating grid, each built from yellow background circles, white eyes with black pupils, and D3 arc-based mouths. The pupils jitter independently using `Date.now()` trigonometry, while eye radius and offset vary via `Math.random()`. React components compose the SVG structure, with `d3.arc()` shaping the mouth paths and the `FaceContainer` applying translations and rotations.

Feb 28, 2023
Loading thumbnail…

Fork of Hello HTML

This example renders a stylized smiley face using React and D3.js v7, with SVG circles forming the head, eyes, and mouth. The face is centered and rotated slightly, while the pupils animate by computing their positions using `Date.now()` within the JSX, shifting along circular paths. The mouth is drawn using a D3 arc generator (`d3.arc`) with inner and outer radii, transformed and scaled vertically. The code demonstrates integrating React state-free rendering with D3 shape helpers for a simple, animated SVG composition.

Feb 28, 2023