cardoza-IPH

Animated Scatterplot with Menus

This example visualizes the Iris dataset as an animated scatterplot where users can select which columns to plot on the x- and y-axes via dropdown menus. Built with React and D3 v6, it uses `d3.csv` for data loading, `scaleLinear` and `scalePoint` for axes, and SVG circles rendered through a reusable `scatterPlot` component. Transitions animate point positions over 1000ms with staggered delays, while `d3.dispatch` handles menu change events to update the visualization dynamically.

Animated Reusable D3 Scatterplot

This example presents an animated scatterplot of Fisher’s Iris dataset, cycling through four measured attributes on the x-axis while sepal length remains fixed on the y-axis. Built with React and D3 v6, it uses reusable chart components via the `scatterPlot` factory function, SVG rendering, and `d3.transition` with staggered delays for smooth point movement. The code updates the x-scale and axes every five seconds using `setInterval`, demonstrating dynamic data binding and enter-update-exit patterns with animated, reordering circles.

D3 Reusable Charts

This example demonstrates a reusable scatter plot component built with D3 v6 that cycles through different iris flower measurements every two seconds. The visualization uses the classic Iris dataset loaded from a GitHub gist, with sepal length plotted on the y-axis while the x-axis rotates through sepal length, petal length, sepal width, and petal width. The scatterPlot function exposes chainable setter methods for configuring dimensions, margins, data accessors, and point radius, while the main script uses D3’s `select`, `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs to render the SVG with animated transitions.

Reusable D3 Scatterplot w/ symbols

This example shows a reusable scatterplot rendered with SVG that maps iris flower measurements—petal length against sepal length—using distinct D3 symbols to differentiate species. The chart includes axes, labels, and a legend-free encoding of the categorical species variable through symbol shapes. Built with React and D3 v3, the code defines a configurable `scatterPlot` function using `scaleLinear`, `scaleOrdinal`, `symbols`, and `symbol` to generate paths. Data is loaded asynchronously from a CSV using `d3.csv`, with numeric parsing applied to the measurement columns.

D3 Initial Hist Test

This example displays an attempt at a bar chart using D3 v6, loading sensor data from a CSV file hosted on GitHub. The code imports `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from D3, then renders an SVG that fills the browser viewport. It maps timestamp and value fields to band and linear scales, drawing rectangles for each data point along with axes, though the data fields referenced do not align with the parsed columns. The visualization is built within a React project but uses plain DOM selection for rendering.

D3 Initial Hist

This example presents an initial histogram of the Iris dataset, plotting sepal and petal measurements as a scatter plot. The code loads CSV data from a GitHub gist and renders SVG circles using React and D3 v6, with `scaleLinear` mapping dimensions and `axisLeft`/`axisBottom` for scales. Although the visualization calls the `scatterPlot` component, the display is incomplete, showing only an empty transformed group rather than the full chart. The design uses a margin-based layout and D3’s data join pattern for potential circle rendering.

D3 Scatter Plot w/ other data set

This scatter plot displays the relationship between temperature and humidity using data from the Sense Your City dataset, which is loaded via a CSV URL. Each circle represents a data point, with position mapped along the x-axis for temperature and y-axis for humidity. The visualization leverages D3 v6.7.0 within a React environment, using `scaleLinear` and `axisLeft`/`axisBottom` from D3 to construct the plot, rendering circles as SVG elements. The margins are defined, and the plot area spans the full window dimensions.

D3 Scatter Plot

This D3 scatter plot visualizes the Iris flower dataset, plotting petal length against sepal length for each sample as circles in an SVG rendered with React. The code uses d3.csv to load and parse the data, d3.scaleLinear to map values to screen coordinates, and d3.axisLeft and d3.axisBottom to display the y- and x-axes. The visualization updates the browser window dimensions dynamically and demonstrates a straightforward data-to-mark binding pattern with d3.selectAll and .join.

JS in HTML

This example shows a minimal HTML page that combines CSS styling with a JavaScript-loaded message. The page displays the text “Hello HTML!” centered and scaled to a large font size using a CSS class. The styling is defined in a `<style>` block, while the message content lives in a `<div>` element within the body. No external JavaScript libraries or APIs are used; it relies purely on native HTML, CSS, and the browser’s default rendering behavior.

D3 Selection Exploration

This example demonstrates how D3 selection joins can manage dynamic datasets, showing circles that move and change radius over time as new data points are generated at intervals. The visualization uses a line generator to connect the current positions of these circles, creating a path that updates with each data refresh. The code relies on D3's selection and join APIs to add, update, and remove SVG circle elements, while the line path is drawn using D3's line generator. Data is synthesized programmatically, with positions varying according to trigonometric functions based on a time parameter.

Initial Data Plot

A simple bar chart displays the ages of 16 fictional people, each bar labeled by its index and scaled so its height represents the person's age. The visualization uses D3 v6 to bind the data array to SVG `rect` elements, setting each rectangle's width, x-position, and y-position based on the person's number and age. The bars are filled orange with black strokes, laid out across the full browser window. The code defines an object with a hover-triggered tooltip, though this behavior is not fully wired to the bars.

JS Arrays

An animated scatter of sine-driven circles demonstrates D3’s data join with `selection.join`. The number of circles oscillates as the array length changes, while each circle’s x-position increments by 50 pixels and the y-position follows a sine wave. The SVG viewport resizes to the window, and the animation updates every 10 milliseconds. Using `d3.range` and `Math.sin`, the code smoothly re-enters, updates, and exits circles, showcasing D3 v3’s reactive data binding and the concise `join` API.

Reorient Exercise of Full Sol LeWitt Reproduction with D3

D3 v6 draws a grid of vertical and horizontal stripes in seven SVG panels, each with a different mask revealing a circular hole or overlapping shapes. The code uses `select`, `append`, `range`, and `symbol` to build alternating inverted masks, rendering black and white line patterns that reorient a Sol LeWitt reproduction across a full-viewport canvas.

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 to generate overlapping striped rectangles and symbol-based masks. The visualization shows a grid of horizontal and vertical bars filtered through two inverted mask layers, each containing a row of D3’s built-in symbol shapes (circles, crosses, diamonds, squares, stars, triangles, and wye). The code uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to construct SVG elements dynamically, rendering directly into the browser window with no external data source.

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric drawing using D3 and SVG. It renders two sets of alternating horizontal and vertical rectangles that cover the full viewport, with each set clipped by a mask. The masks combine a white or black background with a large diamond-shaped symbol path, creating a starburst effect where the grid lines are selectively revealed. The code uses D3’s `select`, `range`, `symbol`, and `symbols` APIs, with SVG `<g>` groups and `mask` elements. The drawing is generated dynamically to match the browser window’s dimensions.

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js. It renders a grid of horizontal and vertical stripes that are visible only within two circular masks, creating an interlocking pattern. The code uses D3’s `select`, `append`, and `join` APIs to construct SVG elements, and `range` to generate the stripe positions based on the window size. The visualization dynamically adapts to the browser viewport dimensions.

Sep 21, 2022

Sol LeWitt Reproduction

This example reproduces the geometric style of Sol LeWitt using overlapping horizontal and vertical stripes. A central circular mask reveals the intersection pattern where the two sets of rectangles meet, creating a woven visual effect. The visualization is built with raw SVG elements, including two distinct `<mask>` definitions, and is rendered dynamically in a browser using JavaScript. The code programmatically generates all rectangles in loops, with the masks controlling visibility to achieve the final composition without external libraries.

Sep 21, 2022