D3.js：数据驱动的Web可视化库

4星 · 超过85%的资源需积分: 9 63 浏览量更新于2024-09-16 1 收藏 2.23MB PDF 举报

“D3：数据驱动的文档，是一种新型的透明表示法，用于网页的数据可视化。它不隐藏底层场景图，而是允许直接检查和操作标准文档对象模型（DOM）。D3使得设计师能够选择性地将输入数据绑定到任意文档元素，并应用动态变换来生成和修改内容。这种方法提高了表达力，更好地与开发者工具集成，同时保持了高效的声明性组件，并通过直接运算符评估简化调试，支持迭代开发。此外，D3的变换自然地支持动画和交互，且性能优于使用中间表示的方法。” **数据可视化库d3js** D3.js（Data-Driven Documents）是由Michael Bostock、Vadim Ogievetsky和Jeffrey Heer共同创建的一个JavaScript库，专为Web上的数据可视化设计。这个库的核心理念是“数据驱动的文档”，它利用数据绑定和动态变换来操纵DOM，从而在网页上生成交互式的数据可视化。 1. **DOM操作与数据绑定** D3.js的一大特点是直接与DOM交互。它允许开发者将数据直接绑定到DOM元素，这样当数据改变时，与之关联的元素也会自动更新。这种数据绑定方式提高了代码的灵活性和效率，使得数据的动态更新变得简单。 2. **动态变换** D3.js提供了丰富的函数来实现动态变换，可以用于生成和修改页面内容。这些变换包括但不限于缩放、平移、旋转等，可以应用于任何HTML、SVG或CSS元素，帮助创建复杂的可视化效果。 3. **表达力与开发者工具集成** 由于D3.js的表示透明性，它能更好地与现有的开发者工具配合，使调试变得更加容易。开发者可以直接查看和修改DOM，直观理解数据如何映射到可视化元素，提高了开发效率。 4. **声明式编程组件** 虽然D3.js支持直接操作DOM的命令式编程，但它也提供了一套强大的声明式编程组件。这些组件可以用于定义复杂的可视化模式，简化编码，提高代码的可读性和可维护性。 5. **动画与交互** D3.js的变换功能支持自然的动画效果，通过连续的数据驱动变换，可以创建出流畅的过渡动画。同时，D3.js还提供了交互功能，如点击事件、鼠标悬停等，使用户能够与可视化结果进行深度交互。 6. **性能优化** 相比于使用中间表示的方法，D3.js通过直接运算符评估，减少了额外的计算开销，提升了性能，尤其是在处理大量数据或复杂可视化时，这一点尤为重要。 7. **实例应用** 通过D3.js可以创建各种类型的可视化图表，如图例所示的日历视图、和弦图、 choropleth地图、层次边缘捆绑图、散点图矩阵、分组与堆积柱状图、力导向图聚类、Voronoi细分等。这些实例展示了D3.js在数据可视化领域的广泛适用性和强大能力。 D3.js是一个强大的工具，适合那些希望在Web上创建高度定制、交互式数据可视化的开发者。其灵活性、表达力和性能使其成为数据科学家和前端开发者的首选库之一。

: Data-Driven Documents

Michael Bostock, Vadim Ogievetsky and Jeffrey Heer

Fig. 1. Interactive visualizations built with D3, running inside Google Chrome. From left to right: calendar view, chord diagram, choro-

pleth map, hierarchical edge bundling, scatterplot matrix, grouped & stacked bars, force-directed graph clusters, Voronoi tessellation.

Abstract—Data-Driven Documents (D3) is a novel representation-transparent approach to visualization for the web. Rather than hide

the underlying scenegraph within a toolkit-speciﬁc abstraction, D3 enables direct inspection and manipulation of a native represen-

tation: the standard document object model (DOM). With D3, designers selectively bind input data to arbitrary document elements,

applying dynamic transforms to both generate and modify content. We show how representational transparency improves expressive-

ness and better integrates with developer tools than prior approaches, while offering comparable notational efﬁciency and retaining

