dmr

@dormouseroared·15 public vizzes

Trying out some SVG

This example demonstrates two distinct SVG compositions. First, a simple hazard symbol—an orange square with two thick black diagonal lines—is drawn using primitive SVG elements within a fixed viewBox. Second, a larger, full-width SVG applies a linear gradient as a mask over a blue rectangle positioned atop a magenta one, creating a grayscale fade effect that reveals both colors. The code relies on native SVG tags including rect, line, linearGradient, and mask, with no external JavaScript libraries.

Nov 15, 2021

Loading thumbnail…

learn svg through 24 examples

This example demonstrates how to build a series of SVG scenes by hand, progressing from a simple bauble ornament to a branching snowflake design. It shows how to apply clip paths, reuse elements with the `<use>` tag, and apply transformations like rotation and scaling to compose complex shapes. The code uses raw SVG elements such as `<circle>`, `<polygon>`, and `<path>`, along with `viewBox` coordinates centered on (0,0) and a radial gradient for shading. The examples are purely illustrative, with no data source or external library.

Nov 15, 2021

Loading thumbnail…

Sol LeWitt learn something about mask

This example presents a set of minimal SVG experiments that illustrate fundamental concepts like the `viewBox` coordinate system, default pixel dimensions, and basic geometric shapes. Consecutive squares with circles show how changing the `viewBox` alters the visible portion of the artwork, acting as a crop or virtual artboard. The page also demonstrates basic polygons and rectangles with varied fills, strokes, and positioning, using raw SVG elements within an HTML document. The code relies on the core SVG API for rendering, not external libraries.

Nov 15, 2021

Loading thumbnail…

Sol LeWitt reproduction attempt 2

This example reproduces a Sol LeWitt-inspired composition using JavaScript and the SVG DOM API, displaying a full-screen field of evenly spaced black vertical bars on a white background. The code creates an SVG element sized to the browser window and uses a `for` loop to append `rect` elements with a fixed bar width and gap. The number of bars is computed dynamically from the window width, ensuring the pattern fills the screen. This approach demonstrates direct manipulation of SVG elements without any external libraries.

Nov 14, 2021

Loading thumbnail…

Sol LeWitt reproduction

This example reproduces a Sol LeWitt art piece by writing SVG circles to the DOM, showing two overlapping circles in yellow and black alongside a text label. The code initially creates one circle with an id, then uses `outerHTML` in plain JavaScript to replace it with a larger set of SVG elements, including a second circle and text. The rendering approach relies on direct SVG manipulation with no external libraries, making it a self-contained demonstration of dynamic DOM insertion within an SVG container.

Nov 14, 2021

Loading thumbnail…

SVG fundamentals

This example demonstrates fundamental SVG shapes composed in a single static frame, including rectangles, circles, lines, and a path. The code uses raw SVG elements with attributes like `fill`, `stroke`, `cx`, and `d` to define geometry, rendered directly in an HTML page. No external libraries or data sources are involved; the visualization is hand-coded markup showing basic vector graphics primitives and their styling properties.

Nov 13, 2021

Loading thumbnail…

Loading colors into react and d3

This example shows how to load a CSV file of CSS named colors into a React application and display summary statistics about the dataset. The code uses React hooks (`useState`, `useEffect`) to fetch the data asynchronously with D3’s `csv` function, then renders a formatted message showing the file size in kilobytes, row count, and column count using `d3.csvFormat`. The visualization is minimal—a large `<pre>` element that displays either “Loading...” or the computed statistics after the data arrives from a GitHub gist URL.

Nov 13, 2021

Loading thumbnail…

Mouse Follower

A black circle sits at the center of an SVG canvas, rendered by a React component that sets its `cx`, `cy`, and `r` attributes. The example uses React 17 and D3 loaded via CDN, with the circle’s position fixed at the midpoint of a 960×500 viewport. The code provides a minimal starter template for integrating React with D3 or other visualization libraries, showing how to structure a single SVG element within a React render call.

Nov 13, 2021

Loading thumbnail…

Read in csv with d3

This example demonstrates how to fetch and parse a CSV file from a remote URL using D3 v3. It shows the file’s size in kilobytes, row count, and column count as plain text on the page. The code uses the Fetch API to retrieve the CSV, then `d3.csvParse` to convert the text into an array of objects, and accesses `data.length` and `data.columns.length` to summarize the dataset. The data comes from a GitHub gist containing named CSS colors.

Nov 13, 2021

Loading thumbnail…

Mouse Follower - next steps

A circle follows the mouse cursor inside an SVG canvas, with its position updating in real time. React's `useState` hook stores the cursor coordinates, while `useCallback` optimizes the mouse-move event handler. The example uses ReactDOM to render a single `<circle>` element, with the SVG's `onMouseMove` event updating the circle's `cx` and `cy` attributes.

Nov 13, 2021

Loading thumbnail…

loading and parsing csv data

This example demonstrates how to load and parse a remote CSV file using the Fetch API. It fetches a CSV of CSS named colors from a GitHub Gist URL and logs the raw text to the browser console. The code defines an asynchronous `fetchText` function that retrieves the file and returns its contents as a string, then invokes this function with the CSV URL. No parsing or visualization occurs; the example focuses solely on the initial data-loading step.

Nov 13, 2021

Loading thumbnail…

Fork of smiley face refactoring into react components

This example demonstrates a modular React approach to rendering a smiley face using SVG. The `Face` component composes `BackgroundCircle`, `Eyes`, and `Mouth` components, each receiving explicit props for positioning and sizing. The `FaceContainer` renders the SVG wrapper and a translated `<g>` group, while `Mouth` uses `d3.arc` to generate a path for a smile. Hardcoded offsets from earlier versions are replaced with configurable numeric props passed from a top-level `App` component, which renders the face into the DOM via `ReactDOM.render`.

Nov 13, 2021

Loading thumbnail…

smiley face refactoring into react components

This example displays a smiley face built from a yellow circle, two eyes, and a curved mouth, rendered as SVG. The code refactors drawing primitives into named React components like `BackgroundCircle`, `Eyes`, and `Mouth`, with `Face` orchestrating their layout and `FaceContainer` providing the SVG canvas. It uses React for component composition and d3’s `arc` function to generate the mouth’s path. Properties such as eye offset and mouth radius are passed as parameters, enabling flexible geometry without hard-coded coordinates.

Nov 13, 2021

Loading thumbnail…

smiley face with svg

A smiling face rendered in yellow with black outlines is drawn using SVG primitives within a React application. The face is composed of a large circle for the head, two smaller circles for the eyes, and a curved path for the mouth, all positioned relative to a central origin point. The React component uses D3's `arc` function to generate the mouth's path data, calculating its geometry mathematically rather than hard-coding coordinates. The SVG is displayed in a full-viewport HTML page that loads React, ReactDOM, and D3 from a CDN.

Nov 13, 2021

Loading thumbnail…

smiley face part 1

An SVG smiley face is drawn with yellow circular head, black outlined eyes, and a black outlined mouth arc, all centered within a 960x500 viewport. The visualization uses React to render SVG elements, while D3.js provides the `d3.arc` generator to create the mouth path coordinates. Each facial feature is positioned using explicit pixel offsets and radii, and the mouth uses a defined inner radius, arc width, and start/end angles from pi/2 to 3pi/2. The drawing employs circle and path SVG elements with stroke styling.

Jul 26, 2020