tverdone

@tverdone·15 public vizzes

Reusable D3 Scatter Plot

This example presents a reusable scatter plot built with D3.js and React, displaying the Iris dataset with petal length on the x-axis and sepal length on the y-axis. The visualization is rendered as an SVG, with circles sized by a configurable radius and axes generated using D3’s `scaleLinear`, `axisBottom`, and `axisLeft`. A custom `scatterPlot()` function encapsulates the chart logic, allowing width, height, margins, and data accessors to be set via a fluent interface, demonstrating a modular approach to building interactive visualizations with D3 v7.

Aug 24, 2023

Loading thumbnail…

D3 Scatter Plot Exercise

This scatter plot exercise displays the number of deaths from wildfires per year, using vertical bars to represent each data point. The chart, which reads from the `disasters.csv` dataset, maps the year on the x-axis and death count on the y-axis. The code builds an SVG visualization using D3 v7, employing `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick labels, and `d3.csv` for data parsing. The bars are rendered as `rect` elements with a fixed width.

Aug 23, 2023

Loading thumbnail…

D3 Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. Each flower is represented by a circle, with positions scaled linearly using d3.scaleLinear and extents from the data. The visualization renders in SVG, drawing circles directly onto an appended svg element. Axes are generated with d3.axisLeft and d3.axisBottom, styled with a 20px font size for tick labels. Data is loaded asynchronously using d3.csv from a remote Gist URL, with numeric parsing applied to all four measurement columns.

Aug 23, 2023

Loading thumbnail…

JS in HTML

This example demonstrates a minimal setup for combining D3.js with modular JavaScript in an HTML page. It shows a static “Hello HMTL” message styled with large centered text, while the console logs a greeting built from imported modules and the D3 library itself. The code uses d3.v7 loaded via CDN, along with ES module imports (`import { selection } from "d3"`, `import { something } from "./something.js"`) to chain exports from separate files. The rendering approach is plain HTML and CSS, with no data or interactive visualization involved.

Aug 21, 2023

Loading thumbnail…

D3 Selection Explanation

This example demonstrates how D3 selections and the data join pattern work by animating a set of circles and a connected line. The code uses `d3.select`, `d3.range`, and the `selection.join` method to bind an array of points to SVG circles, while a `d3.line` path is redrawn each frame. The data is generated procedurally from a sine wave, and the animation updates every 100 milliseconds using `setInterval`. The visualization shows a shifting waveform with a fixed set of circular markers, emphasizing how D3’s enter, update, and exit logic operates in a live rendering loop.

Aug 18, 2023

Loading thumbnail…

JS Arrays

This example demonstrates core JavaScript array methods for data manipulation, including `forEach`, `filter`, `map`, and `reduce`, using a range of integers from 0 to 9 generated by a custom `range` function. It also shows how `reduce` can transform an array of key-value entries into a single object, with commented-out console logs illustrating each operation. The code imports `ascending` from the D3 v7 library but does not use it in the visible logic, and the visualization itself is text-based, with results intended for browser console output.

Aug 2, 2023

Loading thumbnail…

Full Sol LeWitt Reproduction D3 v2

A full-screen D3 visualization reproduces Sol LeWitt’s wall drawing using 48 horizontal and 48 vertical striped rectangles. Two SVG masks, created with `d3.symbol` and the `symbols[0]` diamond path, define circular cutouts that invert the stripe pattern. The code uses D3 v7’s `select`, `range`, and `join` to generate elements, with the second mask rendered in opposite fill colors to create a contrasting central motif. Rendering is purely SVG-based without animation.

Aug 1, 2023

Loading thumbnail…

Full Sol LeWitt Reproduction D3

This example reproduces a Sol LeWitt wall drawing using D3 to render a dense grid of horizontal and vertical stripes as SVG rectangles. Two SVG masks, each containing a large circular symbol from `d3.symbol`, cut the stripes to create a bold interlocking pattern across the full browser window. The code relies on D3 selections, `range` for generating stripe positions, and the `symbol` API, with the visualization sized to the viewport dimensions.

Aug 1, 2023

Loading thumbnail…

Sol LeWitt Reproduction D3

This visualization reproduces a Sol LeWitt drawing using D3.js, displaying a grid of alternating horizontal and vertical black lines that form a circular pattern. It uses SVG masks with two complementary circular cutouts to create the intersecting line effect. The code leverages D3’s `select`, `range`, and `join` APIs to generate and bind 48 rectangles in each orientation, with each set masked to reveal only the portion inside or outside the circle.

Jul 13, 2023

Loading thumbnail…

Sol LeWitt Reproduction

This interactive reproduction of Sol LeWitt’s geometric wall drawing uses the SVG JavaScript API to generate a grid of 48 vertical and horizontal lines. The piece shows a black square lattice, where each line passes through a circular mask, revealing alternating line directions inside and outside the ring. The code directly creates SVG elements, applying two different masks (`circle-mask` and `circle-mask2`) to alternate which lines are visible in the central disc. It runs in the browser, filling the viewport, and is planned for animation.

Jul 13, 2023

Loading thumbnail…

Pseudo Visualizations Exercise

A horizontal bar chart compares the number of laureates from ten countries, with the United States leading by a wide margin. The chart uses SVG rectangles and text elements, with gray vertical gridlines at intervals of 4,000. The lengths of the green bars represent the data values, and the country names are placed as y-axis labels. The rendering is a static SVG generated directly in the HTML file, with no external libraries used.

Jul 12, 2023

Loading thumbnail…

SVG Fundamentals Exercise

A standalone SVG demonstrates fundamental shape primitives inside a single `<svg>` viewport. A yellow rectangle animates its corner radius from zero to a full pill shape and back, while two circles and an ellipse form a static face-like composition. The entire group moves along a rectangular path using the native SVG `<animateMotion>` element, with the rectangle’s shape change driven by `<animate>`. The page uses no external libraries, relying entirely on inline SVG markup and the browser’s built-in animation APIs.

Jul 12, 2023

Loading thumbnail…

Pseudo Horizontal Bar Chart

This pseudo horizontal bar chart displays four categories (A through D) as solid black rectangles of varying widths, with the largest bar spanning 800 pixels and the smallest 414 pixels. The visualization uses static SVG rectangles and text elements within an HTML document, with labels positioned along the left margin. The chart is built with hardcoded SVG coordinates and inline styling, including 64-pixel text for the category labels. This example demonstrates how simple SVG markup can create a categorical comparison without JavaScript libraries or data-binding frameworks.

Jul 11, 2023

Loading thumbnail…

Pseudo Bar Chart

A pseudo bar chart presents five vertical bars of varying heights as solid black rectangles against a white background, suggesting categorical data through minimal visual encoding. Built with raw SVG elements, the chart uses five `<rect>` shapes positioned at increasing x-coordinates, with heights ranging from 400 to 150 pixels to imply descending values. The code renders directly in the browser without any JavaScript libraries, relying solely on static SVG markup within an HTML document. This example demonstrates a hand-crafted, design-focused approach to bar chart construction, prioritizing visual clarity over data-driven generation.

Jul 11, 2023

Loading thumbnail…

Pseudo Scatter Plot

This example displays a pseudo scatter plot made of eight evenly sized black circles scattered across a blank SVG canvas. The circles are placed at fixed coordinates, creating a deliberate but seemingly random distribution. The visualization uses raw SVG circle elements within an HTML document, with no data binding or layout algorithm applied. Simple inline styling via CSS sets the page margin to zero and hides overflow, while the SVG width and height are fixed.</br></br>The rendering relies on the native SVG API through static `<circle>` elements, with each point manually assigned an `cx` and `cy` position. No D3.js or other libraries are present; it is a hand-coded, static composition.

Jul 11, 2023