Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Image Transitions with D3 + Primitive

D3.js does magic with svgs, and Primitive transforms images into svgs. Put them together and you can turn Kevin Bacon into Francis Bacon:

Sample Image Transition

This repo contains a simple Python utility that transforms each image in a directory to an svg, and then transforms each of those svg's into json. It also contains a basic index.html and visualization script so others can create transitions between images like the one shown above.


To use this code, you'll need to have the Go programming language (aka 'golang') and Primitive installed on your machine. If you're on OSX, you can test if they're installed by typing: which primitive into a terminal. If that command returns and displays a path in your terminal, you should be good to go.


To transform each of the included sample images to svg elements and then to json for consumption by d3, you can run:

python 'input-images/*'

This will create one svg and one json file in the output directory for each input image in input-images.

Then you only need to verify that the inputs variable in draw.js contains each of the images you want to include in the transition:

var inputs = [

Once that's set, just start a webserver on port 7000:

# if you have Python 3 installed
python -m http.server 7000 

# if you have Python 2 installed
python -m SimpleHTTPServer 7000

Then open a browser to localhost:7000. If you click on the page, you should see the images transition. Voila!


Transition between scatterplot representations of images with D3.js




No releases published


No packages published
You can’t perform that action at this time.