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

需积分: 15 79 浏览量更新于2024-07-18 收藏 6.99MB PDF 举报

《互动数据可视化：Web上的D3设计入门》（Interactive Data Visualization for the Web）是Scott Murray所著的一本书，于2013年出版。该书详细介绍了如何使用D3.js这个强大的JavaScript库来创建和设计交互式的网络数据可视化图表。D3.js（Data-Driven Documents）是一个用于Web开发的数据可视化工具，它允许开发者将复杂的数据转换为动态、交互式的视觉元素，从而帮助用户深入理解和探索数据。这本书的核心内容包括以下几点： 1. **D3基础知识**：章节首先会介绍D3.js的基本概念和工作原理，包括其数据绑定、选择器、操作DOM和SVG的基础用法，使读者对如何通过编程方式操作文档对象模型（DOM）和可缩放矢量图形（SVG）有深刻理解。 2. **数据处理与转换**：D3的强大之处在于它的数据驱动特性，书中会展示如何处理各种数据格式，并学习如何使用d3.scale（如线性、对数等）和d3.layout（布局算法）来清洗、转换和整理数据，使之适合可视化需求。 3. **交互设计**：作者会讲解如何在可视化图表中添加交互功能，如鼠标悬停提示、点击事件、缩放和平移等，提升用户体验和数据分析的深度。 4. **图表类型**：涵盖了一系列常见的数据可视化图表类型，如条形图、折线图、散点图、饼图、力导向图等，以及如何根据具体需求定制和优化这些图表。 5. **案例研究**：书中提供了多个实际项目的例子，让读者看到D3.js在实际项目中的应用，了解如何将理论知识转化为实践，解决实际问题。 6. **进阶技巧与最佳实践**：对于已经熟悉基础的读者，书后部分会探讨更高级的主题，如性能优化、数据驱动动画、事件系统和响应式设计，帮助读者提升技能。《Interactive Data Visualization for the Web》不仅适合前端开发人员，数据分析师、设计师和任何希望通过视觉方式探索数据的人也会从中获益。通过阅读这本书，读者可以掌握D3.js这一工具，为自己的网站和应用程序增添更具吸引力和洞察力的数据可视化元素。同时，由于版权原因，此资源来源于网络，如需商业使用或有其他疑问，请遵循出版商O'Reilly Media的相关政策。

More complex visualizations are generated from datasets more complex than the se‐

quence of n

umbers shown in

Figure 1-1 and more complex sets of mapping rules.

Why Write Code?

Mapping data by hand can be satisfying, yet is slow and tedious. So we usually employ

the power of computation to speed things up. The increased speed enables us to work

with much larger datasets of thousands or millions of values; what would have taken

years of effort by hand can be mapped in a moment. Just as important, we can rapidly

experiment with alternate mappings, tweaking our rules and seeing their output re-

rendered immediately. This loop of write/render/evaluate is critical to the iterative pro‐

cess of refining a design.

Sets of mapping rules function as design systems. The human hand no longer executes

the visual output; the computer does. Our human role is to conceptualize, craft, and

write out the rules of the system, which is then finally executed by software.

Unfortunately, software (and computation generally) is extremely bad at understanding

what, exactly, people want. (To be fair, many humans are also not good at this challenging

task.) Because computers are binary systems, everything is either on or off, yes or no,

this or that, there or not there. Humans are mushier, softer creatures, and the computers

are not willing to meet us halfway—we must go to them. Hence the inevitable struggle

of learning to write software, in which we train ourselves to communicate in the very

limited and precise syntax that the computer can understand.

Yet we continue to write code because seeing our visual creations come to life is so

rewarding. We practice data visualization because it is exciting to see what has never

before been seen. It is like summoning a magical, visual genie out of an inscrutable data

bottle.

Why Interactive?

Static visualizations can offer only precomposed “views” of data, so multiple static views

are often needed to present a variety of perspectives on the same information. The

number of dimensions of data are limited, too, when all visual elements must be present

on the same surface at the same time. Representing multidimensional datasets fairly in

static images is notoriously difficult. A fixed image is ideal when alternate views are

neither needed nor desired, and required when publishing to a static medium, such as

print.

Dynamic, interactive visualizations can empower people to explore the data for them‐

selves. The basic functions of most interactive visualization tools have changed little

since 1996, when Ben Shneiderman of the University of Maryland first proposed a

2 | Chapter 1: Introduction

V413HAV

