A

alexscott-untitled

@alexscott-untitled·16 public vizzes

Loading thumbnail…

Animated Reusable Dynamic Charts

This scatterplot animates the Iris flower dataset, cycling through different measurements (petal width, sepal width, petal length) on the x-axis every two seconds. The y-axis remains fixed to sepal length. Built with D3.js, the visualization uses `scaleLinear` for axes, `transition` for smooth 1.5-second movements of the circles, and the `join` pattern to handle entering, updating, and exiting elements. The reusable `scatterPlot` component accepts configurable data, values, and margins, rendering as animated SVG.

Loading thumbnail…

Dynamic Charts

This interactive scatterplot of the Iris flower dataset dynamically cycles the x-axis through different measured attributes (petal width, sepal width, petal length) every two seconds using `setInterval`. The plot, built with D3 v7, uses `scaleLinear`, `axisLeft`, and `axisBottom` to render axes while updating circle positions via the `scatterPlot` function. The visualization shows how the distribution of flower measurements shifts when the independent variable changes, with SVG elements animating smoothly as the scale recalculates.

Loading thumbnail…

Reusable Charts

This example demonstrates a reusable scatterplot component built with D3.js, visualizing the classic Iris flower dataset. It plots sepal length against petal length, with each flower represented by a circle of fixed radius. The visualization includes axes, axis labels, and a title, using D3’s scaleLinear, axisLeft, axisBottom, and csv data loading. The code implements a configurable chart function with a fluent API for setting width, height, data, value accessors, margins, and radius, highlighting the reusable pattern.

Loading thumbnail…

D3 Scatter Plot

This D3 scatter plot visualizes the classic Iris dataset, plotting sepal length against petal length for each flower specimen. The visualization uses D3 v7 APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data coordinates to SVG circle positions with a fixed radius of 5 pixels. Circles are rendered via SVG `<circle>` elements appended through D3's selection and join operations, with axes positioned using margin-based transforms. The chart fills the browser window, with data loaded asynchronously from a remote CSV file using `d3.csv`.

Loading thumbnail…

JS in HTML

This example demonstrates a minimal integration of JavaScript within an HTML page, displaying the text “Hello HTML!” centered and styled with a large font size. The HTML structure defines a div element with a CSS class for styling, while a separate index.js file logs a message to the console. The visualization relies on plain HTML, CSS, and JavaScript, showcasing the basic interplay between markup, styling, and scripting without external libraries or data sources.

Loading thumbnail…

D3 Selection Exploration

Fifteen circles undulate in an animated sine-wave pattern, with positions and radii oscillating smoothly over time. The example demonstrates D3's selection and data-join mechanics by using `selectAll` and `join` to bind an array of generated data to SVG circle elements. Rendered in SVG, the animation updates every 100 milliseconds via `setInterval`, incrementing a phase variable to drive the motion. The code imports `select` and `range` from D3 v7, showing the modern `join` pattern as a concise replacement for the older `enter`/`merge` approach.

Loading thumbnail…

JavaScript Arrays

This example demonstrates fundamental JavaScript array operations, including range generation, sorting, filtering, mapping, and reducing, using a variety of data structures. The code creates a numeric range with a custom `range` function, sorts an array of numbers with a comparator, and applies transformations like doubling values and summing elements. It also defines an array of key-value objects. All operations are logged to the console, with results visible in the browser’s developer tools. The example imports the `ascending` helper from D3, though it is not actively used, and runs within a minimal HTML page with no visual output.

Loading thumbnail…

Sol LeWitt Reproduction D3 - final

This piece reproduces a Sol LeWitt drawing as a generative SVG artwork. It uses D3.js (v7.8.5) to create two sets of overlapping horizontal and vertical stripes across the full browser window. The stripes are masked by shapes generated from D3’s `symbols` API, which draws complex geometric paths. Two identical masks, both inverted, are applied to the two sets of rectangles, creating a layered, intersecting composition. The code uses D3’s `select`, `range`, `symbol`, and `symbols` functions, along with SVG `mask` elements.

