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},
]

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

6 Comments

Leave a Reply

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

Google
PC/Internet Tricks

101 Amazing PC / Internet Tricks no one told you before   You Can Search Google Timer In Google For A Timer With Alarm Search This In Google For Direct Mp3 Links intitle:index.of?mp3 Your song name here Use Your Chrome Browser As Notepad Quickly. Just copy the text below to the address Bar. …

Android
2
Animated Splash Screen to you Android App using Android Studio

Today I am switching you to one finest technology of this world and that is Android. In this tutorial I am showing you how you can create a animated Splash screen which is the first part of any android application creation.

develope
Yii2.0 Dynamic Model Creation

As per my previous shared post you have to know what is Yii 2.0 and its awesome features. If you not read these posts please read this and know little bit about Yii2.0 basic(API Web APP) . Today I am sharing you a very new feature of Yii 2.0 which will …