Skip to main content
SimilarExport ZIP
100%

Euclid algorithm

✓ Published0🌍 Public
NNita
Last edited Dec 31, 2022
Created on Dec 31, 2022
Forked from D3 Starter

This example demonstrates the Euclidean algorithm by computing the greatest common divisor of two numbers and displaying the result in the browser console. The visualization renders three circles in an SVG using D3 v7, with the `select` API from the d3 module to append SVG elements. The circles are bound to a static array of values, positioned horizontally with fixed radii, while the algorithm’s output is logged rather than visualized directly on the page. The page uses simple HTML and CSS for layout, with no interactive elements present.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

gcd-viz

The visualization animates the Euclidean algorithm as it computes the greatest common divisor of two random integers, revealing the recursive subtraction steps as nested square blocks. It shows how each division step’s quotient and remainder tile a rectangle, with the final GCD emerging from the arranged squares. The code uses D3.js with SVG and transitions to fade in colored square groups sequentially, while text spans display the intermediate division equations. Random inputs are regenerated after the animation completes, looping the process. The `d3.range` and `transition.delay` orchestrate the cascading reveal, and the colors cycle through a palette per step.

11wheel
72% match
Loading thumbnail…

Shoot Straight - HTML/D3

This example visualizes the recursive integer sequence A133058, where each term depends on the greatest common divisor (GCD) of its index and the previous term, producing a pattern of scattered points across 850 iterations. A dark circle marks each (n, a) pair, with all points initially converging at the chart’s center before animating outward to their final positions via staggered transitions. The visualization uses D3 v5 with linear scales and SVG circles, computing the GCD with a custom Euclidean algorithm function to generate the data. Axis generation relies on `d3.axisBottom` and `d3.axisLeft`, while the animation applies chained `.transition()` and `.delay()` methods.

WWill Carter
66% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
65% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
65% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
65% match
Loading thumbnail…

circles with D3

This example demonstrates the fundamental D3.js pattern of binding data to SVG circles. It uses `d3.select` to create circles, `d3.scaleLinear` to map data values to pixel positions, and `d3.axisBottom` to render an x-axis. The visualization shows how a simple dataset of numbers translates into a scatterplot, with circle radii scaled proportionally. The code highlights the step-by-step sequence of entering, updating, and exiting elements in a D3 data join.

DDonald Bagwell
65% match
Loading thumbnail…

Circles

This visualization demonstrates a simple D3.js approach to creating SVG circles. Using the d3.select and join API, it establishes an SVG canvas that fills its container and renders a single circle with a steelblue fill at a fixed position. The code includes commented-out data arrays containing coordinates, radii, and colors, showing an alternative path for drawing multiple circles from structured data. The example focuses on the fundamental pattern of selecting, appending, and styling SVG elements.

Nnitinramagiri1@gmail.com
65% match
Loading thumbnail…

Let's

This example displays a single large circle rendered in SVG, centered within a 960 by 500 viewport. The visualization demonstrates fundamental D3.js v5 selection and manipulation methods, using `d3.select` to target the SVG element and `append` to add a circle with a radius of 200 pixels. The page’s CSS hides any overflow and removes default margins. A console log confirms the loaded D3 library, while the embedded YouTube video suggests related context. The code relies on minimal D3 APIs to show basic SVG shape creation.

Ccatsugly66
64% match