Loading thumbnail…

Fork of Sol LeWitt Reproduction D3

This example reproduces Sol LeWitt’s geometric art using a grid of alternating horizontal and vertical bars. Two circular masks reveal and invert the pattern at the center, creating a cross-shaped visual contrast. The visualization is built with D3 v7, using `select`, `range`, and SVG `rect` elements. Each bar is assigned a mask ID via `attr('mask', ...)`, while the masks themselves are constructed with appended SVG `rect` and `circle` shapes.

Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example reproduces Sol LeWitt’s geometric wall drawing style by generating a grid of horizontal and vertical black stripes on a white background. A circular mask in the center of the SVG reveals only the stripes inside the circle, while a second inverted mask applies to the vertical lines, creating a layered crosshatch effect. The code uses raw SVG elements created via the DOM API (`document.createElementNS`), with two mask definitions (`<mask>` and `<mask2>`) to control visibility. The rendering is entirely procedural, with 100 rectangles in each direction, and no external data source or library beyond vanilla JavaScript and SVG.

Loading thumbnail…

Sol LeWitt Reproduction

This piece presents a minimalist, generative art reproduction of a Sol LeWitt wall drawing, rendered as a full-screen SVG. The code creates one hundred vertical bars, each ten pixels wide and spaced twenty pixels apart, filling the canvas height. Using the SVG API via JavaScript, it programmatically constructs rectangles within the browser window, producing a simple, rhythmic pattern of black lines against a white background. The work demonstrates a direct, code-based approach to recreating conceptual art's geometric aesthetics.

Loading thumbnail…

Pseudo Line

A pseudo-line chart approximates a bar chart by connecting six data points with a thick black path that bends through each bar’s position, creating a continuous contour over the categorical values. Rendered as static SVG using raw `<path>` and `<line>` elements in an HTML document, it displays axes and a bounding box without interactive behavior. The code defines precise coordinates for the path and axis lines, with text styling for potential labels, though none are present in the visualization.

Loading thumbnail…

Pseudo Horizontal Bar

Four horizontal black bars on a white background approximate a bar chart, with category labels A through D positioned to the left. The bars vary in length, though the chart does not include axes, data values, or a scale to interpret the magnitudes. Rendered as static SVG shapes, the visualization uses only `<rect>` elements for the bars and `<text>` elements for labels, all defined directly in the HTML markup without JavaScript libraries. The pseudo-bars are intentionally simple, suggesting a minimal or stylistic take on standard bar chart encodings.

Loading thumbnail…

Pseudo Bar

An SVG bar chart receives a minimalist reinterpretation through a pseudo-3D presentation. Five black rectangles of varying heights stand on a white background, their horizontal positions and vertical extents approximating categorical data values. The chart uses raw SVG `<rect>` elements, specifying x, y, width, and height coordinates to render each bar directly, with no JavaScript libraries or data-loading mechanisms involved. The static image, titled "Pseudo Bar," offers a simple, abstracted visual comparison.

Loading thumbnail…

Pseudo Scatter

A pseudo-scatter plot arranges seven circles in a loose diagonal sweep across a white SVG canvas, suggesting clusters or points of interest without underlying data. Rendered as static SVG circles via plain HTML markup, each circle has a fixed radius of 38 pixels and explicit x/y coordinates, with no axis or grid. The composition evokes a scatterplot’s visual rhythm while omitting any statistical encoding, relying solely on positioned shapes to imply distribution. No JavaScript libraries or dynamic rendering are used; the visualization is purely declarative SVG.

Loading thumbnail…

SVG Fundamentals

This example demonstrates core SVG fundamentals using four primitive shapes: a circle with a red-to-blue radial gradient, a larger circle with a centered radial gradient, a blue-outlined rectangle, and a red line. The SVG markup defines two radialGradient elements within a defs block, using stop tags to specify color transitions. A linearGradient is also declared but not referenced by any shape. The 800x400 canvas is rendered directly in HTML, with gradients using the url(#id) reference syntax.