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