What would one do when one wants to use JavaScript to graphically display some data or statistics on a web-page? Use a library of course. I saw a lot of libraries, but was shocked at what d3.js had to offer. Just have a look at these:
Amazing! The initiators are Michael Bostock, Jeffrey Heer, Vadim Ogievetsky, who created d3.js (BSD license) based on the experience they had from the stepping stones of other similar projects that didn't work out very well.
It takes a while to figure out how to use d3. If you have a good understanding of JavaScript, you can start off right away. If not, the concepts of anonymous functions and closures will help you learn. Most of the impressive functionality can be implemented with just the d3.js file (319kB). A more compressed version of the file d3.min.js (144kB) is also available. More advanced functions are available in the supporting script files of d3.
A novice would find it surprising, the way d3.js works. By selecting elements of the DOM before they're even created. By passing variables like "d" and "i" internally, which don't seem to be declared anywhere.
But that's the challenge that makes it worth learning! D3 is a tool with which you can use on any area of the DOM. You can create any kind of visualization you want.
To make d3.js simpler, there are encapsulating libraries like nvd3, c3, cubism and rickshaw.
Went through the source code of d3 as usual, and was completely taken aback when I saw they've used the actual pi, phi and lambda symbols as variable names! Decided to ask my community, and here's what they had to say about it. Although it looks fancy, it's better to stick to variable names rather than symbols. Psst...if you want to generate pi on your screen, make sure the num lock on your keyboard is on; then keep the alt key pressed and type 227 on the num pad and you'll get the pi symbol like this ( π ). I pasted it in notepad, and it didn't turn into a junk character. Cool, isn't it?!
Jeff Atwood had an article on the use of unicode too (the 'entity' word is to be replaced by a heart symbol).
After dabbling with d3.js for about a week, I created an ajax program to query a servlet for data and display the retrieved data on a d3 graph. Worked like a charm!
A nice source for learning are the tutorials from the main website, practically trying it out a little, a free book and if that isn't enough, more than a thousand examples with sources, for you to refer. Definitely a work of art!
Amazing! The initiators are Michael Bostock, Jeffrey Heer, Vadim Ogievetsky, who created d3.js (BSD license) based on the experience they had from the stepping stones of other similar projects that didn't work out very well.
It takes a while to figure out how to use d3. If you have a good understanding of JavaScript, you can start off right away. If not, the concepts of anonymous functions and closures will help you learn. Most of the impressive functionality can be implemented with just the d3.js file (319kB). A more compressed version of the file d3.min.js (144kB) is also available. More advanced functions are available in the supporting script files of d3.
A novice would find it surprising, the way d3.js works. By selecting elements of the DOM before they're even created. By passing variables like "d" and "i" internally, which don't seem to be declared anywhere.
But that's the challenge that makes it worth learning! D3 is a tool with which you can use on any area of the DOM. You can create any kind of visualization you want.
To make d3.js simpler, there are encapsulating libraries like nvd3, c3, cubism and rickshaw.
Went through the source code of d3 as usual, and was completely taken aback when I saw they've used the actual pi, phi and lambda symbols as variable names! Decided to ask my community, and here's what they had to say about it. Although it looks fancy, it's better to stick to variable names rather than symbols. Psst...if you want to generate pi on your screen, make sure the num lock on your keyboard is on; then keep the alt key pressed and type 227 on the num pad and you'll get the pi symbol like this ( π ). I pasted it in notepad, and it didn't turn into a junk character. Cool, isn't it?!
Jeff Atwood had an article on the use of unicode too (the 'entity' word is to be replaced by a heart symbol).
After dabbling with d3.js for about a week, I created an ajax program to query a servlet for data and display the retrieved data on a d3 graph. Worked like a charm!
A nice source for learning are the tutorials from the main website, practically trying it out a little, a free book and if that isn't enough, more than a thousand examples with sources, for you to refer. Definitely a work of art!
No comments:
Post a Comment