“Visual Information-Seeking Mantra”: overview first, zoom and filter, then details-on-

demand.

This design pa

ttern is found in most in

teractive visualizations today. The combination

of functions is successful, because it makes the data accessible to different audiences,

from those who are merely browsing or exploring the dataset to those who approach

the visualization with a specific question in search of an answer. An interactive visual‐

ization that offers an overview of the data alongside tools for “drilling down” into the

details may successfully fulfill many roles at once, addressing the different concerns of

different audiences, from those new to the subject matter to those already deeply familiar

with the data.

Of course, interactivity can also encourage engagement with the data in ways that static

images cannot. With animated transitions and well-crafted interfaces, some visualiza‐

tions can make exploring data feel more like playing a game. Interactive visualization

can be a great medium for engaging an audience who might not otherwise care about

the topic or data at hand.

Why on the Web?

Visualizations aren’t truly visual unless they are seen. Getting your work out there for

others to see is critical, and publishing on the Web is the quickest way to reach a global

audience. Working with web-standard technologies means that your work can be seen

and experienced by anyone using a recent web browser, regardless of the operating

system (Windows, Mac, Linux) and device type (laptop, desktop, smartphone, tablet).

Best of all, everything covered in this book can be done with freely accessible tools, so

the only investment required is your time. And everything we’ll talk about uses open

source, web-standard technologies.

By avoiding proprietary software and plug-ins, you can ensure that your projects are

accessible on the widest possible range of devices, from typical desktop computers to

tablets and even phones. The more accessible your visualization, the greater your au‐

dience and your impact.

What This Book Is

This book is a practical introduction to merging three practices—data visualization,

interactive design, and web development—using D3, a powerful tool for custom, web-

based visualization.

These chapters grew out of my own process of learning how to use D3. Many people,

including myself, come to D3 with backgrounds in design, mapping, and data visuali‐

zation, but not programming and computer science.

Why on the Web? | 3

D3 has a bit of an unfair reputation for being hard to learn. D3 itself is not so complicated,

but it opera

tes in the domain of the W

eb, and the Web is complicated. Using D3 com‐

fortably requires some prior knowledge of the web technologies with which it interacts,

such as HTML, CSS, JavaScript, and SVG. Many people (myself included) are self-taught

when it comes to web skills. This is great, because the barrier to entry is so low, but

problematic because it means we probably didn’t learn each of these technologies from

the ground up—more often, we just hack something together until it seems to work,

and call it a day. Yet successful use of D3 requires understanding some of these tech‐

nologies in a fundamental way.

Because D3 is written in JavaScript, learning to use D3 often means learning a lot about

JavaScript. For many datavis folks, D3 is their introduction to JavaScript (or even web

development generally). It’s hard enough to learn a new programming language, let

alone a new tool built on that language. D3 will enable you to do great things with

JavaScript that you never would have even attempted. The time you spend learning both

the language and the tool will provide an incredible payoff.

My goal is to reduce that learning time, so you can start creating awesome stuff sooner.

We’ll take a ground-up approach, starting with the fundamental concepts and gradually

adding complexity. I don’t intend to show you how to make specific kinds of visualiza‐

tions so much as to help you understand the workings of D3 well enough to take those

building blocks and generate designs of your own creation.

Who You Are

You may be an absolute beginner, someone new to datavis, web development, or both.

(Welcome!) Perhaps you are a journalist interested in new ways to communicate the

data you collect during reporting. Or maybe you’re a designer, comfortable drawing

static infographics but ready to make the leap to interactive projects on the Web. You

could be an artist, interested in generative, data-based art. Or a programmer, already

familiar with JavaScript and the Web, but excited to learn a new tool and pick up some

visual design experience along the way.

Whoever you are, I hope that you:

• Have heard of this new thing called the “World Wide Web”

• Are a bit familiar with HTML, the DOM, and CSS

• Might even have a little programming experience already

• Have heard of jQuery or written some JavaScript before

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

• Want to make useful, interactive visualizations

4 | Chapter 1: Introduction

剩余267页未读，继续阅读

evoXiang

粉丝: 0
资源: 2

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

Interactive Data Visualization for the Web(2nd) mobi

Interactive Data Visualization for the Web(英文)

Interactive.Data.Visualization.for.the.Web(2013.3)

interactive-data-visualization-book:Web交互式数据可视化的编码练习

D3.js的大量代码示例

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

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

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

探索D3.js：前端可视化领域的自由与深度

比较好的D3.js教程有哪些

最新资源