Data Visualization Using D3 Part-1

40 %
60 %
Information about Data Visualization Using D3 Part-1
Technology

Published on March 6, 2014

Author: udhayaskumar

Source: slideshare.net

Description

Data visualization using D3 js and some basic methods of D3 Js with examples.

Data Visualization Using D3(V1) UdhayaKumar. D udhayakumar.dhanabalan@gmail.com

Agenda  What and Why is Data Visualization?  Data visualization Tools.  D3 (Data Driven Documents)  What is SVG?  How to use D3.  Basic D3 methods with examples.

What and Why is Data Visualization? Data visualization is nothing but representing of data in a pictorial or graphical format like Graph,Chart, Maps etc. "A picture is worth a thousand words" After evolving of "Big Data" more and more data is collected and analyzed, This big volume of analyzed data needs to be represented to the users which they can understand easily. Representing the data is the Visualization format like (graphs,chart,maps) will helps the user to understand fast and better than representing in the text or data format. Decision makers at all levels welcome data visualization software that enables them to see analytical results presented visually

Data visualization Tools. 01. D3 02. iCharts (Google Docs, excel) 03. Raphael 04. jQuery Visualize 05. jqPlot 06. Highcharts 07. Google Charts 08. Crossfilter 09. R

D3     D3 (Data Driven Documents) D3 is a JavaScript library for manipulating documents based on data D3 express data visually on the web using HTML, SVG and CSS. D3 Supports all major browsers

What is SVG? SVG - Scalable Vector Graphics. SVG is an XML-based vector image format for twodimensional graphics that has support for interactivity and animation. Basic SVG Example: <html> <body> <h1>My first SVG</h1> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" strokewidth="4" fill="yellow" /> </svg>

How to use D3 Download the latest version (3.4.3) from the below link https://github.com/mbostock/d3/releases/download/v3.4.3/d3.zip OR Add the script tag in the head section of your HTML page where you are going to use the d3 features <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

Some of the basic methods in D3  select  append  bind event  Animation All attributes and styles can be animated using .transition(), .delay() and .duration()  enter  binding data  loading data from a file

Select, Append, Bind event <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> </head> <body> <div id="viz"></div> <script type="text/javascript"> var sampleSVG = d3.select("#viz") .append("svg") .attr("width", 100) .attr("height", 100); sampleSVG.append("circle") .style("stroke", "gray") .style("fill", "white") .attr("r", 40) .attr("cx", 50) .attr("cy", 50) .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");}) .on("mouseout", function(){d3.select(this).style("fill", "white");}); </script> </body> </html>

Animation (.transition(), .delay() and .duration()) <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script </head> <body> <div id="viz"></div> <script type="text/javascript"> var sampleSVG = d3.select("#viz") .append("svg") .attr("width", 100) .attr("height", 100); sampleSVG.append("circle") .style("stroke", "gray") .style("fill", "white") .attr("r", 40) .attr("cx", 50) .attr("cy", 50) .transition() .delay(100) .duration(1000) .attr("r", 10) .attr("cx", 30) .style("fill", "black"); </script> </body> </html>

Animation Chaining. <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> </head> <body> <div id="viz"></div> <script type="text/javascript"> var sampleSVG = d3.select("#viz") .append("svg") .attr("width", 100) .attr("height", 100); sampleSVG.append("circle") .attr("cx", 50) .attr("cy", 50) .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");}) .on("mouseout", function(){d3.select(this).style("fill", "white");}) .on("mousedown", animate); function animate() { d3.select(this).transition() .duration(1000) .attr("r", 10) .transition() .delay(1000) .attr("r", 40); };`` </script> </body> </html>

end event, .each() The best way to use Animation chaining is using end event with the .each(); method. <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> </head> <body> <div id="viz"></div> <script type="text/javascript"> var sampleSVG = d3.select("#viz") .append("svg") .attr("width", 100) .attr("height", 100) sampleSVG.append("circle") .style("stroke", "gray") .style("fill", "white") .attr("r", 40) .attr("cx", 50) .attr("cy", 50) .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");}) .on("mouseout", function(){d3.select(this).style("fill", "white");}) .on("mousedown", animateFirstStep); Continued......

end event, .each() ….. function animateFirstStep(){ d3.select(this) .transition() .delay(0) .duration(1000) .attr("r", 10) .each("end", animateSecondStep); }; function animateSecondStep(){ d3.select(this) .transition() .duration(1000) .attr("r", 40); }; </script> </body> </html>

