Skip to main content
Log in
D

DuckGorilla

@DuckGorilla·13 public vizzes

Loading thumbnail…

D3 Scatter Plot

A D3 scatter plot displays five Finnish municipalities, plotting their mobile scores against desktop scores on linear scales. Each circle’s fill color derives from a threshold scale, categorizing the average of the two scores into red, orange, or green ranges. The SVG rendering includes axes for both metrics, and hover interactions trigger tooltips showing the municipality name via mouseover, mousemove, and mouseout events. The code uses d3.scaleLinear, d3.scaleThreshold, d3.axisBottom, d3.axisLeft, and d3.select for DOM manipulation.

Apr 2, 2023
Loading thumbnail…

Fork of D3 Scatter Plot

This visualization displays the classic Iris Dataset as a scatter plot, mapping petal length on the x-axis against sepal length on the y-axis. Circles represent individual flower samples, with axes rendered using D3’s `scaleLinear`, `axisLeft`, and `axisBottom`. The code loads data via `d3.csv`, parses numeric columns, and appends SVG circles sized with a fixed radius. It leverages D3 v6, fetching the dataset from a GitHub Gist and responsively filling the browser window with full viewport dimensions.

Jan 26, 2022
Loading thumbnail…

Scatter

This example demonstrates a scatter plot visualization that loads the classic Iris dataset from a GitHub Gist using the d3.csv function. The core functionality focuses on fetching and parsing the comma-separated data asynchronously, with the resulting records logged to the browser console rather than rendered graphically. The implementation uses D3 v7 alongside raw HTML and JavaScript, with no additional styling or interactive elements. The example serves as a minimal foundation for building data-driven visualizations, highlighting the import process of external CSV resources through D3’s built-in data handling capabilities.

Jan 26, 2022
Loading thumbnail…

Scatter

This visualization presents a scatter plot of the Iris flower dataset, loaded from a CSV file hosted on GitHub Gist. The example demonstrates the basic setup for a D3.js visualization within a minimal HTML page, using the d3.v7 library. It constructs the CSV URL by joining several string parts, including the gist URL, username, gist ID, commit hash, and file name, then logs the resulting URL to the console. This serves as a starting point for building interactive scatter plots, though the current code only prepares the data source without rendering any visual elements yet.

Jan 26, 2022
Loading thumbnail…

Fork of D3 Starter

This example demonstrates the minimal setup required to render text with D3 version 7, displaying “Hello D3 version 7” centered in the browser window. The page loads D3 from a CDN and uses the `select` method to target the `body` element, then applies the text via the `.text()` API. The markup includes a 13em font size for visibility, and the code relies on a bundled JavaScript file for execution. It serves as a basic template for initializing D3 projects.

Jan 16, 2022
Loading thumbnail…

JavaScript Arrays

This example shows how to modify a JavaScript array using the `push` method. It defines an array containing two string elements, `"A"` and `"B"`, then appends a third string, `"C"`, and logs the resulting array to the browser console. The code runs in a minimal HTML shell with no external libraries, relying solely on the native JavaScript `console.log` API for output.

Jan 16, 2022
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using two overlapping sets of thin horizontal and vertical rectangles. The drawing applies two distinct SVG masks to each set, creating a crosshatched grid that visually inverts where the shapes intersect. Built with D3 v6, it generates 100 rectangles per axis using `range` and `selectAll().join()`, while the `symbol` API draws a diamond-shaped mask path. The final SVG adapts to the full browser window size, with masks rendered through appended `<mask>` elements.

Jan 16, 2022
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition, generating a grid of overlaid horizontal and vertical stripes that are masked to reveal a central circle. The visualization uses D3 v6 to create an SVG scene, drawing 100 rectangles in each orientation and applying two masks with contrasting black-and-white circular cutouts to shape the final pattern. The rendering fills the entire browser window, with the circle positioned at the center of the viewport.

Jan 16, 2022
Loading thumbnail…

Sol LeWitt Reproduction with D3

This D3.js reproduction of a Sol LeWitt art piece generates two sets of horizontal and vertical stripes across the viewport, masked to create two circular cutouts in the center. Using `d3.select`, `d3.range`, and the `.join('rect')` API, it renders 100 rectangles in each direction, with SVG masks (`circle-mask` and `circle-mask-2`) alternating black and white fill to reveal the layered stripe pattern. The piece is simple, deterministic, and scales to the full browser window.

Jan 16, 2022
Loading thumbnail…

Untitled

This example renders horizontal and vertical alternating stripes masked by two circles in the center of an SVG canvas. The code uses raw SVG manipulation via `document.createElementNS` to construct masks, rectangles, and elements, with `d3` available as a dependency but not actively used. The first mask reveals horizontal stripes, while the second mask inverts the circle to show vertical stripes outside it, creating a crosshatched visual pattern that fills the viewport. The visualization demonstrates layered SVG masking techniques without data input.

Jan 14, 2022
Loading thumbnail…

SVG Fundamentals

This example shows a single circle rendered inside an SVG element, demonstrating the basics of SVG fundamentals. The circle is positioned with `cx` and `cy` attributes and sized with `r`, all set to 50 units. The code uses no external libraries, relying purely on native SVG markup within an HTML page. The rendering approach is declarative, with the SVG circle drawn directly in the markup, making it a minimal starting point for understanding how SVG shapes work in a browser.

Jan 12, 2022
Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamental building blocks of SVG graphics by rendering a single circle shape. The code uses the native SVG `<circle>` element with explicit `cx`, `cy`, and `r` attributes to position and size the circle at coordinates (50, 50) with a radius of 50. Rendered directly in an HTML document without JavaScript libraries, it highlights how SVG’s declarative XML syntax defines vector shapes in the browser. The minimalist approach serves as a baseline for understanding how D3.js and other tools later manipulate similar SVG primitives.

Jan 12, 2022
Loading thumbnail…

Smiley Face Part I

A static SVG smiley face displays a yellow circle head with black outline and two dark eye circles, rendered via React components. The code uses React 16.9 and ReactDOM to mount the visualization, computing circle positions from width, height, and offset constants. The face remains incomplete, missing a mouth, as noted in the source README. SVG elements are directly authored as JSX, with hardcoded geometric properties for the head and eyes.

Jan 12, 2022