Magic is fun to see, but it is even more fun to perform.
Best thing about learning process is that it doesn’t make the magic disappear.
Knowing how things work, makes them even more magical…
Note that code examples are quite important in this article, so make sure you open up and analyse that jsFiddle links.
WHY D3js?
Every age have it’s tools…
AGE OF THE MACHINES
Computers made vast amount of professions obsolete.
It is not that the manual work has no values, everything sure depends on the base technology, thus it is precious.
Manual work have only one problem. It is SLOW
There is no term like Hand-made in the web development.
We can’t sell Rolls Royces, mass production is the only way to survive on the market.
That means that we need Tools in order to Speed up the production.
Even the kids start from simple shapes while they learn to draw.
So lets begin…
<circle> of Life
<svg width=”200” height=”200">
<circle cx=”50" cy=”50" r=”50"/>
</svg>Now to see how D3js gives life to <circle>
let svg = d3.select('body')
.append('svg')
.attr('width', '200')
.attr('height', '200');let circle = svg.append('circle')
.attr('cx', '100')
.attr('cy', '100')
.attr('r', '100');
At this point we can argue that it is simpler (and cleaner) to create a circle in plain SVG than in D3js.
Have in mind that we still don’t know much.
(hu)Man VS the Machine
<svg width="300" height="200">
<circle cx="20" cy="20" r="20"/>
<circle cx="80" cy="20" r="20"/>
<circle cx="140" cy="20" r="20"/>
<circle cx="200" cy="20" r="20"/>
<circle cx="260" cy="20" r="20"/>
<circle cx="20" cy="80" r="20"/>
<circle cx="80" cy="80" r="20"/>
<circle cx="140" cy="80" r="20"/>
<circle cx="200" cy="80" r="20"/>
</svg>That are 9 circles, it is still simple and easy to achieve it in plain SVG.
Now lets create the same thing with D3js…
let svg = d3.select('body').append('svg')
.attr('width', '300')
.attr('height', '200');let circle = svg.selectAll('circle')
.data(dataset)
.enter()
.append('circle')
.attr('cx', function(d) {
return d['x-position'];
})
.attr('cy', function(d) {
return d['y-position'];
})
.attr('r', function(d) {
return d['radius'];
});
It always entertains me to do the same thing by using different tools.
If you currently don’t share the same passion with me, please give it a try.
There is nothing better than having another point of view in mind, while programming.
1 circle — draw it with mouse.
10 circles — draw them by code markup.
100 circles — let the machine do the work.
WHAT is D3js?
Best books are in the library…
WEAPON OF MASS PRODUCTION
D3js represents one of the best concepts in programming.
It provides us opportunity to create different sized, styled and positioned shapes by using the same methods.
It is all about manipulating the DOM and dynamically creating <svg> and it’s subelements.
Managers love it, because it saves time.
Engineers love it, because managers are happy.
Some programmers may dislike D3js because it implements the infamous chain syntax. Somehow I don’t find that as it’s downside. D3js managed to implement chain in a way that it feels natural…
D3js chain can be loop as well. This feature makes the library somehow unique.
When the look is not deceiving
D3js have it’s own implementation of DOM selectors. It may look like jQuery but don’t let that fool you since it is not.
D3js have built in support for animations.
D3js have methods that can dynamically load datasets from JSON or TSV… files (no need for any kind of AJAX helpers).
D3js have built in support for drag and drop.
HOW to D3js
It’s not jQuery but it sure manipulates the DOM…
FOUR SIDES OF D3 WORLD
Every good adventurer knows that there is nothing like a good compass.
If you are still reading this article, congrats! You got quite far away from your comfort zone…
1. Data
JSON vs (TSV, CSV, DSV).
2. Scales
Domain (input) and Range (output) goes together like peas and carrots.
3. Axes
Data visualization have roots in charts.
4. Groups
Parenthood is easy if children do what you say.
1. Data
Architectural choices in programming should be made based on the problem you are solving. There is nothing like predefined best general practice that can be applied to every situation.
No matter of that I would not recommend using TSV, CSV… formats with D3js.
JSON or JavaScript Object Notation fit naturally into the JS environment. It is scalable and can easily be adopted to fit any Front-End implementation.
D3js have built in methods that can be used for dynamic loading of data.
Lets try one of them in the example below:
2. Scales
There are few fundamental concepts that every programmer must know.
One of them is scalability.
D3js have built in logic that can scale our data values (proportionally) to fit the available space (SVG width — height).
01 value in domain from above represents the smallest datapoint.
31 is the value of the datapoint with largest value.
0 value in the range represents the starting point of available space.
500 is the space limit. In the example below it is used for creating the xAxis thus it represents the width of SVG.
3. Axes
Axes are usually connected with the traditional graph implementation in form of chart.
Even though I find term chart kind of deprecated, there is nothing wrong with using axes in your data visualization.
When to use Axes?
Answer to this question is simple. Use axes whenever you need to show relationships between data points. Axes provide an easy way for understanding those relationships without additional explanation.
4. Groups
Grouping data in D3js is done via <g> SVG tag.
It makes a difference in situations when specific transform needs to be applied to all nested elements within the group.
Instead of applying the transform to each child element we can apply it to the group…
Aside from transformations groups add additional level of code organization. Which is quite important when you work with huge datasets.
Conclusion
Imagine that you have dataset with 700 data points.
How much time it would take you to manually create 700 <circle> elements and position them as you wish within the <svg>?
Even if you do so, what would you do once the dataset gets replaced by new one?
You would use D3js, or you would give up.
Did you liked this article? If so tap or click on “︎❤” to help others reach it… Or maybe follow me here or on twitter.com/develoger decision is yours :)
