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

5星 · 超过95%的资源需积分: 11 156 浏览量更新于2024-07-25 收藏 10.52MB PDF 举报

"Interactive Data Visualization for the Web(2013.3)" 是一本由 Scott Murray 撰写的书籍，旨在帮助初学者甚至无编程经验的设计者或视觉艺术家、记者以及数据爱好者，创建并发布自己的交互式数据可视化项目到网上。本书以实践和互动的方式介绍了D3，一个用于在浏览器中表达数据的JavaScript库。通过学习，读者可以提升HTML、CSS、JavaScript和SVG的基础知识，并掌握如何动态生成网页元素、选择视觉编码规则、创建各种图表类型、实现平滑过渡和动画效果，以及引入交互性来帮助用户探索数据。书中涵盖的知识点包括： 1. HTML、CSS和JavaScript基础知识：学习基本的网页构建技术，理解如何用HTML组织内容、CSS样式化页面，以及JavaScript为网页添加动态功能。 2. SVG（可缩放矢量图形）：了解SVG的基本概念和语法，它是创建高质量、可缩放图形的重要工具，尤其适用于数据可视化。 3. 数据驱动的网页元素：学会如何将数据动态地映射到网页元素上，使得数据可视化成为可能。 4. 视觉编码规则：理解如何选择合适的视觉表示方法，如颜色、形状、大小等，有效地传达数据信息。 5. 图表制作：包括条形图、散点图、饼图、堆积条形图和力导向布局等多种常见图表的创建方法。 6. 平滑过渡和动画：掌握如何通过动画过渡展示数据的变化，增强用户体验。 7. 交互性设计：学习如何引入交互性，使用户可以通过不同的视图探索和理解数据。 8. 定制地图：了解如何结合数据创建自定义的地理地图，用于地理数据分析。 9. 大量示例和代码：书中有超过100个例子和可下载的代码，供读者实践操作，加深理解和应用。这本书是第一版，于2013年3月首次发行，对于那些想要进入数据可视化领域的人来说，是一本理想的入门指南。通过这本书，读者可以系统地学习和掌握在Web上进行交互式数据可视化的各项技能。

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

quence of numbers 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

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

demand.

This design pattern is found in most interactive 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 operates in the domain of the Web, 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页未读，继续阅读

kyokk8

粉丝: 0
资源: 6

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

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

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

Interactive Data Visualization for the Web(2nd) mobi

Learning IPython for Interactive Computing and Data Visualization 2nd pdf 0分

Applied Spatial Data Analysis with R（空间数据分析）

Python for Information

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

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

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

Tips for Document and Chart Display in Jupyter Notebook

最新资源