Mais conteúdo relacionado


D3 Basic Tutorial

  1. D3 BASIC TUTORIAL Introduction, installation and simple examples. 2016.10@hijiangtao
  2. MENU D3 Introduction and demo Installing, IDE, etc Coding: visualize your rst chart More
  4. D3 INTRODUCTION D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.
  5. D3JS.ORG
  6. ONLINE GALLERY Charts: Tree, Chord, and Sankey: Networks: Maps: Trending: Population Pyramid Sankey Diagrams Collapsible Force Layout Tokyo Wind Map World Bank Global Development Sprint
  7. HTML, SVG AND CANVAS HTML: Hyper Text Markup Language, is a markup language for describing web documents (web pages) SVG: Scalable Vector Graphics. SVG de nes vector-based graphics in XML format Canvas: The <canvas>element is only a container for graphics. You must use a JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images
  9. INSTALLING // Use a script tag to include library // d3 4.0 standard version  <script src=""></script> // d3 4.0 minified version <script src=""></script> // d3 3.x version <script src="//"></script> // Import D3 into an application npm install d3 // installing command import * as d3 from "d3"; // use in application // include standalone D3 microlibraries <script src="­selection.v1.js"></script> // or import {scaleLinear} from "d3­scale";
  10. INSTALLING API: ( , , , ), , , , ( , ... After include the library into your workspace, you can use namespace d3 to visualize your data, such as: Arrays Statistics Search Transformations Histograms Axes Brushes Chords Collections Objects Maps"body").append("p").text("New paragraph!");
  11. IDE Microsoft Notepad : A sophisticated text editor for code, markup and prose : The smartest JavaScript IDE : Capable and Ergonomic Java * IDE : Eclipse IDE for JavaScript Web Developers : A hackable text editor : A free source code editor Sublime Text Webstorm IntelliJ IDEA Eclipse Atom Notepad++
  12. SERVER CONFIGURATION : WAMP, LAMP, MAMP and XAMPP : A JavaScript runtime built on Chrome's V8 JavaScript engine : A platform-independent, Java-centric environment : SimpleHTTPServer, Simple HTTP request handler in python 2 Others Apache Node.js J2EE Python
  13. 4 STEPS TO VISUALIZE YOUR FIRST CHART Construct a simple bar chart from TSV le
  14. 0. DATA
  15. 1. A HTML TEMPLATE <html> <head> <meta charset="utf­8"> <title>D3 Tutorial</title> <script src=""></script> <style> .bar {   fill: steelblue; } .bar:hover {   fill: brown; } .axis­­x path {   display: none; } </style> </head>
  16. 2. INITIAL SVG AND SCALE // append a svg element and define margins var svg ="#barchart") .append("svg") .attr("width", 960) .attr("height", 500),     margin = {top: 20, right: 20, bottom: 30, left: 40},     width = +svg.attr("width") ­ margin.left ­ margin.right,     height = +svg.attr("height") ­ ­ margin.bottom; // Constructs a new band scale (x) and a new continuous scale (y) var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),     y = d3.scaleLinear().rangeRound([height, 0]); // append g element var transStr = "translate(" + margin.left + "," + + ")"; var g = svg.append("g")     .attr("transform", transStr);
  17. 3. LOAD AND FORMAT DATA // d3 tsv Function // Creates a request for the TSV file at the specified url  // with the default mime type text/tab­separated­values d3.tsv(url, row, callback); d3.tsv("d3­tutorial­tsv­data.tsv", function(d) {   d.frequency = +d.frequency;   return d; }, barchartCallback); Requests (d3-request) - get a comma-separated values (CSV) le. - get an HTML le. - get a JSON le. - get a plain text le. - get a tab-separated values (TSV) le. - get an XML le. d3.csv d3.html d3.json d3.text d3.tsv d3.xml
  18. 4. BIND DATA AND UPDATE ELEMENT function barchartCallback(error, data) {   if (error) throw error;   // Given a value from the domain   // returns the corresponding value from the range.   x.domain( {     return d.letter;    }));   y.domain([0, d3.max(data, function(d) {     return d.frequency;    })]);   // x axis   g.append("g")       .attr("class", "axis axis­­x")       .attr("transform", "translate(0," + height + ")")       .call(d3.axisBottom(x));   
  19. 5. COMPLETE CODES <html> <head>   <meta charset="utf­8">   <title>D3 Tutorial</title>   <script src=""></script>   <style>   .bar {     fill: steelblue;   }   .bar:hover {     fill: brown;   }   .axis­­x path {     display: none;   }   </style> </head>
  20. 6. RESULT
  21. MORE Be careful about the API's differences between 4.0 and 3.x Be careful about async loading in JavaScript Make good use of Google, Stack Over ow, etc.
  22. MORE , Mike Dewar, O'Reilly Media, June 2012 , 吕之华 , 陈为,沈则潜,陶煜波等著 / English Version D3 WIKI D3 API Reference D3 Gallery Mike's Blog Tutorials Getting Started with D3 精通D3.js:交互式数据可视化高级编程 数据可视化 JavaScript高级程序设计(第3版) Professional JavaScript for Web Developers 3rd Edition
  23. THE END @hijiangtao - - - VIS Course (2016 Fall) Wiki Joe's Blog