enter Below are some examples states about Enter and its differences: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"/> <style type="text/css"> p {font-size: 20px;color: orangered;} </style> </head> <body> <div id="viz"></div> <script type="text/javascript"> pdata = [10,12,6,8,15]; selectDIV = d3.select("#viz"); selectDIV.selectAll("p") .data(pdata) .enter() .append("p") .text(function(d){return d;}); </script> </body> </html>

enter Example 2 for Enter: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"/> <style type="text/css"> p {font-size: 20px;color: orangered;} </style> </head> <body> <div id="example2"> <p>Already existing paragraph 1</p> <p>Already existing paragraph 2</p> </div> <script type="text/javascript"> pdata = [10,12,6,8,15]; selectDIV = d3.select("#example2"); selectDIV.selectAll("p") .data(pdata) .enter() .append("p") .text(function(d){return d;}); </script> </body> </html>

enter Example 3 for Enter: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> <style type="text/css"> p {font-size: 20px;color: orangered;} </style> </head> <body> <div id="example3"> <p>Already existing paragraph 1</p> <p>Already existing paragraph 2</p> </div> <script type="text/javascript"> pdata = [10,12,6,8,15]; selectDIV = d3.select("#example3"); selectDIV.selectAll("p") .data(pdata, function(d){return d;}) .enter() .append("p") .text(function(d){return d;}); </script> </body> </html>

Loading data from a file <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> </head> <body> <div id="viz"></div> <script type="text/javascript"> d3.text("sample.txt", function(datasetText) { var parsedCSV = d3.csv.parseRows(datasetText); var sampleHTML = d3.select("#viz") .append("table") .style("border-collapse", "collapse") .style("border", "2px black solid") .selectAll("tr") .data(parsedCSV) .enter().append("tr") Continued.....

Loading data from a file …... .selectAll("td") .data(function(d){return d;}) .enter().append("td") .style("border", "1px black solid") .style("padding", "5px") .on("mouseover", function(){d3.select(this).style("background-color", "aliceblue")}) .on("mouseout", function(){d3.select(this).style("background-color", "white")}) .text(function(d){return d;}) .style("font-size", "12px"); }); </script> </body> </html>

Loading data from a file Sample txt file which has content to load in the previous example: car name,miles/gallon,cylinders,displacement,horsepower,weight,acceleration,model year,origin "chevrolet chevelle malibu",18,8,307,130,3504,12,70,1 "buick skylark 320",15,8,350,165,3693,11.5,70,1 "plymouth satellite",18,8,318,150,3436,11,70,1

Thank You Questions? Comments? Thank You! Please contact – udhayakumar.dhanabalan@gmail.com With your questions and comments.

Add a comment

Related presentations

Related pages

Data visualization, Part 1: Visualize browsing metrics ...

You'll see how to use Scalable Vector Graphics ... I start using D3 with d3.select ... ArticleTitle=Data visualization, Part 1: ...
Read more

Data visualization, Part 2: Use D3 component layouts

... learn how to use Scalable Vector Graphics ... to represent your data on a canvas, using both D3's and ... learned in Part 1 about D3's ...
Read more

Web-Based Visualization Part 1: The D3.js Key Concept ...

Download Web-Based Visualization Part 1: The D3.js Key Concept here. ... the science of data visualization. ... Using D3′s advanced layouts for unique ...
Read more

Method: Data visualization with D3.js and python - part 1 ...

Using the D3.js library. ... part 1 - data visualization with D3.js and python; ... Data ...
Read more

Data Visualization and D3.js | Udacity

Data Visualization and D3.js Communicating with Data intermediate. Approx. 7 weeks ... Create a data visualization using a software of your choice.
Read more

VIDA.IO - Data Visualization with D3.js

Data Visualization with D3.js. Data Visualization with D3.js ...
Read more

Data Visualization using D3[Intro Video] - YouTube

In this video, I will show you a quick example of how to bind data using D3 and make some visualization settings to build a table.
Read more

Data Visualization using D3.js - YouTube

Data Visualization using D3.js ... Big Data Visualizations made easy using D3 by Md Aman Khan @ ... Data Visualization with D3.js ...
Read more

Why D3.js is So Great for Data Visualization | Visually Blog

... tool for creating data visualizations. ... D3.js is So Great for Data Visualization ... a push towards documents created using open standards ...
Read more

D3.js - Data-Driven Documents

See more examples. D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS.
Read more