D3.js实战：交互式Web数据可视化指南

需积分: 9 75 浏览量更新于2024-07-18 收藏 4.2MB PDF 举报

"Interactive Data Visualization for the Web" 是一本由 Scott Murray 撰写的关于Web数据可视化的书籍，主要聚焦于使用 D3.js 这个强大的JavaScript库来创建交互式的图表和图形。本书深入探讨了D3.js的核心概念和技术，D3.js是一个用于创建动态、基于数据的SVG、Canvas和HTML图形的库，它允许开发者直接操作DOM（Document Object Model）并与数据绑定，从而实现高度定制化的数据可视化。D3.js的核心在于它的数据驱动方法，它将数据与视觉元素绑定，使你可以根据数据的变化更新图形。在书中，Scott Murray 会引导读者从基础开始，逐步了解如何利用D3.js构建各种图表，如条形图、折线图、饼图、散点图等，并且讲解如何添加交互功能，例如悬停显示数据、点击筛选等。他还讨论了色彩理论、布局算法以及如何有效地讲述数据故事，这些都是创建引人入胜的数据可视化的关键要素。此外，书中的内容可能涵盖了如何处理大规模数据集，使用SVG和Canvas进行图形渲染，以及如何利用CSS和JavaScript优化图形性能。还会介绍如何结合其他Web技术，如HTML5和JavaScript框架（如React或Vue.js），以构建更复杂的Web应用程序。本书还可能涉及到了错误检查和修订历史，确保读者获取到的信息是最新的。O'Reilly Media 出版社以其高质量的技术图书著称，这本书的出版也意味着它经过了专业的编辑和制作流程，包括编辑Meghan Blanchette的指导，以及一系列的生产、设计和校对工作。对于那些希望提升Web数据可视化技能，或者想要深入了解D3.js的人来说，"Interactive Data Visualization for the Web"是一本不可多得的资源。它不仅适合初学者，也适合有一定经验的开发者，通过阅读本书，读者可以学习到如何用D3.js创造出既美观又具有洞察力的数据可视化作品。

• aren’t scared by unknown initialisms like CSV, SVG, or JSON

• want to make useful, interactive visualizations

If anything above is unknown or unclear, don’t fear. You may just want to spend more

time with the Technology Fundamentals chapter, which covers what you really need to

know before diving into D3.

What This Book Is Not

That said, this is definitely not a computer science textbook, and it is not intended to

teach the intricacies of any one web technology (HTML, CSS, JavaScript, SVG) in depth.

In that spirit, I may gloss over some technical points, grossly oversimplifying important

concepts fundamental to computer science in ways that will make true software engi‐

neers recoil. That’s fine, because I’m writing for artists and designers here, not engineers.

We’ll cover the basics, and then you can dive into the more complex pieces once you’re

comfortable.

I will deliberately not address every possible approach to a given problem, but will typ‐

ically present what I feel is the simplest solution, or, if not the simplest, then the most

understandable.

My goal is to teach you the fundamental concepts and methods of D3. As such, this book

is decidedly not organized around specific example projects. Everyone’s data and design

needs will be different. It’s up to you to integrate these concepts in the way best suited

to your particular project.

Using Sample Code

If you are a mad genius, then you can probably learn to use D3 without ever looking at

any sample code files, in which case you can skip the rest of this section.

Since you’re still with me, you are probably still very bright but not mad, in which case

you should undertake this book with the full set of accompanying code samples in hand.

Before you go any further, please download the sample files from here:

https://github.com/alignedleft/d3-book

Normal people will want to click the “Downloads” link, then click again to download

the compressed .zip archive with all the files. Hardcore geeksters will want to clone the

repository using git. If that last sentence sounds like total gibberish, please use the first

option.

Within the download, you’ll notice there is a folder for each chapter that has code to go

with it:

What This Book Is Not | 5

www.it-ebooks.info

Learning to use D3 is simply a process of learning the syntax used to tell it how you want

it to load and bind data, and transform and transition elements.

The transformation step is most important, as this is where the mapping happens. D3

provides a structure for applying these transformations, but, as we’ll see, you define what

the mapping rules are. Should larger values make taller bars or brighter circles? Will

clusters be sorted on the x axis by age or category? What color palette is used to fill in

countries on your world map? All of the visual design decisions are up to you. You

provide the concept, you craft the rules, and D3 executes it — without telling you what

to do. (Yes, it’s like the opposite of Excel’s pushy “Chart Wizard”.)

What it Doesn’t Do

• D3 doesn’t generate predefined or “canned” visualizations for you. (D3’s layouts are

a slight exception to this, as they help you achieve common visualization forms

more quickly.)

