Experiment

100%

✓ Published0🌍 Public

Last edited May 19, 2016

Created on May 19, 2016

This example displays a set of sixteen green rectangles whose vertical positions follow a sine wave, creating a simple rhythmic pattern across the SVG canvas. The visualization is generated using D3.js, where a data array created with `d3.range(16)` is bound to SVG `rect` elements via `.data()` and `.enter()`. Each rectangle is positioned with a fixed width and height, with its x-coordinate spaced evenly and its y-coordinate computed using the `Math.sin` function based on the data index. The result is a static, grid-like arrangement that highlights D3’s basic data-binding and attribute-setting capabilities.

AI-generated description

Similar vizzes

Loading thumbnail…

Experiment2

Sixteen rectangles render as a sine wave, their heights fixed and their vertical positions offset by the sine of each index divided by three. The visualization demonstrates a basic data mapping from an array generated with `d3.range` and transformed via `Array.map`. Each rectangle is appended to an SVG using D3’s `selectAll`, `data`, and `enter` pattern, with position and color set through the `attr` method. The result shows a smooth sinusoidal pattern across the SVG canvas.

RRobinL

90% match

Loading thumbnail…

test1

This example displays a simple bar chart of four data values (30, 50, 70, 90) rendered as SVG rectangles. It uses the D3.js library to select the SVG canvas, bind the data array, and append `rect` elements whose `x`, `y`, `width`, and `height` attributes are all set to the corresponding data value. The result is a series of squares originating from the top-left corner, sized proportionally to each number.

RRobinL

74% match

Loading thumbnail…

d3 selection exploration

Animated green circles move horizontally across an SVG canvas while their vertical position and radius fluctuate according to a sine wave. The visualization demonstrates D3’s `selectAll().data().join()` pattern, handling dynamic array sizes by entering and exiting circles as the count oscillates. Using `d3.range` to generate data points and a `setInterval` timer at 60 frames per second, it updates attributes like `cx`, `cy`, and `r` in place. The code renders with SVG and leverages D3 version 7.8.5, showing a smooth, continuous wave-like pattern.

NNeeraj Kumar

73% match

Loading thumbnail…

Test1

This example animates twenty pairs of rectangles moving diagonally across an SVG canvas, with each rectangle shifting horizontally and vertically before transitioning to a red fill. The visualization demonstrates chained D3 transitions, where the initial position attributes are set without animation, then followed by two sequential transition stages. The data is generated programmatically in JavaScript using a loop to create an array of x-coordinates. The code uses D3 v5’s selection, data binding, and `.transition().duration()` API, rendering elements as SVG rectangles within a 900×500 viewport.

NNita

71% match

Loading thumbnail…

fresh block test

This example visualizes six colored rectangles positioned on an SVG canvas, with each rectangle’s dimensions and color defined by an array of JSON objects. It first calculates the maximum bounding box dimensions from the data using a for loop, then sets the SVG’s size accordingly. The code uses D3 v4’s selection and data binding methods (`d3.select`, `.data`, `.enter`) to append and style the rectangles via `.attr` and `.style` calls. The visualization highlights a simple approach to mapping raw data to geometric primitives, with the source data embedded directly in the script and rendering done entirely through SVG.

IIgathi

71% match

Loading thumbnail…

D3-Arrays

Fifteen black circles undulate in a vertical sine-wave pattern across a full-screen SVG. Each circle updates its vertical position based on a time-incremented angular offset, creating a smooth, animated wave. The example uses D3 v7's `select`, `range`, and `symbol` APIs, with a JavaScript `setInterval` driving the animation loop. Data is generated on the fly as an array of position objects, bound to circle elements via D3's data join, while SVG attributes are updated each tick.

Gg1g10

71% match

Loading thumbnail…

Messing around with Sine Wave Circles

Four overlapping sine and cosine waves are rendered as horizontal rows of blue, crimson, turquoise, and orange circles. Each wave uses a separate D3 group and a `d3.timer` to animate the vertical positions of 50 circles per row in real time. The animation is driven by `Math.sin` and `Math.cos` functions with a shared time parameter, creating contrasting phase-shifted motion across the four color-coded sets. Circles are positioned using D3’s data join and `attr` updates, with an SVG canvas sized 960 by 500 pixels.

SSebastian Barrett

70% match

Loading thumbnail…

moving sine

This example shows 15 circles moving in a sine wave pattern across the screen, with their vertical positions oscillating smoothly over time. A static green square sits in the corner as a fixed reference point. Built with D3 version 7 and rendered as SVG, the animation updates every 1000/60 milliseconds using `setInterval`. Each circle’s y-coordinate is calculated as `250 - Math.sin(d * 0.5 + t) * 220`, and its radius varies via `Math.sin(d.i * t / 20)`. The visualization uses D3’s `select`, `range`, and `.join` API to manage the dynamic circle elements efficiently.

Ccniekel

70% match