Everyday is a new day and it brings you new surprises. For me, it came in form of D3.js at Data Visualization Toronto Meetup and amazed by it. It gets more interesting with crossfilter and dc.js - which I will leave it for future posts
In order to work with D3 you need to understand Javascript Objects, functions and the method-chaining paradigm of JQuery. A basic understanding of SVG, CSS will go a long way.
Let's start with
SVG specification is developed by W3C and here's the most basic explanation of it
Graphics Most existing XML grammars represent either textual
information, or represent raw data such as financial
information. They typically provide only rudimentary graphical
capabilities, often less capable than the HTML 'img' element.
SVG fills a gap in the market by providing a rich, structured
description of vector and mixed vector/raster graphics; it can
be used stand-alone, or as an XML
namespace with other grammars.
SVG provides basics shapes like rect,circle,ellipse,line,polyline,polygon
D3 employs a declarative approach, operating on arbitrary sets of nodes called selections. So every DOM element is essentially a selector as show above.
Data Driven Document (D3).js is a data visualization library for web created by Michael Bostock, Vadim Ogievetsky and Jeffrey Heer. Without wasting any further time, let's start with basics. D3.js alllows you to manipulate documents based on data. D3 helps you bring data to life using HTML, SVG and CSS.
Let's start with
SVG (Scalable Vector Graphics)
SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and, if need be, compressed. As XML files, SVG images can be created and edited with any text editor, but it is often more convenient to create them with drawing programs (source:wiki)
SVG specification is developed by W3C and here's the most basic explanation of it
Scalable - means to increase or decrease uniformly. In
terms of graphics, scalable means not being limited to a
single, fixed, pixel size.
Vector graphics contain geometric objects such as lines and
curves.
SVG provides basics shapes like rect,circle,ellipse,line,polyline,polygon
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="50" cy="70" r="40" fill="red" />
</svg>
Now, we are done with SVG basics let's start with an example
We need
- A browser and a web server (for Mac/Linux users: there is one build in your machine, just start python -m SimpleHTTPServer 8888 in Terminal Window and the current path becomes ‘server’) . For windows user Apache Tomact or nginx [engine x] would also work
- Download d3.js (comes with samples, some of them will NOT run when you open the html files as file, so use the web server instead!)
- Text editor
<!DOCTYPE html>
<html>
<head>
<title>Hello, D3!!!</title>
<script type="text/javascript" src="lib/d3.js"></script>
</head>
<body>
<div id="dvto"></div>
<script type="text/javascript">
var vizSVG = d3.select("#
dvto
")
.append("svg:svg")
.attr("width", 100)
.attr("height", 100);
vizSVG
.append("svg:circle")
.style("stroke", "black")
.style("fill", "red")
.attr("r", 40)
.attr("cx", 100)
.attr("cy", 50)
</script>
</body>
</html>
Here's the output
D3 employs a declarative approach, operating on arbitrary sets of nodes called selections. So every DOM element is essentially a selector as show above.
Equivalent SVG Source of above
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
fill="red"/>
</svg>
<circle cx="100" cy="50" r="40" stroke="black"
fill="red"/>
</svg>
That's it for now, have fun!! I will go more deep into D3, Crossfilter concepts and explain dc.js (Dimensional Charting) in upcoming posts in Part2 and onwards
No comments:
Post a Comment