Subscribe via RSS Feed

Introduction To The World Of D3

June 11, 2014 0 Comments

Introduction:

Data-Driven Documents, or D3 for short, is a new visualization library to build visualizations in SVG. D3’s emphasis on web standards gives us the full capabilities of modern browsers without tying ourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

D3 allows us to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, we can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.

D3 is not a monolithic framework that seeks to provide every conceivable feature. Instead, Data-Driven Documents solves the crux of the problem: efficient manipulation of documents based on data. This avoids proprietary representation and affords extraordinary flexibility, exposing the full capabilities of web standards such as CSS3, HTML5 and SVG. With minimal overhead, Data-Driven Documents is extremely fast, supporting large datasets and dynamic behaviors for interaction and animation. D3’s functional style allows code reuse through a diverse collection of components and plugins.

How to get started with D3?

Download the latest version (3.4.8) here:

d3.zip

Or, to link directly to the latest release, copy this snippet:

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

Sites using HTTPS may wish to self-host D3, or use a CDN that supports HTTPS, such as CDNJS. The full source and tests are also available for download on GitHub.

Basic example:
The world of D3 is amazing. We can now limit the demonstration of a certain webpage to the extend of our creativeness. We will be watching a certain basic example of D3 in action in this article.

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

     <style type="text/css">
div{
    background-color: #dd9;
    margin: 5px;
    font-size: 25px;
    color: #007;
    padding: 10px;

}
</style>
  </head>

  <body>
    <div id="viz"></div>
    <script type="text/javascript">

    var sample = d3.select("#viz")
        .append("svg")
        .attr("width", 100)
        .attr("height", 100);    

    sample.append("circle")
        .style("stroke", "gray")
        .style("fill", "white")
        .attr("r", 40)
        .attr("cx", 50)
        .attr("cy", 50)
        .on("mouseover", function(){d3.select(this).style("fill", "blue");})
        .on("mouseout", function(){d3.select(this).style("fill", "white");});    
    </script>
</body>
</html>

d3 intro

This is a basic example of D3. In this example we have drawn a circle over a colored film. This circle will change it’s color depending over the mouse pointer’s position. We have a .on() initiated on mouseover and mouseout. Depending upon which method is activated, style of the circle will change.
As we will further progress in the deepest part of the D3. We will witness it’s wonders.

If you find this article helpful, you can connect us in Google+ and Twitter.