Download as PDF, PPTX
![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);](https://image.slidesharecdn.com/5e53f57f-e22f-441b-a134-a1f5a7ba3f6a-161007073831/85/D3-Basic-Tutorial-16-320.jpg)
![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));](https://image.slidesharecdn.com/5e53f57f-e22f-441b-a134-a1f5a7ba3f6a-161007073831/85/D3-Basic-Tutorial-18-320.jpg)
![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);](https://image.slidesharecdn.com/5e53f57f-e22f-441b-a134-a1f5a7ba3f6a-161007073831/75/D3-Basic-Tutorial-16-2048.jpg)
![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));](https://image.slidesharecdn.com/5e53f57f-e22f-441b-a134-a1f5a7ba3f6a-161007073831/75/D3-Basic-Tutorial-18-2048.jpg)
Uploaded byTao Jiang
D3 Basic Tutorial
This document provides an introduction and overview of D3 (D3.js), an open-source JavaScript library for visualizing data using web standards like SVG, HTML and CSS. It discusses how to install D3, introduces common chart types like trees, networks and maps, and provides a 4-step tutorial for creating a basic bar chart from TSV data to get started with visualizing data in D3. The document recommends additional learning resources for diving deeper into D3.
More Related Content
D3 Basic Tutorial
- 1. D3 BASIC TUTORIAL Introduction,installation and simple examples. 2016.10@hijiangtao
- 2. MENU D3 Introduction anddemo Installing, IDE, etc Coding: visualize your rst chart More
- 3.
- 4. D3 INTRODUCTION D3 (orD3.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.
- 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 ANDCANVAS 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
- 8.
- 9.
- 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 d3.select("body").append("p").text("New paragraph!");
- 11. IDE Microsoft Notepad : Asophisticated 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 TOVISUALIZE YOUR FIRST CHART Construct a simple bar chart from TSV le
- 14.
- 15. 1. A HTMLTEMPLATE <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>
- 16. 2. INITIAL SVGAND 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);
- 17. 3. LOAD ANDFORMAT 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
- 18. 4. BIND DATAAND 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));
- 19.
- 20.
- 21. MORE Be careful aboutthe 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 - - - d3js.org VIS Course(2016 Fall) Wiki Joe's Blog