Create a chart graph using d3.js

In my last article i was created a bar chart with using javascript.I simply created using html and css.

This article we going to see how to create a graph with using d3.js

First,In java script prepare the data sets

var data = [4, 8, 15, 16, 23, 42];

Based on the above number of data's we create a separate div for each.

So first create a styles for bar chart

<style>

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

</style>

Also,Create a placeholder for chart

<div class="chart"></div>

Then using Linear scales method in d3 we can map a continuous input domain to a continuous output range.

D3’s scales specify a mapping from data space (domain) to display space (range)

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 420]);

Although x here looks like an object, it is also a function that returns the scaled display value in the range for a given data value in the domain. For example, an input value of 4 returns 40, and an input value of 16 returns 160.

Then using d3 functions select and selectAll to select the placeholder part and plot the data's

d3.select(".chart")
  .selectAll("div")
    .data(data)
  .enter().append("div")
    .style("width", function(d) { return x(d) + "px"; })
    .text(function(d) { return d; });

From the above code select is used to select the container (In this program .chart is the container)

selectAll method is used to select all the elements.Here it will select all the div.In d3 using data we will pass the datas.So in above programs based on the datas it append the number div using append method.

Using style method it will set the styles.In above program width will set based on the datas and text method used to set the text.

Full Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

</style>
</head>
<body>
<div class="chart"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var data = [4, 8, 15, 16, 23, 42];

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 420]);

d3.select(".chart")
  .selectAll("div")
    .data(data)
  .enter().append("div")
    .style("width", function(d) { return x(d) + "px"; })
    .text(function(d) { return d; });

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

Output for the above code:

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.

Creating a chart without using javascript

How to create a bar chart with out using javascript?

Its simple to create a bar chart with using css and html itself.But it is not a perfect way.So before going to see the d3 charts in this article how to create a chart without using javascript.

Lets take a look.Below code is a sample for creating a chart with using html and css.

Example:

<!DOCTYPE html>
<style>

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

</style>
<div class="chart">
  <div style="width: 40px;">4</div>
  <div style="width: 80px;">8</div>
  <div style="width: 150px;">15</div>
  <div style="width: 160px;">16</div>
  <div style="width: 230px;">23</div>
  <div style="width: 420px;">42</div>
</div>

Output for the above program

This chart has one div for a container, and one child div for each bar. The child divs have a blue background color and a white foreground color, giving the appearance of bars with right-aligned value labels. You could simplify this implementation even further by removing the containing chart div.

But more commonly your page will contain content in addition to the chart, so having a chart container lets you position and style the chart without affecting the rest of the page.

Next article we will see how to create a charts using javascript and d3.js

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 Map in D3 using GeoJSON?

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

Using D3 we can create a map.D3 provides API for creating a map.

It provides may ways creating methods.

Some of the methods

d3.geoAiry()
d3.geoAlbers()
d3.geoArmadillo()
d3.geoAugust()
d3.geoAzimuthalEqualArea()
d3.geoAzimuthalEquidistant()
d3.geoBerghaus()
d3.geoBoggs()
d3.geoBottomley()
d3.geoChamberlinAfrica()
d3.geoConicConformal()
d3.geoConicEquidistant()
d3.geoCraster()
d3.geoCylindricalEqualArea()
d3.geoCylindricalStereographic()

Example Code for Creatiing Map in D3 Using countries.geo.json

HTML CODE

<svg id="map">
</svg>

Javascript Code

var width = 1200;
var height = 800;
var elm = d3.select('#map')
.attr('width',width+'px')
.attr('height',height+'px');

var projection = d3.geoAzimuthalEqualArea().scale(130);
var path = d3.geoPath().projection(projection);
var graticule = d3.geoGraticule();
elm.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);

d3.json("./assets/json/countries.geo.json", function (data) {
elm.selectAll('path')
.data(data.features)
.enter()
.append('path')
.attr('d',path)
.attr('fill','blue');
elm.selectAll('circle')
.data(data.features)
.enter()
.append('circle')
.attr('r',Math.random()*10)
.attr("transform", function(d) {
var p = projection(d3.geoCentroid(d));
return "translate("+p+")";
});
});
}]);

Output Screen for above code:

Video Tutorial for MAP Creation

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

Create a chart graph using d3.js

References

Your comment on this post:

Related Articles

What is D3.js?