Skip to main content
SimilarExport ZIP
100%

Fork of D3 Fork

✓ Published0🌍 Public
IisZachariah
Last edited May 23, 2022
Created on May 23, 2022
Forked from D3 Fork

This example demonstrates a minimal SVG visualization where fifteen circles with a radius of 100 pixels are drawn across the full browser viewport. The code uses D3 version 7.4.4's `select`, `range`, and `selectall` APIs to append circles to the SVG container, with dimensions taken directly from `window.innerWidth` and `window.innerheight`. The visualization is embedded within a React 18.1.0 project, though the rendering itself relies solely on D3's selection and data-binding methods rather than React components.

AI-generated description

A demonstration of how to start using D3 version 6.

ISC Licensed

Similar vizzes

Loading thumbnail…

D3 Fork

This example demonstrates how to set up a minimal D3 version 7 visualization. It creates an SVG canvas that fills the browser window and renders fifteen circles, one for each value in a range of data. The code imports the `ascending` and `select` functions from the D3 API, uses `select('body')` to attach the SVG element, and appends circles with `svg.selectall('circle')` and `.enter()`. The rendering uses SVG elements and relies on D3’s declarative data-binding to build the visualization.

IisZachariah
89% match
Loading thumbnail…

Fork of Circles with D3

This example demonstrates a static SVG scene of a large yellow circle with a black outline and two smaller black-bordered circles positioned inside it, resembling a face. The visualization is built using React 18 and D3 v7, rendering all shapes through an SVG component in a `react-dom` root. The code defines circles with explicit `r`, `cx`, `cy`, `fill`, and `stroke` attributes, while the page layout uses an embedded stylesheet to remove margins and hide overflow. The example serves as a creative foundation, inviting modifications like thematic styling for holidays.

Aaltugbozyaka@gmail.com
86% match
Loading thumbnail…

Fork of D3 Starter

A minimal D3 starter example demonstrates a basic data join by rendering 15 circles across the screen. The code uses `d3.select` and `d3.range` to generate data, then employs `selectAll`, `data`, `enter`, and `append` to create SVG circles with fixed radii. It runs entirely in the browser with a full-window SVG canvas, set against a plain white background. The example highlights the core enter selection pattern in d3 v7, with the bundled JavaScript file containing the import and logic.

Ccaitlin-woods
86% match
Loading thumbnail…

Fork of Fork of Hello HTML

An interactive SVG visualization renders a single circle that follows the mouse cursor, with its radius dynamically scaling based on the cursor's combined x and y coordinates. Built with React and D3.js v7, the application tracks mouse movement through React's event handling and updates the circle’s position and size in real time. The rendering layer uses an SVG viewport of 960 by 500 pixels, and the circle’s radius is calculated as the sum of the cursor’s x and y positions divided by 30.

Ssixsoxsix
85% match
Loading thumbnail…

Fork of Circles with D3

This example showcases five static, semi-transparent circles scattered across an SVG canvas, each with a distinct size, position, and color. The code uses D3 v3’s `select` and data joins to bind an array of circle objects to SVG elements. Rendering is driven by setting attributes like `cx`, `cy`, `r`, and `fill` directly from the data, with a fixed opacity value of 0.5. The visualization is a minimal demonstration of D3’s declarative approach to creating simple geometric shapes from a hardcoded dataset.

DDonald Bagwell
85% match
Loading thumbnail…

Fork of Circles with D3

This example displays a single red circle against a red background, creating a subtle contrast that makes the circle barely visible. It uses the D3 library to select a container element, set the SVG dimensions, and bind data to render the circle with a radius of 200 pixels. The code imports the `select` function from D3 and defines an exported `main` function that receives a container and applies the SVG attributes and circle elements. A README encourages forking and modifying the visualization with holiday themes like Halloween or Christmas.

NNita
85% match
Loading thumbnail…

Fork of D3 Selection

This example demonstrates a real-time animated data join using D3’s `select`, `range`, and `selectAll` APIs within a React project. It generates a dynamic set of circles whose positions and radii oscillate based on a time variable, updating at 60 frames per second via `setInterval`. The code explicitly shows both the modern `.join()` method and its equivalent enter/merge/exit pattern, rendering SVG circles with live attributes. The visualization runs in a browser, auto-sizing to the window dimensions, and uses D3 v7.6.1 as its sole external dependency.

Mmax-31
85% match
Loading thumbnail…

Fork of Fork of D3 Selection

This example displays a set of animated circles moving vertically and changing radius over time, driven by sine functions. The visualization uses D3.js v7 within a React-style structure, with the `vizData` function applying a data-join to update SVG `circle` elements. The animation loops at 60 frames per second via `setInterval`, recalculating positions and sizes based on a time variable. This demonstrates imperative selection and joining techniques on SVG elements, rendering dynamic shapes without external datasets.

Mmax-31
85% match