Experiment2

100%

✓ Published0🌍 Public

Last edited Jun 5, 2016

Created on Jun 5, 2016

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Experiment

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.

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

72% match

Loading thumbnail…

Animation

This example demonstrates the stark contrast between animated and static SVG rendering. The code appends a simple rectangle to the SVG canvas and repeatedly updates its x-coordinate with `setTimeout`, incrementing a counter every 10 milliseconds to create an infinite horizontal slide. Three linked versions allow comparison: one animates continuously, while two alternatives remove the update loop, leaving the rectangle fixed in place. The visualization uses raw D3.js selection and attribute methods (`svg.select("rect").attr`) rather than higher-level transition helpers, highlighting the fundamental mechanism behind frame-based movement in D3.

RRobinL

70% match

Loading thumbnail…

soli d3 experiments refactor

This example uses D3 v6 to render a full-screen SVG with 100 horizontal rectangles stacked vertically. A single white 150×150 pixel mask is applied via the `mask` API, revealing only the section of the striped pattern that overlaps the mask’s area. The code builds the visualization by appending a `<mask>` element, adding a white rectangle to it, and then joining data from `range(n)` to create the stripes. The CSS classes `.first` and `.second` are defined but unused, and the commented-out code suggests previous experiments with clip paths.

Rrwata97

70% 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

69% match

Loading thumbnail…

Fork of Messing around with Sine Wave Circles

Four overlapping sine waves animate across the screen as rows of filled circles. Blue and crimson circles trace complementary sine and cosine paths, while smaller turquoise and orange circles follow similar curves with tighter spacing. The visualization uses D3 v7’s `d3.timer` to update each circle’s `cy` attribute based on a time offset, rendering 200 circles per wave in an SVG. It demonstrates periodic motion through D3’s data-join and selector methods.

AAndre J Denais

69% 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

69% match

Loading thumbnail…

soli d3 experiments

This example generates layered, striped patterns by arranging arrays of rectangular elements across the screen. It uses d3 selection and data joins to create four groups of rectangles, each rotated and translated with SVG transform attributes to form overlapping geometric compositions. The code leverages clip paths (via `clipPath` and `rect`), masks, and z-index styling to control visibility and layering, with CSS classes assigned to each group. All rendering occurs in an SVG element sized to the full browser window, using d3 v6 within a React project.

Rrwata97

69% match