- Should I use D3 for creating charts and graphs?
- Fundamentals of D3 visualisations
D3.js is a popular SVG based data visualization library and there are many reasons for its popularity. D3.js provides foundations and components for creating data visualizations instead of providing some already built charts. Another big reason of D3.js popularity is that it don’t use a new technology but rely on existing web standards.
- HTML
- CSS
- DOM
- SVG
Probably some of you have heard about SVG but don’t know what exactly it is. SVG stands for Scalable Vector Graphics. If you guys haven’t much time and want to know very basic of SVG then see http://www.w3schools.com/svg/ . If you are one of those guys who want to study in detail then this book named SVG Essentials seems promising.
There are 3 things at which D3.js is very good.
- Data manipulation and calculations
- DOM manipulation
- SVG creation and manipulation
In fact D3 magic depends on these 3 things together. D3 embeds Data in DOM after manipulation and parsing it in different ways and use SVG where graphics is required.
Data Manipulation and Calculations:
D3 stands for Data Driven Documents. So first D in D3 stands for Data. And D3 provides different ways for manipulating data and doing different calculations. For example, D3 provide different array related methods as shown here: https://github.com/mbostock/d3/wiki/Arrays .
Other than arrays D3 also have variety of methods to work with time and time intervals, detail can be found here: https://github.com/mbostock/d3/wiki/Time-Intervals
DOM Manipulation:
It is easy to Manipulate and Bind data with DOM. A simple bar chart code can be seen here as well:
<html>
<head>
<style>
/* set the CSS */
body { font: 12px Arial;}
.bar {
display: inline-block;
width: 20px;
height: 75px;
background-color: teal;
border:solid 1px #fff;
}
</style>
</head>
<body>
<script>
function getDataValue(d) {
var barHeight = d * 5;
return barHeight + "px";
}
d3.select('body').selectAll('div').data(dataset).enter()
.append('div').attr('class', 'bar').style('height', getDataValue);
</script>
</body>
</html>
Here we only utilized D3’s interaction capabilities with DOM instead of using any SVG related feature. While SVG is much more feature rich when it comes to visualizations.
SVG Creation and Manipulation :
D3 can utilize HTML DOM elements to visualization as well but actual format used for visualization by D3 is SVG. It is because SVG provide a lot more variety of graphical features than an HTML DOM. A very basic thing you can do in D3 is to draw and SVG line. But this is not the limit, you can create shapes, polygons and different gradients etc. In fact you can do whatever you can do in other vector graphics tool like Adobe Illustrator and Inkscape. Also D3 can provide very good animation related functionality as well.
Data Visualization Steps using D3.js
There are 3 major steps.
- Have data parsed and formatted based on how you need it to draw its visuals.
- Bind an SVG element in DOM.
- Draw whatever you want in SVG element.
There can be more steps if you want behavior, animation and user interaction however above mentioned steps are major steps.
Recommended Book
Although there are many books on D3.js. But if you want to learn it in detail then this book: Interactive Data Visualizations for the Web by Scott Murray can be very helpful. However, I will talk more about D3 its learning resources in next posts so if you don’t have time for book, you can still know more learn D3.js. But keep in mind that blog is no replacement of such awesome book.
This actually answered my issue, thank you!