JetlinZ

@JetlinZ·14 public vizzes

Fork of Reusable D3 Scatter Plot

This is a reusable scatter plot that visualizes the Iris Dataset, cycling through different feature combinations every two seconds. The chart maps petal width against sepal length initially, then rotates through other attributes using a `setInterval`. Built with D3 v6, it uses `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to render axes, with circles positioned via the modular `scatterPlot()` function. The SVG output animates smoothly, updating both data mappings and axis scales with each interval.

Jun 8, 2022

Loading thumbnail…

D3 Scatter Plot

This example displays the classic Iris dataset as a scatter plot, with petal length on the x-axis and sepal length on the y-axis. It loads data from a GitHub Gist using `d3.csv` and parses numeric fields. The visualization is built with React and rendered as SVG, using `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to construct the axes and points. The plot is generated by a custom `scatterPlot` function that sets the width based on the window size, with margins and a fixed point radius of 5.

Jun 7, 2022

Loading thumbnail…

Fork of D3 Scatter Plot

This fork of a D3 scatter plot visualizes the Iris dataset, plotting petal length against sepal length. It uses `d3.csv` to load data, `d3.scaleLinear` for axes, and SVG `circle` marks with a join operation. The chart is rendered in React with D3 v6, dynamically sized to the window, and includes axes via `axisLeft` and `axisBottom`.

Jun 7, 2022

Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with black outlines is rendered in SVG, featuring two eyes, animated eyebrows, and a mouth. The eyebrows transition vertically between two positions over three seconds. D3 v5 selections, `arc` for the mouth path, and chained `transition` calls manage the animation. The face is centered within a 960×500 SVG canvas using a transform.

Jun 7, 2022

Loading thumbnail…

D3 Scatter Plot

This scatter plot visualizes the classic Iris dataset by mapping petal length to the x-axis and sepal length to the y-axis, using D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions. Circles are rendered as SVG elements with a fixed radius of 5 pixels, positioned via `cx` and `cy` attributes. The chart fills the browser window by setting width and height to `window.innerWidth` and `window.innerHeight`, with margins applied to the scales. The code fetches the data as CSV from a GitHub gist, parses numeric fields, and applies a data join with `selectAll` and `.join`.

Jun 6, 2022

Loading thumbnail…

Fork of D3 Selection Exploration

A dynamic swarm of circles undulates across the screen, with each circle’s position and radius shifting over time based on sine-wave functions. The visualization demonstrates D3’s data-join pattern, using `selection.selectAll`, `.data()`, and `.join('circle')` in the `vizData.js` module to bind and update SVG elements. Data is generated procedurally by `makeData.js`, which uses `d3.range` and `d3.scaleLinear`. An animation loop runs at 60 frames per second via `setInterval`, calling the visualization with freshly computed values, producing a smooth, organic motion without explicit transitions.

Jun 2, 2022

Loading thumbnail…

sin wave and move

This example animates a set of 15 circles that move along a sine wave across the screen, with the wave’s phase shifting over time. Each circle’s y-position is computed from the sine of its index plus a time variable, updated every second using a `setInterval`. The visualization uses D3’s `select`, `range`, and data-join with `.join('circle')` to create and update SVG circles, while styling is handled by inline CSS attributes. The animation runs on an SVG canvas sized to the full browser window.

Jun 2, 2022

Loading thumbnail…

multi masks

This example creates an abstract pattern of 100 horizontal and 100 vertical stripes overlaid on an SVG canvas, with each stripe masked by one of two complementary masks. The masks are defined using D3’s `mask` element, where black and white rectangles and symbol shapes (from `d3.symbol`) determine visibility. The code uses D3 selections and `join` to bind data from `d3.range`, and applies masks via `attr('mask', 'url(#mask-1)')`. The result is a woven, crosshatched visual effect generated entirely in the browser.

Jun 1, 2022

Loading thumbnail…

D3 mask all shapes

This example demonstrates how D3.js mask elements can selectively hide or reveal overlapping shapes, creating a geometric grid pattern of 100 horizontal and vertical rectangles. The visualization uses two SVG masks with inverted color schemes—one black with white symbols and one white with black symbols—to control visibility across the layers. It employs `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to generate and position the mask paths, while SVG rects and mask attributes handle the rendering. The code adapts automatically to the browser viewport dimensions.

Jun 1, 2022

Loading thumbnail…

D3, Mask code with star shape

This example shows a grid of horizontal and vertical stripes overlaid on a full-screen SVG, with two complementary star-shaped masks cutting through the pattern. The first mask reveals the horizontal stripes through a white star on black, while the second mask applies the inverse effect to the vertical stripes. The visualization uses D3 v7’s `range`, `selectAll`, and `symbol` API to generate 100 rect elements per orientation and construct the star paths via `symbol(symbols[4], 100000)`. Masks are defined with custom `mask` elements and applied via the `mask` attribute, producing a layered, intersecting star composition.

Jun 1, 2022

Loading thumbnail…

Fork Shape 3 strip

A fork-shaped grid pattern emerges at the center of the visualization, created by layering two sets of 100 thin rectangular strips—horizontal and vertical—that intersect across the full screen. SVG masks with a star-like symbol shape reveal the fork form; one mask uses a black background with a white symbol to cut out the horizontal strips, while the second mask inverts the colors to expose the vertical strips against a white background. The code uses D3 selections, `range`, `symbol`, and `symbols` to generate the geometry.

Jun 1, 2022

Loading thumbnail…

Sol LeWitt with D3

This example generates a grid of 100 horizontal and vertical bars in SVG using D3’s `select`, `range`, and `join` methods. Two circular masks reveal overlapping patterns: the first shows horizontal bars inside a white circle, while the second inverts the effect for vertical bars. The rendering uses D3 selections to append rectangles and mask elements to the page, creating a Sol LeWitt-inspired geometric composition.

May 31, 2022

Loading thumbnail…

Fork of Fork of SVG fundamentals

This example demonstrates how SVG masks can create two distinct circular cutout effects on a grid of overlapping rectangles. One mask, defined with a black background and white circle, reveals only the vertical stripes; the other, with a white background and black circle, controls visibility of horizontal stripes. The code builds the full-screen SVG and all elements programmatically using `document.createElementNS` and `setAttribute` in vanilla JavaScript, without any external libraries. The result is a visual interplay of lines that form a transparent circular window at the center of the viewport.

May 30, 2022

Loading thumbnail…

Fork of Episode 1:Creating SVG of Wassily Kandinsky art

This example recreates a Wassily Kandinsky painting as an interactive SVG illustration, pairing the original artwork with a vector recreation built from geometric primitives. The composition uses layered shapes—triangles, lines, rectangles, and circles—filled with radial and linear gradients to mimic the painter’s abstract style. Written in React, the code renders directly to SVG using static JSX elements, with styling defined in CSS. It demonstrates how simple SVG shapes and gradient definitions can approximate a complex fine-art composition without external data or JavaScript libraries.

May 28, 2022