Generate Your Visualized Data

Categories Aptitude, CSS3, Cube, develope, Facebook, git, Github, Google, Google Script, Java-script, Javascript, Linux, object-fit, Overview, phonegap, python, Rubik, Searching, SpreedSheet, Version Control, WordPress

You know that if are visualized  your data in html then you use some specific CSS code and these are width/height  for different -different part of your data, but you have visualized your data without css ? that is possible by using D3.js . D3.js is java-script library that uses digital data to drive the creation and control of dynamic and interactive graphical forms which run in web browsers. Here d3 means just for data-driven documents.

d3.js tut by devtantra

To create chart i am use mydata.json file and for connecting to file i am use the d3.json . where .json show the file extension . if you can use csv file then use d3.csv function .

 Index.html

<script charset="utf-8" type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
//<
![CDATA[
d3.json("mydata.json",function(data){ 
var canavas = d3.select("body")
.append("svg") 
.attr("width",500) 
.attr("height",500) canvas.selectAll("rect") .data(data) .enter() .append("rect") .attr("width",function (d){
return d.age * 10; }) 
.attr("height",50) 
.attr("y",function (d) {return i * 50;}) 
.attr("fill","blue") })
// ]]>
</script>

mydata.json

[
{"name":"AJAY","age": 20},
{"name":"Meenaxi","age": 25},
{"name":"Aashish","age": 27},
]

6 Comments

  • shailendra
    January 23, 2014

    very nice and helpful information thnx dude and keep on

    • developer
      February 4, 2014

      thanks shailendra

  • maya
    February 6, 2014

    goog going ajay.. keep it up.. <3 😉

    • developer
      February 7, 2014

      thanks

  • Irish
    July 9, 2014

    I see a lot of interesting posts on your website. You have to
    spend a lot of time writing, i know how to save you a lot of time, there is a tool that creates unique, google friendly articles in couple of minutes, just search in google – laranita’s free content source

    • developer
      July 10, 2014

      Thanks for your information

Leave a Reply

Your email address will not be published. Required fields are marked *