CS 725 Information Visualization - VI3

100%

CS 725 Information Visualization - VI3

✓ Published0🌍 Public

Last edited Feb 10, 2016

Created on Feb 7, 2016

This example shows how interactive buttons control two distinct D3.js visualizations on a single page: a scatterplot and a polygon. The scatterplot initially displays data points as circles, and clicking a button triggers a transition that enlarges their radii and applies color based on the data values. A separate button animates the polygon’s shape, position, and fill color, with a circle appearing at the end of the transition. The code uses D3’s `transition.attr` and `style` methods, alongside scale functions (`d3.scale.linear` and `d3.scale.ordinal`), to drive the animations.

AI-generated description

Christos Tsolakis

Just a few lines of code can make your graphs interesting (see scatterplot)
Very often it happens that transitions work but they are too fast, use the duration parameter wisely.
When using short duration transitions, use buttons to help users follow the animations

Live at http://bl.ocks.org/ChristosT/f73384946e17e4b1b46a

forked from <a href='http://bl.ocks.org/ChristosT/'>ChristosT</a>'s block: <a href='http://bl.ocks.org/ChristosT/52239ed074878b9a60ca'> CS 725 Information Visualization - VI2</a>

Similar vizzes

Loading thumbnail…

D3 SVG Tutorial + D3 Animations Tutorial

This example combines SVG rendering with D3 animations by generating 50 random data points and plotting them as circles on a scatterplot with linear scales and axes. The visualization uses D3.js version 3.5.5 to create SVG elements, including circles, axes, and scales, while a button triggers animated transitions of the circles across the chart. The code includes both the SVG tutorial’s static chart construction and animation commands, though the author notes difficulty combining the two sections. Rendering occurs entirely through D3’s SVG API with interactive button controls.

JJamestiberiuseanes

80% match

Loading thumbnail…

HTML Starter

This example presents three animated circle charts, each with its own dataset and button. Clicking a button cycles through data values, causing the corresponding circle’s radius to transition smoothly while its numeric label updates. The visualization uses D3 v4 with `d3.select`, `d3.scaleLinear` for mapping data to radius and color, and `transition().attr` to animate changes. Each circle’s fill shifts along a gradient, and buttons trigger the updates through custom click handlers.

Ssgalhamdani

77% match

Loading thumbnail…

HTML Starter

Ssgalhamdani

77% match

Loading thumbnail…

D3 Workshop: Part 2 - SVGs and d3 Transitions

This example demonstrates interactive D3 transitions on SVG shapes, starting with static blue, red, and yellow elements before a button triggers animated rectangles that move to random coordinates and change colors based on an array of six color objects. It uses d3 v4, including `selectAll`, `data`, `enter`, `merge`, and chained `transition()` calls with `.duration()`. The code binds data to newly appended rectangles, animating their x/y positions and fill colors, illustrating data joins and update patterns.

KKristianaaron

76% match

Loading thumbnail…

Reusable scatter plot

This reusable scatter plot displays 200 randomly generated data points using D3.js v4, with interactive buttons that trigger animated transitions. The visualization initially renders normally distributed points as semi-transparent blue circles, while the "Change Data" button regenerates the dataset and smoothly transitions the circles to new positions with updated axes. The "Change Color" button toggles the circle fill between blue and red using D3's transition and ease functions. The example demonstrates reusable chart patterns with SVG rendering, including linear scales, axis generators, and data-binding techniques.

EEfratVil

75% match

Loading thumbnail…

Changing data

An interactive chart uses D3 to display circles representing two datasets. Clicking a button switches between datasets, triggering D3 transitions that animate the circles to their new positions and radii. The SVG rendering uses D3’s selection, data joins, enter/exit, and transition API to smoothly update the visualization, with a text label that updates accordingly.

SSerhii Ponomarov

75% match

Loading thumbnail…

D3 Workshop: Part 2 - SVGs and d3 Transitions

An interactive D3.js v4 workshop demonstrates SVG shape manipulation and data-driven transitions. A button triggers D3 code that animates rectangles, changing their positions and colors based on a small inline array of color objects. The visualization uses raw SVG elements—a blue rect, pink-stroked circle, and yellow square—alongside D3-generated rectangles that employ `transition()` with a 1000-millisecond duration to animate `x` and `y` attributes and fill colors. The code also exercises selection, appending, and entering data rectangles through `svg.selectAll()` and `.enter()`.

CChrisChrisLoLo

75% match

Loading thumbnail…

D3 Workshop: Part 2 - SVGs and d3 Transitions

This example demonstrates an interactive D3.js v4 workshop exercise in which a button triggers JavaScript that animates and manipulates SVG rectangles on a static canvas. The code shows how to programmatically append, transition, and update shapes, using `d3.select`, `.append`, `.attr`, and `.transition().duration()` to move elements to random coordinates and change their fill colors based on an inline data array. It also includes a checklist of coding tasks, illustrating progressive steps from manual shape creation to data-driven animated updates.

KKristianaaron

75% match