xscotta@yahoo.com

@xscotta·10 public vizzes

ATS - Responsive Reusable Scatter

This example builds a responsive two-panel scatterplot dashboard of the classic Iris dataset, showing sepal dimensions in one view and petal dimensions in the other. Each panel encodes an additional variable through point size, with circle area scaled by the product of the other two measurements, and colors species via a D3 ordinal scale. The reusable scatterPlot function uses d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.symbol to render SVG marks, axes, grids, and legends. The layout adapts from a side-by-side grid to a stacked single-column arrangement below 640px via CSS media queries.

Aug 28, 2024

Loading thumbnail…

debug of ATS - Reusable Scatter

This example demonstrates a reusable scatterplot component built with D3.js that visualizes the Iris flower dataset, plotting sepal length against sepal width while encoding petal size through point radius and species through color. The code constructs the chart using D3's `scaleLinear` for axes and point sizing, `scaleOrdinal` for categorical color assignment, and `symbol` with `symbolCircle` to render the data points as SVG paths. The visualization includes axis labels, a title, and a grid, all rendered as SVG elements within a bounded container, with the reusable chart function accepting configurable dimensions, margins, and data accessors.

Aug 27, 2024

Loading thumbnail…

ATS Dual Scatterplot

The ATS Dual Scatterplot presents two side-by-side scatter plots visualizing the Iris dataset. The left plot maps sepal length against sepal width, while the right plot maps petal length against petal width, with point sizes encoding the product of the other two dimensions. Both plots color points by species. The visualization uses custom D3 code, including `d3.scaleLinear`, `d3.extent`, and `d3.symbol`, to render SVG circles, axes, grids, and legends. The `scatterPlot` function is a reusable module, and data loading uses `d3.csv`.

Aug 25, 2024

Loading thumbnail…

ATS - Scatter Plot

This scatter plot visualizes the Iris dataset, showing sepal length and width for three iris species while encoding the relative petal size (petal length multiplied by petal width) as the radius of each circle. The visualization is built with D3.js, using `d3.select`, `d3.csv`, `d3.scaleLinear` for x, y, and radius mappings, and `d3.scaleOrdinal` for color coding by species, with a legend and grid lines.

Aug 18, 2024

Loading thumbnail…

ATS - Variable driven multi plot

A dashboard of four synchronized scatterplots explores the Iris dataset, each plot pairing different sepal and petal dimensions while encoding a third measurement as point radius. D3.js scales map data values to pixel positions and sizes, with ordinal coloring distinguishing the three species. Variables drive each plot’s configuration, setting axes, titles, and dimensions dynamically. The SVG-based visualization renders data from the local iris.csv file, with shared legends and colored borders framing each quadrant.

Aug 14, 2024

Loading thumbnail…

ATS - D3 Sol Lewitt with CSS animation

This example reproduces a Sol LeWitt drawing as an animated SVG. It uses D3 to generate a grid of horizontal and vertical black rectangles that form a base pattern, and then applies CSS keyframe animations to seven distinct geometric symbols from `d3.symbols`. Each symbol is translated vertically and given a delayed animation start, creating a looping, staggered motion. The animation toggles stroke width and uses alternating black and white fills within a mask, generating a dynamic, layered composition that mimics the artist's systematic, rule-based style.

Aug 14, 2024

Loading thumbnail…

ATS - Symbols, Lines, Layers

This example reproduces a Sol LeWitt-inspired generative drawing with animated D3 symbols, lines, and layers. It displays 70 circular symbols arranged in a row, with their vertical positions oscillating via a sine function, while three red Wye symbols highlight shifting indices over time. A semi-transparent black curve, computed with `d3.line()` and `d3.curveNatural`, connects all points. Using `d3.symbol` for shapes and `setInterval` for animation, the SVG updates every 100 milliseconds, incrementing a time variable to drive the motion.

Aug 9, 2024

Loading thumbnail…

ATS - D3 traversing a sine wave

A set of black circles arranged in a sine wave pattern moves across the screen, with every sixth circle highlighted in red and enlarged. The wave animates continuously as the horizontal position of each circle remains fixed while its vertical position shifts over time. The code uses D3 v6 selections, `range`, and `scaleBand` to generate and update the SVG circle elements. A `setInterval` triggers a redraw every 100 milliseconds, and a direction variable reverses the highlighted index when it reaches the edges of the data array.

Jul 22, 2024

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This fork of a Sol LeWitt reproduction uses D3.js to generate an abstract geometric composition. The visualization displays a grid of alternating horizontal and vertical bars that overlap to create a dynamic pattern across the full browser window. It builds two layered sets of rectangles, each masked with a pattern derived from D3’s `symbol` API—one mask uses the standard symbol set, the other an inverted version. The `scaleBand` function positions the masks, while `select` and `join` manage SVG elements. The result mirrors LeWitt’s minimal, rule-based aesthetic using interactive vector graphics.

Jul 20, 2024

Loading thumbnail…

Fork of Sol LeWitt

This is a generative art reproduction of a Sol LeWitt piece, rendered as a full-window SVG. It displays a grid of horizontal and vertical black bars that are masked into two concentric circular regions. The work uses two SVG masks: the first reveals only the horizontal bars within a central circle, while the second inverts that circle to show vertical bars everywhere else. The code constructs all elements dynamically via the DOM API, without external libraries.

Jul 12, 2024