D3.JS Overview

D3.Js-Introduction

In My previous article we seen what is d3.js.This part will discuss how to use d3.js.

I already told d3.js is a Java Script Library so we need to download the library for using.

Download the Latest Version for D3.Js

https://github.com/mbostock/d3/releases/download/v3.4.9/d3.zip

Run time you can Link Directly by Using Below Code

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

Sample Code for Incuding D3.js in Html

<!doctype Html>
<html>
<head>

    <title>D3 Tutorial</title>

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


</head>
<body>
</body>
</html>

Some Basic Functionalists in D3.JS

Select and Append

Select will use to select the DOM.

Append will used to append the new DOM dynamically.

For Example,

In css we need to give a color for paragraph tag,So that we need to select paragraph tag with using the following code.

p {
 color:blue;
}

So, In D3.js using select function we will select the DOM

For Example:

d3.select("p");

Above Code will use to select the paragraph tag.

Example Code:

<!doctype Html>
<html>
<head>

    <title>D3 Tutorial</title>

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

</head>
<body>
    <p>This is a Paragraph.</p>
    <script type="text/javascript">

        // Select the Paragraph Tag
        d3.select("P");

    </script>
</body>
</html>

Output For above Code : (In our Code we only select the paragraph tag.So,output don't have any change)

 This is a Paragraph.

Once selected the Paragraph tag then you can maintain all paragraph tag properities.

For example.(Update the text for Paragraph)

d3.select("p").text("New Text for Paragraph");

Example Code:

<!doctype Html>
<html>
<head>

    <title>D3 Tutorial</title>

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


</head>
<body>
    <p>This is a Paragraph.</p>
    <script type="text/javascript">

        // Select the Paragraph Tag
        d3.select("P").text("New Text for Paragraph");

    </script>
</body>
</html>

Output: (Here we updated the text)

New Text for Paragraph

Append :

Append will used to append the tag dynamically.

For Example:

d3.select("body").append("h1").text("This is Header Tag");

Example Code :

<!doctype Html>
<html>
<head>

    <title>D3 Tutorial</title>

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

</head>
<body>

    <p>This is a Paragraph.</p>
    <script type="text/javascript">

        // Select the Paragraph Tag
        d3.select("P").text("New Text for Paragraph");

        // Append the H1 Tag using append function
        d3.select("body").append("h1").text("This is Header Tag");

    </script>

</body>
</html>

Output:

 New Text for Paragraph

This is Header Tag

Refer Video Tutorial

Overview about D3.js - Part1

What is D3.js?

D3.js is a JavaScript library for manipulating documents based on data.

D3 helps you bring data to life using HTML, SVG and CSS.

Basically Using D3.Js we can easily visualize the data's.

There are many library for viualize the data as graphs.But the beauty of d3.js is SVG (Scalable Vector Graphics) based.We can easily create and show any type of visualizing not only like line chart,bubble chart,area chart etc.Also,We can create based on our choice.

SVG

What is SVG mean?

SVG stands for Scalable Vector Graphics.
SVG is used to define vector-based graphics for the Web
SVG defines the graphics in XML format
SVG graphics do NOT lose any quality if they are zoomed or resized
Every element and every attribute in SVG files can be animated

Sample Simple Graphs Using D3.Js

Sample Advanced Graphs

Refer More Examples at : http://d3js.org/

Video Tutorial about D3.Js

https://www.youtube.com/watch?v=n5NcCoa9dDU

This is the Basic introduction about D3.js.I hope you all now know what is d3.js.In future article i will tell you how to start write coding using D3.Js

Creating Bar chart using SVG in d3.js

In this article using SVG (Scalable Vector Graphics) we can create the bar chart.Last three articles we are seeing about the bar chart creation in different ways.

So in this article also we are going to see for creating bar chart using svg

Comparing div and svg

SVG would be easier for you, since selection and moving it around is already built in. SVG objects are DOM objects, so they have "click" handlers, etc.

DIVs are okay but clunky and have awful performance loading at large numbers.

Also see some of the similarities between svg and html

You can write SVG markup and embed it directly in a web page (provided you use <!DOCTYPE html>). You can inspect SVG elements in your browser’s developer tools. And SVG elements can be styled with CSS, albeit using different property names like fill instead of background-color. However, unlike HTML, SVG elements must be positioned relative to the top-left corner of the container; SVG does not support flow layout or even text wrapping.

Now we will see the same example which we seen in last article.But in program is created using svg

<!DOCTYPE html>
 <html>
  <head>
    <style>
    .chart rect {
      fill: steelblue;
    }
    .chart text {
      fill: white;
      font: 10px sans-serif;
      text-anchor: end;
    }

    </style>
    </head>
     <body>
    <svg class="chart" width="420" height="120">
      <g transform="translate(0,0)">
        <rect width="40" height="19"></rect>
        <text x="37" y="9.5" dy=".35em">4</text>
      </g>
      <g transform="translate(0,20)">
        <rect width="80" height="19"></rect>
        <text x="77" y="9.5" dy=".35em">8</text>
      </g>
      <g transform="translate(0,40)">
        <rect width="150" height="19"></rect>
        <text x="147" y="9.5" dy=".35em">15</text>
      </g>
      <g transform="translate(0,60)">
        <rect width="160" height="19"></rect>
        <text x="157" y="9.5" dy=".35em">16</text>
      </g>
      <g transform="translate(0,80)">
        <rect width="230" height="19"></rect>
        <text x="227" y="9.5" dy=".35em">23</text>
      </g>
      <g transform="translate(0,100)">
        <rect width="420" height="19"></rect>
        <text x="417" y="9.5" dy=".35em">42</text>
      </g>
    </svg>
     </body>
     </html>

Output for above program

But unlike the div elements that were implicitly positioned using flow layout, the SVG elements must be absolutely positioned with hard-coded translations relative to the origin.

Normally svg doesn't support all styles which are all supported by html.So take a look for understanding about the svg styles by using the below link.

http://www.w3.org/TR/SVG/styling.html

So next articles we will see more about svg and some more charts.

D3.JS Overview - Part 2

Your comment on this post:

Related Articles

What is D3.js?