Anúncio
D3 Basic Tutorial
7 de Oct de 2016•0 gostou•675 visualizações
0 gostaram
Seja o primeiro a gostar disto
mostrar mais
visualizações
Vistos totais
0
No Slideshare
0
De incorporações
0
Número de incorporações
0
Baixar para ler offline
Denunciar
Tao JiangSeguir
Anúncio
D3 Basic Tutorial
- D3 BASIC TUTORIAL Introduction, installation and simple examples. 2016.10@hijiangtao
- MENU D3 Introduction and demo Installing, IDE, etc Coding: visualize your rst chart More
- D3 INTRODUCTION AND DEMO
- 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.
- D3JS.ORG
- 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
- 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
- INSTALLING, IDE, ETC
- INSTALLING // Use a script tag to include library // d3 4.0 standard version <script src="https://d3js.org/d3.v4.js"></script> // d3 4.0 minified version <script src="https://d3js.org/d3.v4.min.js"></script> // d3 3.x version <script src="//d3js.org/d3.v3.js"></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="https://d3js.org/d3selection.v1.js"></script> // or import {scaleLinear} from "d3scale";
- 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 d3.select("body").append("p").text("New paragraph!");
- 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++
- 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
- 4 STEPS TO VISUALIZE YOUR FIRST CHART Construct a simple bar chart from TSV le
- 0. DATA
- 1. A HTML TEMPLATE <html> <head> <meta charset="utf8"> <title>D3 Tutorial</title> <script src="https://d3js.org/d3.v4.min.js"></script> <style> .bar { fill: steelblue; } .bar:hover { fill: brown; } .axisx path { display: none; } </style> </head>
- 2. INITIAL SVG AND SCALE // append a svg element and define margins var svg = d3.select("#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.top 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 + "," + margin.top + ")"; var g = svg.append("g") .attr("transform", transStr);
- 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/tabseparatedvalues d3.tsv(url, row, callback); d3.tsv("d3tutorialtsvdata.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
- 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(data.map(function(d) { return d.letter; })); y.domain([0, d3.max(data, function(d) { return d.frequency; })]); // x axis g.append("g") .attr("class", "axis axisx") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x));
- 5. COMPLETE CODES <html> <head> <meta charset="utf8"> <title>D3 Tutorial</title> <script src="https://d3js.org/d3.v4.min.js"></script> <style> .bar { fill: steelblue; } .bar:hover { fill: brown; } .axisx path { display: none; } </style> </head>
- 6. RESULT
- 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.
- 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
- THE END @hijiangtao - - - d3js.org VIS Course (2016 Fall) Wiki Joe's Blog
Anúncio