Most people don't know that D3 stands for the three D's: Data Driven Documents (same way that C4ISR means Command, Control, Communications, Computers, Intelligence, Surveillance and Reconnaissance in our defence architecture).
Even to an experienced programmer, d3.js syntax can be very complex. But this complexity can also simplify a lot for us. We've been too accustomed to using for and while loops in programming. d3 offers a more elegant solution, in the same way that MATLAB offered matrix operations with a very clean and intuitive syntax, free of loops.
I had a hard time with d3, and decided to create a d3 tutorial for newbies.
The usual HTML, JavaScript and SVG
First, you should know that it's possible to draw on a web page, using SVG (Internet Explorer 8 and below don't support svg. Use Firefox or Chrome instead).
This code will draw a circle:
Notice that some properties have been given to the circle. There's cx, cy, r, stroke, stroke-width and fill. The svg tag itself has been given a width and height, and the svg tag is within the body tag of html.
Even to an experienced programmer, d3.js syntax can be very complex. But this complexity can also simplify a lot for us. We've been too accustomed to using for and while loops in programming. d3 offers a more elegant solution, in the same way that MATLAB offered matrix operations with a very clean and intuitive syntax, free of loops.
I had a hard time with d3, and decided to create a d3 tutorial for newbies.
The usual HTML, JavaScript and SVG
First, you should know that it's possible to draw on a web page, using SVG (Internet Explorer 8 and below don't support svg. Use Firefox or Chrome instead).
This code will draw a circle:
<html>
<body>
<svg height="100" width="100">
<circle cx="50" cy="50" fill="red" r="40" stroke-width="3" stroke="black">
</circle></svg></body>
</html>Notice that some properties have been given to the circle. There's cx, cy, r, stroke, stroke-width and fill. The svg tag itself has been given a width and height, and the svg tag is within the body tag of html.
You should also know that JavaScript allows you to select elements in your DOM and apply properties to them. You can add "some text" dynamically in the tag, with this code:
<html>
<body>
<p id="someID"></p>
<script>
var b = document.getElementById("someID");
b.innerHTML = "some text";
</script>
</body>
</html>
Now have a look at some d3 code which does pretty much the same thing:
<html>
<head>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<p id="someID"></p>
<script>
var abc = d3.select("body") //select the body tag
.append("svg") //add an svg tag to body
.attr("width", 100) //specify the svg tag properties
.attr("height", 100)
.append("circle") //add an svg circle
.attr("cx", 50) //specify properties of the circle
.attr("cy", 50)
.attr("r", 40)
.attr("stroke", "black")
.attr("stroke-width", "3")
.attr("fill", "red");
//If there's a tag with an id (see the top of this code), you can select it like this:
var xyz = d3.select("#someID").text("some text");
</script>
</body>
</html>
If someID was specified as <p class="someID"></p>,you'd have to select it using d3.select(".someID");
Instead of statically creating an html tag for <p>, you can also dynamically create it like this:
var efg = d3.select("body")
.append("p")
.text("some more text");
Simple enough?
All that "attr" syntax may look un-necessary at first, but I'll soon show you why it's helpful to have it that way, and I'll explain the concept of enter(), data() and exit() which bring in the real power of the d3 syntax.
Continued in part2.
2 comments:
Nicely Simply Explained ..:>}
Thanks Vijay! Hope this is the simplest and easiest-to-understand d3.js tutorial on the internet :-)
There are millions of people on the internet who help each other. This is one way I contribute back to the community. Hope you do do too someday. http://nrecursions.blogspot.in/2014/02/contributing-to-open-source-community.html
Post a Comment