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.
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
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
: 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
16. 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);
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/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 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));
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
