D3 namely Data Driven Documents is gaining popularity among the Javascript developers and many other developers working in the field of Visualization and Data Science.
D3.js as named is a Javascript library used for visualization and by visualization I mean serious visualization which cannot be ignored.
Before going into D3 lets understand why do we need it. I suppose the person reading this post must be familiar with basic HTML, CSS and Javascript.
To understand about what sort of features D3 provides we will first look at the underneath technologies used for interactive graphics :
1) WebGL - It's a javascript API for rendering interactive 3D graphics and 2D graphics without the use of plugins.
2) Canvas - Anyone who has worked on HTML5 must have heard this term frequently. Canvas is part of HTML5 and it allows for dynamic rendering of 2D shapes and bitmap images. It consists of a drawable region where some of its anticipated uses are building graphs, animations, games etc.
3) SVG - If you intend to understand D3 then the first thing that will get into your way is Scalable Vector Graphics. SVG is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. Basically its an image format for vector graphics
Some of the benefits of SVG that you should be aware of :
- small file sizes that compress well
- scales to any size without losing clarity
- looks great on retina displays
- design control like interactivity and filters
SVG code can be included directly within any HTML document. Web browsers have supported the SVG format for years (Except for Internet Explorer), but it never quite caught on, until now.
Now all of these technologies are the low level technologies and can be used for creating interactive visualizations but the problem that most of the developers face is they have to write a lot of code and the development cycle gets longer. To solve this problem D3 was built on top of SVG considering the advantages that it(SVG) provides. But remember the low-level technologies will provide you more flexibility than the technologies built on top of that. Again there are many libraries built on top of D3 such as C3.js, NVD3, Dimple.js and many more. But the flexibility reduces high the order and you will be limited to very few options. Rather the development time will be less. But I suggest you stick with D3.js where you will understand how exactly it works and you can be more flexible with your design.
Okay I understand that was a lot of theory but I tried to make it as concise as possible.
Lets now dive into D3 and understand its fundamentals.
D3 has quite a lot of functions that need to be understood but dont worry we will be going through some of them before getting started with writing D3 code and some more as we go on with the complex examples
Selection Functions
d3.select - selects an element from the current document
d3.select is analogous to Javascript's DOM element selection method
document.getElementById('#id') or document.getElementByClass('.class')
whereas the same code can be written resp. in d3 as
Example:
d3.select('#id') or d3.select('.class')
To select multiple elements of the same class or id use d3.selectAll method which selects all the elements matching the id or the class value from the current document
Example:
d3.selectAll('#id') will select all elements with id attribute as 'id'
The d3.select or d3.selectAll method will always return a selection which you can use for accessing the attributes of that element
Remember, d3 works on the pipeline architecture and you will understand it with the next example
Now suppose I have a input element with a value attribute attached to it as
Example:
<input type="text" value="Hello World" ></input>
d3.select('input') selects the input text element
d3.select('input').attr("value", "Hello") can be used to set the value attribute whereas
d3.select('input').attr("value") will return the text value "Hello World"
Thus,
selection.attr - used for getting or setting attribute values
Similarly,
selection.classed - used to add or remove CSS classes
selection.style - used to get or set style properties
selection.property - used to get or set raw properties
selection.html - get or set inner HTML content
Now, to add an element to the current DOM element we have
selection.append which creates and appends new elements to the selected element
To append a <P> tag between div element we would use something like
Example:
<div></div>
d3.select('div').append("p")
Obviously we will be appending more complex elements in the future examples but this is just to give you a taste of the functions.
Okay, this should get you started to start writing the d3 code. There are still a lot of functions to be studied and we will understand them as we proceed with the examples.
Now, lets first create a circle using the SVG code and then try to draw it using the selection functions that we have studied above
<svg width="200" height="200">
<circle cx="25" cy="25" r="25" fill="purple" />
</svg>
Corresponding d3 code :
d3.select("body").append("svg")
.attr("width", 50)
.attr("height", 50)
.append("circle")
.attr("cx",25)
.attr("cy",25)
.attr("r",5)
.style("fill", "purple");
That looks simple right! But suppose if an element has 20 attributes we have to repeat that .attr() function 20 times to set those values. God save me!!!
Well, d3 was developed to make developers life simple and d3 enables us to set multiple attributes at a time in the json form as below
d3.select("body").append("svg")
.attr("width", 50)
.attr("height", 50)
.append("circle")
.attr({
"cx":25,
"cy":25,
"r":5,
"fill": "purple"
});
Good. Lets move on!
Below I have written the SVG code for drawing a rectangle and an ellipse.
Now its your turn to get your hands dirty with basic d3 functions. Go on and try to draw these shapes in d3 using the functions that we've learnt today and don't forget to include the d3.js library in your html document.
SVG code for drawing a rect :
<svg width="200" height="200">
<rect x="20" y="0" width="50" height="50" fill="red" />
</svg>
SVG code for drawing an ellipse :
<svg width="200" height="200">
<ellipse cx="50" cy="50" rx="20" ry="10" fill="blue" />
</svg>
Okay! So we've come too far and I guess this is enough for this post. Give me a rest :P
But you guys don't stop and check out my next post to further dive deep into d3.
Thanks!
References:
https://github.com/mbostock/d3/wiki/API-Reference
D3.js Documentation
D3.js as named is a Javascript library used for visualization and by visualization I mean serious visualization which cannot be ignored.
Before going into D3 lets understand why do we need it. I suppose the person reading this post must be familiar with basic HTML, CSS and Javascript.
To understand about what sort of features D3 provides we will first look at the underneath technologies used for interactive graphics :
1) WebGL - It's a javascript API for rendering interactive 3D graphics and 2D graphics without the use of plugins.
2) Canvas - Anyone who has worked on HTML5 must have heard this term frequently. Canvas is part of HTML5 and it allows for dynamic rendering of 2D shapes and bitmap images. It consists of a drawable region where some of its anticipated uses are building graphs, animations, games etc.
3) SVG - If you intend to understand D3 then the first thing that will get into your way is Scalable Vector Graphics. SVG is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. Basically its an image format for vector graphics
Some of the benefits of SVG that you should be aware of :
- small file sizes that compress well
- scales to any size without losing clarity
- looks great on retina displays
- design control like interactivity and filters
SVG code can be included directly within any HTML document. Web browsers have supported the SVG format for years (Except for Internet Explorer), but it never quite caught on, until now.
Now all of these technologies are the low level technologies and can be used for creating interactive visualizations but the problem that most of the developers face is they have to write a lot of code and the development cycle gets longer. To solve this problem D3 was built on top of SVG considering the advantages that it(SVG) provides. But remember the low-level technologies will provide you more flexibility than the technologies built on top of that. Again there are many libraries built on top of D3 such as C3.js, NVD3, Dimple.js and many more. But the flexibility reduces high the order and you will be limited to very few options. Rather the development time will be less. But I suggest you stick with D3.js where you will understand how exactly it works and you can be more flexible with your design.
Okay I understand that was a lot of theory but I tried to make it as concise as possible.
Lets now dive into D3 and understand its fundamentals.
D3 has quite a lot of functions that need to be understood but dont worry we will be going through some of them before getting started with writing D3 code and some more as we go on with the complex examples
Selection Functions
d3.select - selects an element from the current document
d3.select is analogous to Javascript's DOM element selection method
document.getElementById('#id') or document.getElementByClass('.class')
whereas the same code can be written resp. in d3 as
Example:
d3.select('#id') or d3.select('.class')
To select multiple elements of the same class or id use d3.selectAll method which selects all the elements matching the id or the class value from the current document
Example:
d3.selectAll('#id') will select all elements with id attribute as 'id'
The d3.select or d3.selectAll method will always return a selection which you can use for accessing the attributes of that element
Remember, d3 works on the pipeline architecture and you will understand it with the next example
Now suppose I have a input element with a value attribute attached to it as
Example:
<input type="text" value="Hello World" ></input>
d3.select('input') selects the input text element
d3.select('input').attr("value", "Hello") can be used to set the value attribute whereas
d3.select('input').attr("value") will return the text value "Hello World"
Thus,
selection.attr - used for getting or setting attribute values
Similarly,
selection.classed - used to add or remove CSS classes
selection.style - used to get or set style properties
selection.property - used to get or set raw properties
selection.html - get or set inner HTML content
Now, to add an element to the current DOM element we have
selection.append which creates and appends new elements to the selected element
To append a <P> tag between div element we would use something like
Example:
<div></div>
d3.select('div').append("p")
Obviously we will be appending more complex elements in the future examples but this is just to give you a taste of the functions.
Okay, this should get you started to start writing the d3 code. There are still a lot of functions to be studied and we will understand them as we proceed with the examples.
Now, lets first create a circle using the SVG code and then try to draw it using the selection functions that we have studied above
<svg width="200" height="200">
<circle cx="25" cy="25" r="25" fill="purple" />
</svg>
Corresponding d3 code :
d3.select("body").append("svg")
.attr("width", 50)
.attr("height", 50)
.append("circle")
.attr("cx",25)
.attr("cy",25)
.attr("r",5)
.style("fill", "purple");
That looks simple right! But suppose if an element has 20 attributes we have to repeat that .attr() function 20 times to set those values. God save me!!!
Well, d3 was developed to make developers life simple and d3 enables us to set multiple attributes at a time in the json form as below
d3.select("body").append("svg")
.attr("width", 50)
.attr("height", 50)
.append("circle")
.attr({
"cx":25,
"cy":25,
"r":5,
"fill": "purple"
});
Good. Lets move on!
Below I have written the SVG code for drawing a rectangle and an ellipse.
Now its your turn to get your hands dirty with basic d3 functions. Go on and try to draw these shapes in d3 using the functions that we've learnt today and don't forget to include the d3.js library in your html document.
SVG code for drawing a rect :
<svg width="200" height="200">
<rect x="20" y="0" width="50" height="50" fill="red" />
</svg>
SVG code for drawing an ellipse :
<svg width="200" height="200">
<ellipse cx="50" cy="50" rx="20" ry="10" fill="blue" />
</svg>
Okay! So we've come too far and I guess this is enough for this post. Give me a rest :P
But you guys don't stop and check out my next post to further dive deep into d3.
Thanks!
References:
https://github.com/mbostock/d3/wiki/API-Reference
D3.js Documentation
No comments:
Post a Comment