• D3 doesn’t even try to support older browsers. This helps keep the D3 codebase

clean, free of hacks to support old versions of Internet Explorer, for example. The

philosophy is that by creating more compelling tools and refusing to support older

browsers, we encourage more people to upgrade (rather than forestall the process,

thereby requiring us to continue to support those browsers, and so on — a vicious

cycle). D3 wants us to move forward.

• D3 doesn’t handle bitmap map tiles, such as those provided by Google Maps or

Cloudmade. D3 is great with anything vector — SVG images or GeoJSON data

— but was never intended to work with traditional map tiles. When geomapping,

you can either go all-SVG and stick with D3, use a different tool with tiles, or figure

out how to integrate D3 for the data layer and the other tool for a base map tile layer.

(See “Alternatives” below.) This question comes up a lot in the D3 community, and

as of today, there is no easy answer.

• D3 doesn’t hide your original data. Since D3 code is executed on the client-side

(meaning, in the user’s web browser, as opposed to on the web server), the data you

want visualized must be sent to the client. If your data can’t be shared, then don’t

use D3. Alternatives include using proprietary tools (like Flash) or pre-rendering

visualizations as static images and sending those to the browser. (If you’re not in‐

terested in sharing your data, though, why would you bother visualizing it? The

purpose of visualization is to communicate the data, so you may sleep better at night

by choosing openness and transparency, rather than having nightmares about data

thieves.)

8 | Chapter 2: Introducing D3

www.it-ebooks.info

Origins and Context

The first web browsers rendered static pages; interactivity was limited to clicking on

links. In 1996, Netscape introduced the first browser with JavaScript (originally known

as ECMAScript), a new scripting language that could be interpreted by the browser while

the page was being viewed.

This doesn’t sound as groundbreaking as it turned out to be, but this enabled web

browsers to evolve from merely passive browsers to dynamic frames for interactive,

networked experiences. This shift ultimately enabled every intra-page interaction we

have on the web today. Without JavaScript, D3 would never exist, and web-based data

visualizations would be limited to pre-rendered, non-interactive GIFs. (Yuck. Thank

you, Netscape!)

Jump ahead to 2005, when Jeffrey Heer (then of the University of California, Berkeley),

Stuart Card (of the Palo Alto Research Center), and James Landay (of the University of

Washington, Seattle) introduced prefuse, a toolkit for bringing data visualization to the

web. prefuse (spelled with all lowercase letters) was written in Java, a compiled language,

whose programs could run in web browsers via a Java plug-in.

Note that Java is a completely different programming language than JavaScript, despite

their similar names. (Hey, it was the 90s, and coffee-related words like “java” were really

cool. Wouldn’t you rather go by “JavaScript” than “ECMAScript”?) Just remember:

JavaScript is a scripting language that is interpreted by the web browser. Java programs

must be compiled and saved as “applets” to be used on the web, and then are executed

by a Java plug-in, not by the browser itself. In practice, this tends to mean that Java

applets stand alone in a little box somewhere within the browser window (much like

Flash Player content). JavaScript, however, is native to the browser, so it can operate

anywhere on the entire page.

Java has now fallen out of favor, in part because its applets are slow to load. Nonetheless,

prefuse was a breakthrough application — the first to make web-based visualization

accessible to less-than-expert programmers. Until prefuse came along, any datavis on

the web was very much a custom affair.

Two years later, in 2007, Jeff Heer introduced Flare, a similar toolkit, but written in

ActionScript, so its visualizations could be viewed on the web through Adobe’s Flash

Player. Flare, like prefuse, relied on a browser plug-in, but the Flash is much faster than

Java ever was — it loads in an instant, and interaction is quick and fluid.

Flare was a huge improvement, but as web browsers continued to evolve, it was clear

that interactive visualizations could be created with native browser technology, no plug-

ins required.

Origins and Context | 9

www.it-ebooks.info

剩余185页未读，继续阅读

cc110112

粉丝: 0
资源: 6

D3.js实战：交互式Web数据可视化指南

D3实战：交互式Web数据可视化设计指南

互动数据可视化Web教程：使用D3.js探索数据

D3：Web交互数据可视化权威指南

Interactive Data Visualization for the Web(英文)

Interactive Data Visualization for the Web(2nd) epub

Interactive Data Visualization for the Web(2nd) mobi

Interactive Data Visualization for the Web(2nd) 无水印pdf

Interactive Data Visualization for the Web(2nd) azw3

Interactive Data Visualization for the Web, 2nd Edition.pdf

Interactive Data Visualization for the Web(2nd)(1) epub

最新资源