Getting started with D3
Nowadays we track everything. We track our daily routines with our mobile devices and everything we interact with through our social media accounts. We’re in the era of big data. Some of this data is stored online and it’s up for grabs. However, massive amounts of data are boring if we don’t visualize it. These kind of visuals could be helpful to get insights, create awereness or optimize anything. So I started to dig into the D3 library to create my first visualizations.
As creative front-end developer I love to discover new tools. When I first heard about D3.js I couldn’t wait to get started. I have always been fascinated by data. I really got inspired by the work of Clever Franke. They’re creating amazing visuals with D3 and Three.js. Check out the video below.
My goal is to end up with a funky, interactive data visualization like one of these, but first things first.
D3 what?
After comparing some data visualization libraries, D3.js is definitely the best option to choose. It’s a JavaScript library for manipulating documents based on data. It allows you to bind data to the DOM and then apply transformations to the document. It makes it possible to create interactive Scalable Vector Graphics(SVG) charts with smooth transitions. And thats just what I need.
Know your tools
Because D3 is a library for manipulating data based documents, you can use it to render in different ways. Think about combining D3 and Three.JS for rendering with WebGL or Canvas. I start to use D3.js in order to render SVG elements to a basic webpage. SVG are used to define vector-based graphics for the web. It defines graphics in XML format. So if you scale a SVG graphic, it doesn’t lose any quality. Every element and every attribute in SVG files can be animated. It’s good to know what kind of basic, predefined shapes SVG has, so I’ve listed them with their most used properties:
<svg width=”400" height=”110"> <!-- Rectangle -->
<rect width=”300" height=”200" fill="red" stroke="black" stroke-width="5" /> <!-- Circle -->
<circle cx=”100" cy=”100" r=”50" /> <!-- Elipse -->
<ellipse cx=”200" cy=”80" rx=”100" ry=”50" /> <!-- Line -->
<line x1=”0" y1=”0" x2=”200" y2=”200" /> <!-- Polygon -->
<polygon points=”200,10 250,190 160,210" /> <!-- Polyline -->
<polyline points=”20,20 40,25 60,40 80,120 120,140 200,180" /> <!-- Path -->
<path d=”M50 50 L200 150” stroke="black" stroke-width="20" /> <!-- Text -->
<text x=”30" y=”50">Lovely SVG Text!</text> <!-- Group -->
<g transform="translate(50, 0)">
<path stroke-width=”2" stroke-dasharray=“5,5” d=”M5 20 l215 0" />
<path stroke-width=”4" stroke-dasharray=“10,10” d=”M5 40 l215 0" />
<path stroke-width=”6" stroke-dasharray=“20,10,5,5,5,10” d=”M5 60 l215 0" />
</g></svg>
Working with data in JavaScript means working with arrays and objects. We can manipulate these arrays and objects using basic JavaScript functions like .filter() and .map(). D3.js added some nice functions to make it easier to work with data, which I really like. I’ve used them in my first demo.
My first demo
You can see my first working example with D3 below.
The example shows us bars, axis, gridlines and labels, all to plot a clear chart. It’s D3 which makes it really easy to create such charts.
The ‘min’, ‘max’ and ‘extent’ functions are great to determine the extremes of the chart. The ‘select’ and ‘selectAll’ are useful to quickly select elements from the DOM. The ‘scale’ function converts a number in the domain to an output in the range. It scales the data to fit into the window.
Another thing I really like is the linear color scale I used. You are able to set the domain and range of the color scale to create a nice gradient color fill. You can also choose to set an ordinal color scale to create distinct colors.
What’s next?
Interaction and animation are the next steps I’m going to focus on. I will keep you updated about my progress and I will share my findings. Get inspired by some other cool examples in the D3 gallery. If you would like to experience just check this very clear, free tutorial. If you want to become a pro, this is a great course.
Happy visualizing!
Frans Oudelaar
Resources:
D3 gallery: https://github.com/d3/d3/wiki/Gallery
Free tutorial: https://www.youtube.com/watch?v=8jvoTV54nXw
Udemy course: https://www.udemy.com/data-visualize-data-with-d3js-the-easy-way/learn/v4/overview
D3: https://d3js.org/
Info: http://www.w3schools.com/