powerful declarative components. Immediate evaluation of operators further simpliﬁes debugging and allows iterative development.

Additionally, we demonstrate how D3 transforms naturally enable animation and interaction with dramatic performance improvements

over intermediate representations.

Index Terms—Information visualization, user interfaces, toolkits, 2D graphics.

1 INTRODUCTION

When building visualizations, designers often employ multiple tools

simultaneously. This is particularly true on the web, where interactive

visualizations combine varied technologies: HTML for page content,

CSS for aesthetics, JavaScript for interaction, SVG for vector graph-

ics, and so on. One of the great successes of the web as a platform

is the (mostly) seamless cooperation of such technologies, enabled by

a shared representation of the page called the document object model

(DOM). The DOM exposes the hierarchical structure of page content,

such as paragraph and table elements, allowing reference and manip-

ulation. In addition to programming interfaces, modern browsers in-

clude powerful graphical tools for developers that display the element

tree, reveal inherited style values, and debug interactive scripts.

Unfortunately, this blissful interoperability is typically lost with vi-

sualization toolkits due to encapsulation of the DOM with more spe-

cialized forms. Rather than empowering direct manipulation of the

existing model, such toolkits [2, 9, 18] supplant it with custom scene-

graph abstractions. This approach may provide substantial gains in ef-

ﬁciency—reducing the effort required to specify a visualization—but

• The authors are with the Computer Science Department of Stanford

University, Stanford, CA 94305.

Email: {mbostock,vad,jheer}@stanford.edu.

Manuscript received 31 March 2011; accepted 1 August 2011; posted online

23 October 2011; mailed on 14 October 2011.

For information on obtaining reprints of this article, please send

email to: tvcg@computer.org.

it incurs a high opportunity cost: it ignores developers’ knowledge of

standards, and the tools and resources that augment these standards.

The resulting cost to accessibility—the difﬁculty of learning the

representation—may trump efﬁciency gains, at least for new users.

Scarcity of documentation and ineffectual debugging exacerbate the

problem, impeding users from gaining deeper understanding of toolkit

abstractions and limiting the toolkit’s potential. Systems with inter-

mediate scenegraph abstractions and delayed property evaluation can

be particularly difﬁcult to debug: internal structures are exposed only

when errors arise, often at unexpected times.

Furthermore, intermediate representations may diminish expres-

siveness—the diversity of possible visualizations—and introduce sub-

stantial runtime overhead. Certain tasks that could be ofﬂoaded to a

more suitable tool, such as specifying fonts via CSS, may be stymied

by encapsulation. Similarly, while graphical features such as clipping

may be supported by the underlying representations, they may not be

exposed by the toolkit. Even if extensibility is available as a means for

greater expression, it requires in-depth knowledge of toolkit internals

and poses a substantial barrier to the average user.

Our awareness of these issues comes in part from thousands of user

observations over the two years since releasing Protovis [2], despite

our attempt to balance expressiveness, efﬁciency and accessibility. We

now reﬁne these three goals with speciﬁc objectives:

Compatibility. Tools do not exist in isolation, but within an ecosys-

tem of related components. Technology reuse utilizes prior knowledge

and reference materials, improving accessibility. Ofﬂoading a subset

of tasks to specialized tools can improve efﬁciency, avoiding the gen-

erality and complexity of a monolithic approach. And, full access to

下载后可阅读完整内容，剩余8页未读，立即下载

liqian209

粉丝: 0
资源: 5

D3.js：数据驱动的Web可视化库

htd3：简化基因数据可视化的d3.js库

精通数据可视化：D3.js实战指南

足球时间数据可视化使用d3.js实战指南

数据可视化javascript d3.js

d3.js 数据可视化 JavaScript库

可视化库D3.js.zip

earthquake-data-visualisation:特温特大学数据可视化课程D3.JS数据可视化

Udacity_datavis_project:Udacity 数据可视化项目“数据可视化和 D3.js”

数据可视化d3.js编写

d3js教程两本d3js数据可视化和精通d3js

最新资源