D3.js入门指南：数据可视化神器

5星 · 超过95%的资源需积分: 9 49 浏览量更新于2024-07-26 1 收藏 6.29MB PDF 举报

"Getting Started with D3" 是一本关于使用 d3.js 进行数据可视化的教程。d3.js 是一个强大的 JavaScript 图形库，它允许开发者将数据有效地转化为网页上的可视化元素。这本书旨在介绍 d3.js 的基础，帮助读者理解和在实际项目中运用这个库。在这本教程中，作者 Mike Dewar 提到，d3.js 的核心价值在于将数据转化为决策的过程。随着技术的发展，企业从初创公司到财富500强，都在利用数据驱动的洞察力来抓住新机遇。这些机遇源自四大趋势： 1. 新的数据收集、管理和分析方法：d3.js 可以帮助处理这些数据，使分析变得更加高效。 2. 云 computing 提供了低成本的存储和灵活的计算能力，处理大规模数据集。 3. 可视化技术：d3.js 将复杂数据转换为引人入胜的图像，使得数据的故事更具说服力。 4. 任何人都能使用的工具：d3.js 降低了数据处理的门槛，使得非专业人员也能进行数据分析。通过 O'Reilly Media 的 Strata 项目，你可以获取对大数据的控制，并将其转化为洞察力。Strata 提供了灵感和信息，帮助创建新产品或改进现有产品，理解用户行为，并在数据领域取得优势。本书 "Getting Started with D3" 将深入讲解 d3.js 的基本元素，包括但不限于选择器、数据绑定、SVG元素操作、比例尺、轴、颜色映射、过渡动画等。此外，书中可能还会涉及如何创建条形图、饼图、散点图、线图等常见图表类型，以及如何自定义交互式视觉效果。对于想要学习数据可视化的 JavaScript 开发者来说，这是一本非常实用的入门指南。通过阅读此书，你将能够掌握如何使用 d3.js 创建动态、交互式的数据可视化作品，从而更好地理解和传达数据中的故事。无论你是数据科学家、Web 开发者还是设计师，都能从中受益，提升你的数据可视化技能。

Acknowledgements

I’d like to thank Mike Bostock for putting together such a fine library, and for his help

and comments. My good friends and colleagues Brian Eoff, John Myles White, Drew

Conway, Max Shron, and Gabriel Gaster have all helped tremendously with technical

comments (and the occasional British to American English conversion). My editor and

conscience Meghan Blanchette has been remarkably effective, somehow coaxing this

little book out of me without yelling. Most of all, I’d like to thank my fiancee Monica

Vakil for her love, patience, and support.

viii | Preface

render Scalable Vector Graphics (SVG), including mobile devices that are unable to

render Flash. Together, the combination of JavaScript and SVG allows us to create

sophisticated charts that are accessible by a majority of Internet users. And, thanks to

D3, bringing these technologies together is a straightforward task.

D3 is a JavaScript library written by Mike Bostock, created as a successor to an earlier

visualization toolkit called Protovis. The D3 library allows us to manipulate elements

of a web page in the context of a data set. These elements can be HTML, SVG, or Canvas

elements, and can be introduced, removed, or edited according to the contents of the

data set. So, for example, to create a scatter graph, we use D3 to arrange SVG circle

elements such that their cx and cy attributes are set to the x- and y-values of the elements

in a data set, scaled to map from their natural units into pixels.

A huge benefit of how D3 exposes the designer directly to the web page is that the

existing technology in the browser can be leveraged without having to create a whole

new plotting language. This appears both when selecting elements, which is performed

using CSS selectors (users of JQuery will find many of the idioms underlying D3 very

familiar), and when styling elements, which is performed using normal CSS. This allows

the designer to use the existing tools that have been developed for web design—most

notably Firefox’s Firebug and Chrome’s Developer Tools.

Instead of creating a traditional visualization toolkit, which typically places a heavy

wrapper between the designer and the web page, D3 is focused on providing helper

functions to deal with mundane tasks, such as creating axes and axis ticks, or advanced

tasks such as laying out graph visualizations or chord diagrams. This means that, once

over D3’s initial learning curve, the designer is opened up to a very rich world of

modern, interactive and animated data visualization.

The Basic Setup

The D3 library can be downloaded from http://d3js.org. It will be assumed that the

d3.js file lives in the folder that contains the HTML for each example.

All the examples in this book rely on a common HTML and JavaScript structure, which

is shown in Example 1-1.

Example 1-1. Basic page setup used throughout this book

<!DOCTYPE html>

<html>

<head>

function draw(data) {

2 | Chapter 1: Introduction

"use strict";

// badass visualization code goes here

}

</script>

</head>

<body>

d3.json("data/some_data.json", draw);

</script>

</body>

</html>

The D3 library is always included to give our visualizations access to the D3 methods.

The rest of the book will focus on this function, which we will always call draw. This

is a function with one argument; it is called once the data has been downloaded to

the client. It will contain the bulk of the code necessary to create the visualization.

All the JavaScript will satisfy the JSLint tool, available at http://www.jslint.com/. D3

encourages the use of the “cascade” JavaScript coding style, making it easy to write

well-formed JavaScript. The "use strict"; line instructs the browser to apply a strict

interpretation of the JavaScript rules which, by making us write cleaner code, allows

us to avoid confusing bugs.

The d3.json() function makes an HTTP GET request to a JSON file at the URL

described by its first argument and once the data has been downloaded, will then

call the function passed as the second argument. This second argument is a callback

function (which we will always call draw), which is passed, as its only parameter, the

contents of the JSON having been turned into an object or an array, whichever is

appropriate. Although D3 can read both XML and CSV, we remain constant

throughout the book and stick to JSON.

The approach taken in this book is to expose the reader to the process of building up

the visualizations. This means that the first few steps of the process can result in some

ugly, incomprehensible pages, which are subsequently styled into shape. As such, all

the CSS is detailed in the examples and tends to be explained after the elements of the

visualization have been specified.

The New York Metropolitan Transit Authority Data Set

New York is an incredibly large, incredibly dense city with a lot of people constantly

moving around. As such, it has evolved an intricate transport network, large parts of

which are managed by the Metropolitan Transit Authority (MTA). The MTA is re-

sponsible for the local trains, subways, buses, bridges, and tunnels that move over 11

million people a day through the five boroughs and beyond.

The MTA has made a large amount of data associated with the running of this network

publicly available. This has, in turn, generated a vibrant developer community that is

The New York Metropolitan Transit Authority Data Set | 3

剩余71页未读，继续阅读

luxas

粉丝: 0
资源: 23

D3.js入门指南：数据可视化神器

Getting Started with D3

getting started with d3

Getting Started with D3.pdf

Manning.D3.js.in.Action.2nd.Edition.2017.11.pdf

D3.js 4.x Data Visualization - Third Edition

Data Wrangling with JavaScript

GettingStartedWithD3:迈克·杜瓦斯（Mike Dewars）入门书籍深入探讨D3

Learning Web Design: A Beginner’s Guide to HTML... ..., 5th Edition

数据可视化入门：使用D3.js的力量

GettingStarted.exe

最新资源