First of all, some basics As I promised in Part 1. D3.js is more beautiful with data, after all it makes sense to make cool visualizations with data , ultimately real value comes ouf of working with data. Data visualizations that makes data sensible to us.
Little bit on D3 Selectors
One of the things that I love about D3 is its W3C standard-compliant (HTML,SVG, CSS). You can control the SVG elements styles thru external stylesheets. Modern browsers Chrome,Firefox,Opera are bringing new features from W3C specs and you get that out of the box with D3.js. It's not reinventing the wheel and that's what I like about D3.js
D3 Selectos uses W3C DOM Selectors API and it says:
"The Selectors API specification defines methods for retrieving
Little bit on D3 Selectors
One of the things that I love about D3 is its W3C standard-compliant (HTML,SVG, CSS). You can control the SVG elements styles thru external stylesheets. Modern browsers Chrome,Firefox,Opera are bringing new features from W3C specs and you get that out of the box with D3.js. It's not reinventing the wheel and that's what I like about D3.js
D3 Selectos uses W3C DOM Selectors API and it says:
"The Selectors API specification defines methods for retrieving
Element nodes from the DOM by matching against a group of selectors."
You can select the elements by
- tag (“tag”) ,
- class (“.class”),
- element id (“#id”), attribute
- (“[name=value]”),
- containment (“parent child”),
- adjacency (“before after”),
and various other facets. Predicates can be intersected (“.a.b”)
or unioned (“.a, .b”), resulting in a rich but concise selection method.
Let's get to some real stuff now. When you use d3, its not required to build data visualizations with SVG only, you can work with normal HTML elements as well, however when you are talking hundreds and thousand of millions of records for data visualizations with filters and animations, SVG will blow you with results
Using D3’s enter and exit selections, you can create new nodes for incoming data and remove outgoing nodes that are no longer needed.
Output:
Notice the dataset variable in your Javascript console
Let's get to some real stuff now. When you use d3, its not required to build data visualizations with SVG only, you can work with normal HTML elements as well, however when you are talking hundreds and thousand of millions of records for data visualizations with filters and animations, SVG will blow you with results
Bring in some data, dude!!!
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Hello, Bar Charts!!!</title>
<script type="text/javascript" src="d3.v2.js"></script>
<link rel="stylesheet" type="text/css" href="hellod3.css">
</head>
<body>
<script type="text/javascript">
var dataset = [];
for (var i = 0; i < 50; i++) {
//Generate random number (0-35)
var randomNumber = Math.random() * 35;
dataset.push(randomNumber);
}
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar")
.style("height", function(d) {
var barHeight = d * 5; //its all about height , calculation matters
return barHeight + "px";
});
</script>
</body>
</html>
CSS
div.bar {
display: inline-block;
width: 20px;
height: 75px; /*Initial height, */
background-color: teal;
margin-right: 2px;
}
Let's understand the code now
d3.select - we are selecting body element and selecting all "div" elements and binding with .data (dataset). Notice here d3 is making use of method chaining and data() is smart enough to loop thru all array elements and applying CSS style at the same time. This is the real power. Your visualization can be complex, but power of data() will amaze you.
Its very important to understand how visualization work in web browser. D3 does this very cleanly,
Using D3’s enter and exit selections, you can create new nodes for incoming data and remove outgoing nodes that are no longer needed.
d3.enter - it creates placeholder nodes for incoming data.
Its rather important to understand d3.exit() at the same time
d3.exit - it removes existing DOM elements in the current selection for which no new data element was found
Its rather important to understand d3.exit() at the same time
d3.exit - it removes existing DOM elements in the current selection for which no new data element was found
(Image Courtesy:vis.stanford.edu/files/2011-D3-InfoVis.pdf)
Output:
Notice the dataset variable in your Javascript console
Ok, in Part3 I am going cover how to draw with SVG with some animations and will explore more on data()
Have fun!!!
