Skip to main content
100%

webconf tutorial

✓ Published0🌍 Public
Aannemariet
Last edited Apr 23, 2018
Created on Apr 23, 2018

This visualization displays a series of red circles connected by a smooth line, with each circle representing a value from a static array. The circles react to mouse hover by transitioning to black, then back to red on mouseout. Built with D3 v4, it uses a linear scale to map data values to vertical positions and a d3.line path with curveBasis for the connecting curve. The SVG rendering is animated through D3 transitions triggered by mouse events.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

webconf tutorial

This visualization displays a series of red circles along a horizontal axis, with their vertical positions determined by a dataset of numeric values. The circles are drawn using D3 v4's data binding and selection methods, with a linear scale mapping the data range to pixel heights. The SVG canvas is populated by appending circle elements, each styled with a fixed red fill and positioned using calculated `cx` and `cy` attributes. The data values, ranging from 10 to 87, are mapped so taller circles appear higher on the screen, demonstrating a basic scatterplot-like layout with no axes or labels.

Aannemariet
92% match
Loading thumbnail…

Circles

This visualization presents a list of names as hyperlinks on a black background, accompanied by animated red and blue circles that drift and pulse. The cursor and a smaller mouse follower are custom-styled elements that respond to mouse movement, with the follower scaling in size based on a frame counter. The name list skews horizontally when the mouse moves far from the center. The implementation uses vanilla JavaScript with `requestAnimationFrame`, CSS animations with `@keyframes`, and DOM manipulation via `querySelector` and `style.transform`.

Aanniehoshi18
78% match
Loading thumbnail…

D3 interactive line chart 2

This interactive line chart displays time-series data points as circles connected by a line, with a large value label for the most recent entry. Hovering over a circle turns it red, reveals a tooltip with the exact value, and draws a dashed vertical guide line down to the x-axis. Built with D3 v4, the visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and animated `transition` calls on mouseover and mouseout events. The x-axis labels are rendered as text elements, and the data is loaded via `d3.json`.

CCtuauden
78% match
Loading thumbnail…

d3 random circle practice

This visualization plots a static set of 11 coordinate pairs as red-labeled circles on an SVG canvas, with each circle’s position scaled by linear x and y axes and its radius by a square-root scale. The code uses d3.scaleLinear, d3.scaleSqrt, d3.axisBottom, and d3.axisLeft to build the chart, then applies a one-second transition that recolors all circles to teal and shrinks their radii to 3 pixels. The data is an inline array, and rendering relies on SVG elements with d3.v4.

Aadammak137
77% match
Loading thumbnail…

d3js workshop - circles 2

An interactive D3.js visualization displays three circles that initialize in a horizontal row, then transition to a larger red size with a staggered delay before resetting on mouseover. The example demonstrates basic SVG circle creation using data binding with an array of values, where circle x-coordinates derive from the data. It applies transitions with staged timing and duration, then adds mouseover events to change circle fill color and dimensions, returning them to their original state. The code uses d3.select, selection.data, enter, append, transition, and event handling.

OOValdivia110
77% match
Loading thumbnail…

d3js workshop - circles 2

Three circles of different data values appear in an SVG canvas, then animate by shifting downward and turning red before returning to their original positions on mouseover. The example demonstrates basic D3.v3 selection, data binding, and transition APIs, including `transition().delay().duration()`. Interactive event handling is implemented through `.on("mouseover")`, which changes circle styling and radius. The code initializes an SVG element with `d3.select('body').append('svg')` and uses a data array `[10, 20, 30]` to map circle positions.

LLelandCurtis
77% match
Loading thumbnail…

d3js workshop - circles

Three circles animate downward and expand while their fill color transitions to red, using D3's data join to bind an array of three numbers to SVG circle elements. The circles respond to mouseover by turning black and to clicks by shrinking to zero radius and fading to grey, with each transition lasting two seconds. The code uses D3 v3's `selectAll`, `data`, `enter`, and `transition` APIs with `duration` and `delay` methods. The initial positions derive from the data values multiplied by four for the x-coordinates.

Aaduo122
77% match
Loading thumbnail…

d3js workshop - circles 2

Three circles spaced horizontally transition in sequence from their initial position, turning red as they shift downward. Hovering reverses the effect, returning a circle to its starting point in black; clicking turns it green, briefly enlarges it, then shrinks it to nothing. The example demonstrates D3 data joins, selection, and event handling within an SVG scene, using D3 v3’s `transition()`, `delay()`, `duration()`, and `on()` methods on a fixed data array. It extends a basic circles tutorial with interactive feedback and animated state changes.

NNate-Holland
76% match