Skip to main content
Log in
K

Kyrand

@Kyrand·7 public vizzes

Loading thumbnail…

test

This example displays a single line of text, "Edit the code below to change me!", centered on an SVG canvas. It uses the D3.js library (version 4) to select the body element, append an SVG with a fixed width and height, and add a text element with specified font size and family. The visualization is a minimal placeholder that demonstrates basic SVG text rendering through D3’s selection and append methods, with no data source or interactive behavior.

Jun 6, 2018
Loading thumbnail…

test

This example displays a single line of text, "Edit the code below to change me!", centered on an SVG canvas. It uses the D3.js library (version 4) to select the body element, append an SVG with a fixed width and height, and add a text element with specified font size and family. The visualization is a minimal placeholder that demonstrates basic SVG text rendering through D3’s selection and append methods, with no data source or interactive behavior.

Jun 6, 2018
Loading thumbnail…

circle dance start

This example presents a simple interactive D3.js v4 visualization of two sets of points. The interface displays three circles at distinct positions and radii, with two "Update" buttons that trigger a user-defined `updatePoints` function. The code creates an SVG canvas using `d3.select("body").append("svg")` and defines two point arrays (`points1` and `points2`) containing x, y, and radius values. Although the update function is currently empty, the structure demonstrates how to bind button clicks to replace or redraw the circular elements, serving as a minimal template for dynamic positional data updates.

Jun 6, 2018
Loading thumbnail…

circle dance end

Two buttons trigger the same animated update for a small set of circles, moving each circle’s center and radius to new values over two seconds. The visualization shows three red circles on an SVG canvas, with the animation smoothly interpolating their positions and sizes via D3’s `.transition()` and `.attr()` methods. The data consists of hardcoded JavaScript arrays of `x`, `y`, and `r` values, and the code uses D3 v4’s selection `.enter()`, `.merge()`, and `.transition().duration()` to handle the state change.

Jun 6, 2018
Loading thumbnail…

circle dance end

Two buttons trigger the same animated update for a small set of circles, moving each circle’s center and radius to new values over two seconds. The visualization shows three red circles on an SVG canvas, with the animation smoothly interpolating their positions and sizes via D3’s `.transition()` and `.attr()` methods. The data consists of hardcoded JavaScript arrays of `x`, `y`, and `r` values, and the code uses D3 v4’s selection `.enter()`, `.merge()`, and `.transition().duration()` to handle the state change.

Jun 6, 2018
Loading thumbnail…

circle dance end

Two buttons trigger the same animated update for a small set of circles, moving each circle’s center and radius to new values over two seconds. The visualization shows three red circles on an SVG canvas, with the animation smoothly interpolating their positions and sizes via D3’s `.transition()` and `.attr()` methods. The data consists of hardcoded JavaScript arrays of `x`, `y`, and `r` values, and the code uses D3 v4’s selection `.enter()`, `.merge()`, and `.transition().duration()` to handle the state change.

Jun 6, 2018
Loading thumbnail…

circle dance

Two buttons trigger the animation of three red circles to new positions. The circles move between two predefined sets of coordinates over a two-second duration, demonstrating basic data updates in D3.js. The visualization uses D3 v4’s SVG rendering and the `transition()` method with a duration parameter to animate the changes. The code defines two data arrays containing `x`, `y`, and `r` properties for the circles, and the buttons call the `updatePoints` function to apply the new data.

Jun 6, 2018