Skip to content

Instantly share code, notes, and snippets.

@cloudshapes
cloudshapes / README.md
Last active December 19, 2015 19:08
Simple Reusable Bar Chart (for a London D3 Meetup)

Simple Bar Chart to Support Talk at London D3 Meetup

Simple version of bar chart code found in the Developing a D3.js Edge book. Written as an example to be referenced in the London D3 Meetup

@cloudshapes
cloudshapes / README.md
Last active December 19, 2015 06:09
AttrTween, Transitions and MV* in Reusable D3

AttrTween, Transitions and MV* in Reusable D3

An example of using attrTween & transitions whilst writing reusable D3.

The code uses three instances of a data module to hold onto and manipulate the data used to drive the patterns, and one instance of a "manager", which handles the creation and manipulation (i.e. the classic enter, update, exit) of the actual visual pattern.

Full write-up, split across two blog posts, at "Using AttrTween, Transitions and MV*" on the Safari Books Online Blog.

@cloudshapes
cloudshapes / README.md
Last active December 17, 2015 19:39
D3: Using d3timer to Centrally Control Movement

Using d3timer to Centrally Control Movement

This is a follow-on from "Using attrTween in a Transition to Move an Element Using a Function".

Both this example, and the previous example show exactly the same kind of movement (although the movement here continues unless you explicitly click the "Stop" button). The animation is exactly the same, paths followed are the same etc.

The difference here is that this does not use transitions, it uses the "d3.timer" functionality to call a function that both determines how far around an iteration each element is and to move the element using the transform attribute.

But why on earth do this if we've just done the same thing using a transition?

@cloudshapes
cloudshapes / README.md
Last active December 17, 2015 19:39
attrTween in a Transition to Move an Element Using a Function

Using attrTween in a Transition to Move an Element Using a Function

Kind of an evolution from Mike Bostock's ball-following-a-path example.

Mike Bostock's code uses attrTween and transform to move a ball in a transition along a pre-determined set of points. So Mike's code creates a route using a 'path' element, then uses the attrTween and transform to navigate along those sets of points.

This code uses attrTween and transform, but the code that actually does the moving uses a function to generate the points for the balls to move to.

The code also has the data specify which pattern the balls should follow: a circular or elliptical path?

@cloudshapes
cloudshapes / README.md
Last active December 17, 2015 19:39
Dotted Path Following the Mouse

Dotted Path Following the Mouse

Bit of a simple variation of Mike Bostock's Spline Transition.

The idea is to have a dotted line of x-points long follow the mouse around, and trail behind it. Essentially the code creates and appends a path element, then on every mouse move adds a new point to the list of points, drops an old point, and updates the path.

Simples!