scott306lr

@scott306lr·5 public vizzes

D3 Scatter Plot

This visualization reproduces the classic Iris flower dataset as a D3.js scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. Each circle represents a flower sample, colored by its variety (setosa, versicolor, or virginica) using a categorical color mapping. The chart uses an SVG rendering with D3 scales and axes, and includes tooltips showing variety and coordinates. Data is loaded from a CSV via `d3.csv`, with axes generated using `d3.axisBottom` and `d3.axisLeft`.

Sep 25, 2022

Loading thumbnail…

D3 Visualization

This work recreates a Sol LeWitt-inspired generative drawing as an animated SVG. It shows a shifting field of circles whose positions and radii oscillate along a sine wave, creating a flowing, rhythmic pattern across the browser window. The animation is driven by `setInterval` updating a time variable, with the D3.js library’s `select`, `range`, and `join` operations building the circles dynamically each frame. Data is synthesized in `makeData.js`, while `vizData.js` handles the visual rendering.

Sep 19, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This fork of a Sol LeWitt art piece creates a striped grid pattern from alternating horizontal and vertical rectangles. Two overlapping masks, one positive and one inverted, reveal a central diamond symbol within the striped background. The visualization is rendered as SVG using D3’s `select`, `range`, `symbol`, and `symbols` APIs, sizing rectangles dynamically to the full viewport dimensions. The code relies on D3 v7 and applies the masks to shape the final composition.

Sep 18, 2022

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the minimal setup required to render text with D3 version 7, displaying a large "Hello D3 version 7" message centered on the page. The code imports the `select` function from the D3 library and uses it to target the body element, replacing its content with the greeting text. The visualization relies on D3’s selection API and the `text` method for DOM manipulation, with styling applied via CSS for font size and alignment. The page loads D3 from a CDN and executes the script from a separate bundle.js file.

Sep 18, 2022

Loading thumbnail…

Fork of React Starter

This example shows a React application that renders the text “Hello Reaaact!” centered on the page, using a large font size. The app is built with React and ReactDOM, with the main component defined as a simple functional component returning a div with a CSS class. The code uses React 16.13.1 from a UMD build via unpkg, and renders the component into the DOM element with the id "root". The styling is applied through an inline CSS rule that sets the font size to 13em.

Sep 18, 2022