Creating and Exporting SVG Graphics with JSON and D3

Last updated on March 10, 2013 in Development

SVG built from JSON in D3

Recently, I have been playing around with SVG or Scalable Vector Graphics. SVG is a XML-style language for describing two-dimensional vector graphics supported by modern browsers. One of the main advantages of using vector instead of bitmap to serve graphics is that you can be resolution independent (larger scale does not lose quality) but there are other advantages, like smaller size and no HTTP requests (SVG is embedded into html), styling through CSS, animating with JavaScript, and editing. I am not going to get into the basics of SVG as these tutorials have already done a great job explaining SVG in detail:

SVG Tutorial from Mozilla – Explains the internals of SVG
What is SVG? – Guide to SVG
SVG Drawing Basics – Drawing Basics with Scalable Vector Graphics
A Look Into: Scalable Vector Graphics – Excellent SVG Tutorial
Why Aren’t You Using SVG? – SVG tutorial from NetTuts
Getting Down with SVG – Get started using SVG inside your HTML
SVG Paths – Understanding SVG Paths

Today, I want focus on drawing SVG shapes with D3.js and JSON. Now, there are many good tutorials and documentation on drawing shapes with D3 but most of these explain how to create shapes by manipulating path data or internally defining position and size of SVG objects. Ideally, you want to use a JSON object and bind it to the D3 data attribute so that D3 can draw the objects by just using your JSON file.

This is nothing new, it is how most D3 examples are created but when you start moving your D3 objects and manipulating the visualizations, I noticed that the D3 data attribute does not have the updated data. The bottom line is that I want to create a drawing, allow D3 to let me change the way that drawing looks, and then make D3 export the new data structure of the changed graphic. So, let’s start with a simple example of drawing some lines and circles.

As you can see we have defined the circles and lines, plus extra attributes like color, with JSON object and D3 created the SVG shapes. Now, I have added the D3 Drag Behavior to the circles which let’s you move them around on the page and I have added a button and a function to capture and show the data on the screen. Try moving the circles around and press the export button before and after the manipulation of circles:

As you can see, the data that D3 used to create the circles has not been automatically updated. So, if I move the circles around, I don’t know how the JSON object should have changed according to the new graphic. Also, I am defining the lines separately from the circles, but in this example, the lines are just connecting nodes or links so we could leverage the circles JSON object to create the connecting lines.

In fact, I don’t want to start with any JSON object, I want to create the circles using my mouse (on a click event) and then have D3 draw the circles and connecting lines. I want to be able to move the circles anywhere and have D3 move the circles and connecting lines as well. I want to place a number as a text node into the circles to keep track of the circles that I create. Finally, I want D3 to update the data attributes of both circles and lines with all the changes as it happens in real time, so that I can grab the new objects and use them somewhere else. Here is how you can do that:

Create some circles, move them around, press export to see how the data changes. What do you think?

A lightweight library for manipulating and animating SVG
SVG Kit
SVG Editor
Javascript SVG parser and renderer on Canvas
jsFiddle: Drawing curves and straight lines with D3
Load external SVG into D3
Use D3 without using SVG
Using SVG
Animated US States with D3.js
Scalable Vector Graphics (SVG) Version 2 Draft Spec
Apply CSS 3D transforms to SVG layers
HTML5 and SVG: Text, Paths and Basic Animation
SVG Patterns Gallery
Icon Font for Geo Shapes