Aaron

Fork of Interactive Stacked Bar Chart

Reusable D3 Scatter Plot

This scatter plot visualizes the Iris flower dataset, mapping petal length against sepal length. The D3.js code loads the data via `d3.csv` from a Gist URL, then uses a custom `scatterPlot` function. The chart creates a reusable component with settable `width` and `height` properties, rendered as SVG circles. Linear scales via `d3.scaleLinear` position the marks, while `d3.axisLeft` and `d3.axisBottom` add labeled axes with a margin-based layout, all drawn within a full-window SVG.

D3 Scatter Plot

This example displays the classic Iris dataset as an interactive scatter plot, mapping petal length on the x-axis and sepal length on the y-axis to reveal patterns across the flower samples. The visualization uses D3 v6’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs to construct axes and render circles in SVG, with data loaded asynchronously via `d3.csv` from a GitHub gist. The plot fills the entire browser window, using a simple margin-based layout and a fixed point radius to represent each data point.

Fork of D3 Scatter Plot

A fork of the classic D3 scatter plot, this example visualizes the Iris dataset by mapping petal length to the x-axis and sepal length to the y-axis. It uses d3.csv to load and parse the data, with d3.scaleLinear and d3.extent for scaling, and d3.axisLeft and d3.axisBottom for the axes. Circles are appended to an SVG via d3.selectAll and data joins. The chart fills the entire browser window, with a fixed radius of 5 pixels for each point. The code relies on d3 v6.

Fork of D3 Scatter Plot

This example visualizes the classic Iris dataset as a scatter plot, mapping petal length to the x-axis and sepal length to the y-axis using a linear scale. It loads the CSV data via `d3.csv`, parses numeric fields, and renders circles as SVG marks with a fixed radius. The chart uses `d3.scaleLinear` for both axes, `d3.extent` to set domains, and `d3.axisLeft` and `d3.axisBottom` for tick marks, all within a full-window SVG canvas.

JS in HTML

This example demonstrates the simplest possible integration of JavaScript within an HTML page: a plain script tag that logs a message to the console. The HTML document contains only a static text element, “Hello HTML,” while the linked external script, `index.js`, executes `console.log('Hello JavaScript!')` upon page load. The example uses no external libraries or rendering APIs, relying solely on the browser’s native JavaScript engine and the Document Object Model’s script element to bridge markup and code. It serves as a minimal building block for more complex visualization projects, highlighting the foundational setup required before adding any data or graphical libraries.

D3 Selection Exploration

This example demonstrates D3’s data-join pattern by animating a dynamic set of circles whose count, position, and radius oscillate over time. Using `d3.select` to append an SVG, the code generates synthetic data with `d3.range` and updates circles each frame via `selection.join('circle')`, binding new data and setting `cx`, `cy`, and `r` attributes. The animation runs on a `setInterval` at 60 FPS, showing seamless entry, update, and exit transitions with D3 v6’s `join` method.

Fork of D3 Selection Exploration

This live D3 example demonstrates the selection and merging of data-driven SVG circles, with positions adjusting over time based on sine waves. At each animation frame, the code uses D3's `select`, `range`, and the `join` selection API to reconcile the current dataset with rendered circles, updating their `cx` and `cy` attributes. The visualization shows smooth enter, update, and exit behavior as the number of circles varies with the sine function at 60 frames per second.

JavaScript Arrays

This example demonstrates JavaScript array manipulation methods using D3.js version 6. The code defines a custom `range` function to create a numeric array and then explores `forEach`, `filter`, `map`, `reduce`, and sorting operations on it. It also shows how to sort an array of objects by a key using a custom comparator, alongside D3’s `ascending` helper. All code is written in plain JavaScript with logging to the console; there is no visual output or rendering, focusing purely on illustrating array programming concepts.

JavaScript Arrays

This example demonstrates a minimal web page that displays the message “Hello HTML!” in large, centered text. The implementation uses an HTML file for structure, a CSS file with a `.message` class to style the font size and alignment, and a JavaScript file that logs “hello world” to the browser console. The code relies on standard web technologies—HTML, CSS, and vanilla JavaScript—without any external libraries or data sources, serving as a basic starter template for web development.

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing as a generative SVG artwork. It renders a grid of alternating horizontal and vertical black lines, which are partially revealed through two SVG masks that use large geometric symbols to create the negative space. The code uses D3’s `select`, `range`, `join`, and `symbol` APIs to build the composition, with the `symbol` function generating the mask paths. The result is a dynamic, layered interplay of lines and shapes that fills the browser window.

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js to generate a dense grid of horizontal and vertical bars, creating an optical pattern of intersecting lines. The bars are rendered as SVG rectangles, with each set of bars repeated across the canvas at regular intervals. Two SVG masks with circular cutouts are applied to the bar groups, revealing and concealing portions of each direction to form a layered, lens-like visual effect. The code uses D3’s `select`, `range`, and `join` API to efficiently build and position the rectangles, and the Canvas API sets the drawing size to the full browser window.

SVG Fundamentals

This example displays a minimal web page that prints “Hello HTML!” in a large, centered font, alongside a console message of “hello world.” It demonstrates the foundational setup for an SVG-based visualization using HTML, CSS, and JavaScript. The code relies on a basic HTML `<div>` element, CSS styling for typography, and a JavaScript module that logs a string, serving as a starting point for more complex SVG graphics.

Fork of CV: Scatter Plot

This example displays the classic Iris dataset as an interactive scatter plot, plotting sepal length against sepal width for 150 flowers. Each circle represents a sample, colored and stroked in red when clicked to highlight a specific data point. Built with React, the visualization uses D3 v7 APIs such as `scaleLinear` for axes and `axisBottom`/`axisLeft` for ticks, with the SVG rendered declaratively. Circle transitions use CSS for smooth hover effects, while a custom `ResizeObserver` hook ensures the plot adapts to its container’s dimensions.