Skip to main content
SimilarExport ZIP
100%

Clase 02 - Parte 1 - D3 Fernando Becerra

✓ Published2🌍 Public
Mmaxthamt
Last edited Jul 21, 2022
Created on Jul 19, 2022
Forked from HTML Starter

Four circles of varying sizes and colors appear at random positions on an SVG canvas when a button is clicked. The example demonstrates D3’s data join pattern by generating new data, updating existing circles, and removing extraneous ones with 500-millisecond transitions. Using d3.scaleLinear, it maps x, y, and radius values to axes and pixel ranges, while d3.axisBottom and d3.axisLeft render scales that update with each run. The code employs d3.select, selection.enter, and selection.exit to manage SVG circle elements dynamically.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 functions

This example demonstrates D3’s data-join pattern with a set of circles plotted on an SVG canvas. Buttons trigger updates: “Remove” pops a data point, while “Modify” replaces a random point with new coordinates. Using `selectAll('circle')`, `enter`, `merge`, and `exit`, it shows how to handle entering, updating, and exiting elements. The code uses D3 v5’s `scaleLinear`, `select`, and `max`, with data defined as an array of `{x, y}` objects and rendering via SVG circles.

TTimothyMiage
80% match
Loading thumbnail…

Circles Part3

Three face-like clusters of circles are grouped and then re-sorted into rows by color when a button is clicked. The visualization uses React state to manage the SVG circles, with D3’s `selectAll`, `data`, and `transition` APIs to animate the `cy` attribute over one second. A `d3.nest` key operation groups circles by their color property, and the resulting groups trigger rendering of text labels. The example is built with React 16.9, D3 v5, and renders via SVG.

Mmbooch22
79% match
Loading thumbnail…

Círculos con D3

This example demonstrates how to draw and dynamically style circles within an SVG container using D3.js. It shows an array of circle objects, each with x, y, radius, and fill color properties, rendered through the D3 `select`, `selectAll`, `data`, and `join` API calls. The code sets the SVG's width and height from the container, applies a light background, and uses method chaining to assign circle attributes like `cx`, `cy`, `r`, and `fill` from the data, with a uniform opacity value.

Ffcordon@pin.upv.es
79% match
Loading thumbnail…

Circles with D3 and React

The visualization displays fourteen circles of varying radii and colors positioned across a 960-by-500 SVG canvas, with each circle’s center, size, and fill defined by a static array of objects. Built with React 19 and D3 v7, the app uses a `useRef` hook to select the SVG element and applies a D3 `select` and `.join` operation to bind the data array to circle elements. The code sets each circle’s `cx`, `cy`, `r`, and `fill` attributes directly from the data source, showing a straightforward declarative mapping of data to SVG shapes.

BBismark Kofi Owusu Sarfo
79% match
Loading thumbnail…

d3js workshop - circles 2

Three circles animate from the top of an SVG canvas, shifting downward and turning red through a D3 transition, then revert to their original position and black fill on mouseover. Clicking a circle sets its radius to zero, removing it from view. The example uses D3 v3’s selection, data binding, and transition methods, with event handlers for mouseover and click. It renders with SVG elements and demonstrates basic interactivity, showing how D3 binds an array of numbers to visual properties like x-position and radius.

BBillyBHWong
78% match
Loading thumbnail…

D3 js part 2

A looping animation of circles moves vertically in a sine-wave pattern across an SVG canvas, with the number of circles oscillating between five and fifteen over time. The code uses D3 v7's `select`, `range`, and the data-join method `.join('circle')` to bind array data to SVG elements, updating their `cx` and `cy` attributes each frame via a `setInterval` callback. The visualization highlights D3's declarative enter-update-exit pattern for dynamic datasets.

GGautier DAVID
78% match
Loading thumbnail…

Circles with D3

This example shows a set of seven colorful circles scattered across an SVG canvas, each with a distinct size, position, and fill color at 70% opacity. It demonstrates core D3.js v7 concepts including data binding, the General Update Pattern, and method chaining via `select`, `selectAll`, `data`, and `join` to render `circle` elements. The visualization uses static, data-driven coordinates and colors defined in a JavaScript array, rendered through an HTML import map loading D3 from a CDN. The code also showcases the `join` API for creating SVG circles within a container sized to the viewport.

CCurran Kelleher
78% match
Loading thumbnail…

Episode 5 - selecciones con D3 - 00:00

A looping animation draws fifteen circles in an SVG, each repositioned horizontally and vertically every second. The circles move along a sine wave pattern, with their Y coordinates calculated from the index and a time variable. The code uses D3.js with the `select` and `range` APIs, selects all circle elements, and binds new data arrays to append them. The animation runs via `setInterval`, updating the scene continuously against the full browser window.

SSergio
78% match