top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

Reusable charts in d3?

+3 votes
1,508 views

What is d3.js?

D3.js is a JavaScript library which used to create a interactive charts.D3 is a wonderful library for creating different kind of charts with using our data's

More information about d3.js - http://tech.queryhome.com/49964/overview-about-d3-js-part1

What is Reusable charts ?

Reusable chart is nothing but the charts should already created we can simply get benefit of the charts.we don't need to spend time to create a charts from scratch.

Some of the Reusable charts for d3.js.

1)NVD3
2)C3js

1) NVD3

NVD3 is one of the reusable charts for d3.js.They create some basic frequent charts like pie chart,bar chart,bubble chart,stacked bar chat etc.. using d3.js with the name of nvd3.js

What is the required library for nvd3?

Download d3.v3 here. It is the only required library for nvd3.

See the example page for nvd3 here : http://nvd3.org/examples/index.html

Also,Download Nvd3 examples here as Zip format : https://github.com/novus/nvd3/zipball/master

2) C3.JS

C3.js is the another reusable charts for d3.js.This library also already created some predefined charts like line charts,bar charts etc. with using the d3.js.

Download the latest version of C3.js here

Or Load using Scripts ans css

<!-- Load c3.css -->
<link href="/path/to/c3.css" rel="stylesheet" type="text/css">

<!-- Load d3.js and c3.js -->
<script src="/path/to/d3.v3.min.js" charset="utf-8"></script>
<script src="/path/to/c3.min.js"></script>

See the more reference from the official site : http://c3js.org/

Visit the example pages for reusable charts here : http://c3js.org/examples.html

Both nvd3 and c3.js are famous reusable charts.All chats are implemented by using d3 library.So whenever user need to use these libraries they simply need to copy the coding and change their own data.That sol your change is ready.

Data will be created either json or csv.Based on the graph they created some sample data for each graph.So you need to create your own data with the same format which they created.

posted Oct 13, 2014 by Pardeep Kohli

  Promote This Article
Facebook Share Button Twitter Share Button LinkedIn Share Button


Related Articles

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​

 

 READ MORE
...