新書推薦:
《
非对称创新:中国企业赶超战略 魏江 刘洋
》
售價:HK$
108.9
《
潜能觉醒
》
售價:HK$
86.9
《
初平:汉末群雄混战(190—195)
》
售價:HK$
53.9
《
建安:官渡大决战(196—200)
》
售價:HK$
53.9
《
权力的图像——近代的中国海图与交流
》
售價:HK$
184.8
《
中亚民族史
》
售價:HK$
184.8
《
人工智能与智能制造:概念与方法 [美]马苏德·索鲁什 [美]理查德·D.布拉茨
》
售價:HK$
140.8
《
中平:东汉王朝大崩溃(184—189)
》
售價:HK$
53.9
|
編輯推薦: |
本书阐释了制作可视化数据图表的基本方法论,以及如何结合D3高效、快速地创建可视化图表。
|
內容簡介: |
本书以一个故事开始,阐释制作可视化数据图表的基本方法论,以及如何结合D3高效、快速地创建可视化图表。本书首先解释了可视化的基本涵义,以及D3的适用人群,然后从一个具体的例子入手,告诉我们如何去挑选合适的数据集,以什么样的形式来展现数据,同时对SVG进行了基础铺垫。在D3部分,本书介绍了D3的核心概念选择集与数据连接,同时对数据连接的几个经典场景进行了演绎,还结合D3介绍了绘图所要掌握的坐标系统、比例尺等基本概念。在数据加载方面,本书讲解了D3可以解析的多种数据格式,以及从后端加载数据的多种方法,同时解释了D3动画的制作方式,为制作交互式图表奠定了基础。*后,本书揭示了掌握D3的不二法门,并希望读者能够不断实践、持之以恒。全书写作风格生动有趣、内容通俗易懂,既适合D3初学者入门,也有助于有一定经验的前端开发者快速掌握D3。
|
關於作者: |
史涛,每刻科技技术副总裁,资深前端开发者。曾任网新恒天用户体验部总监,税友软件首席前端架构师。国内首批接触D3的开发者,对数据可视化有深刻的理解,曾将D3应用于多个大型项目的数据可视化。 里奇王是视觉周刊以及FiveThirtyEight.com的记者,专注于数据可视化和交互功能。
|
目錄:
|
1以图叙事和D31
1.1可视化,已可视1
1.2图表赋予数据一种形式,该形式阐述了数据的内涵2
1.3质量:内容为王4
1.4设计:形式至上5
1.5以图叙事6
1.6开启D37
1.7设计师为什么喜欢D38
1.8程序员为什么钟爱D38
1.9什么时候不该使用D39
1.10D3的使用要点9
1.11所需工具10
1.12小结11
2发掘并图解案例13
2.1开始13
2.2世界正在变老吗14
2.3发现并研究数据15
2.4打磨概念18
2.5选择形式19
2.5.1用柱形图展示数据19
2.5.2用堆积柱形图展示数据20
2.5.3用线图展示数据22
2.5.4用饼图展示数据23
2.5.5用条形图展示数据25
2.5.6用多个微型条形图展示数据26
2.5.7选图建议思维导图28
2.6本书将构建的例子30
2.7小结31
3可缩放矢量图形33
3.1原理一瞥33
3.2到底什么是SVG33
3.3用D3绘制圆形34
3.4在Web Inspector中查看SVG36
3.5通过CSS改变SVG元素的风格37
3.6其他图形39
3.6.1矩形39
3.6.2圆角矩形40
3.6.3圆形40
3.6.4椭圆41
3.6.5多边形41
3.6.6线42
3.6.7路径42
3.7SVG文本43
3.8SVG样式属性46
3.8.1颜色和透明46
3.8.2笔触属性47
3.9绘图顺序和编组49
3.10变形51
3.11用SVG构建条形图53
3.12小结66
4用D3选择集操控网页67
4.1配置D367
4.2选择元素68
4.2.1使用CSS选择器创建选择集71
4.2.2从其他选择集中新建选择集72
4.2.3将选择集赋值为变量72
4.3通过选择集修改属性72
4.3.1attr的工作原理74
4.3.2使用attr应用样式类和规则76
4.4声明式的D377
4.5链式方法调用77
4.5.1在链式调用过程中新建选择集79
4.5.2链式调用和变量赋值80
4.6添加元素80
4.7串在一起82
4.8用d3.selectAll选中多个元素84
4.9使用选择集制作条形图85
4.9.1使用变量96
4.9.2数学运算98
4.9.3使用更好的变量98
4.9.4为数据使用变量99
4.9.5进行显式约束100
4.9.6使用循环101
4.10小结107
5数据连接:进入109
5.1什么是数据连接109
5.2数据连接的核心概念:进入110
5.3进入并绑定数据112
5.4使用数据连接制作条形图115
5.5使用匿名函数访问绑定数据120
5.6完成图形的剩余部分123
5.7在对象中存储数据123
5.8小结129
6缩放图形并添加轴线131
6.1线性比例尺131
6.2灵巧地使用边距规范137
6.3添加坐标轴139
6.4序数比例尺和坐标轴147
6.5小结160
7加载并过滤外部数据161
7.1使用人口分布数据构建图形161
7.2D3兼容的数据格式162
7.3创建服务器并上传数据163
7.3.1通过命令行初始化服务器163
7.3.2创建索引文件164
7.4D3加载数据的方法165
7.4.1回调方法165
7.4.2D3如何解析CSV表格166
7.5处理异步请求169
7.5.1用外部数据创建条形图170
7.5.2优化条形图172
7.6加载和处理大(超大)数据集175
7.7合并内容178
7.8小结180
8为图形添加交互和动画效果181
8.1数据连接:更新和退出181
8.2交互按钮185
8.2.1用数据连接创建按钮186
8.2.2让按钮更方便点击192
8.3更新图形195
8.4添加转场动画效果199
8.5使用键200
8.6小结202
9添加播放按钮203
9.1在方法中封装更新阶段203
9.2在页面上添加播放按钮207
9.3点击播放209
9.4允许用户中断播放212
9.5小结217
10修行靠自身219
10.1本书是学习D3的基础219
10.2如何克服障碍220
10.3持续编码222
10.4小结222
附录AJavaScript入门223
A.1JavaScript简介223
A.2浏览器中的JavaScript控制台223
A.3基本运算、变量及数据类型224
A.4在页面和.js文件中编写JavaScript代码227
A.5数组和对象229
A.6方法和函数232
A.7if语句和for循环233
A.8调试237
附录B整理人口分布数据241
|
內容試閱:
|
推荐序
D3.js已一跃成为JavaScript构建数据可视化的基础工具。D3由Mike Bostock编写,并在Mike之前创建的Protovis可视化库中成功运用。与以往的JavaScript可视化库或Protovis不一样,D3被设计成一个面向底层的工具集,既能直接用于构建可视化,也可以用来编写抽象程度更高的可视化库,如Protovis。得益于该设计思想,D3可以为开发者在结构、样式及交互行为上提供更多控制机制。当然,控制机制越强,学习曲线也越陡峭。本书旨在帮助你消弭学习障碍,将D3快速运用于实际工作中。本书作者Ritchie King对数据可视化有自己独特的见解。
我和Ritchie是在2011年纽约大学的高度选择性学科《健康和环境》(SHERP)课程上认识的,那时他还是一名应届毕业生,刚刚投入到数据可视化的研究之中,对这门学科抱以很高的热情。数年之后,Ritchie毕业并在Quartz从事记者工作,我再次遇到了他。他告诉我,他已将D3与自己的工作结合,以创建可视化报表。我意识到,如果他能写一本关于D3的书,将非常新鲜、生动。这并不是一本由程序员撰写的解释某个类库工作机制的书,而是一本阐释数据可视化内涵的书这正是其他D3著作缺少的部分。Ritchie的工作也从Quartz换到FiveThirtyEight.com,继续从事与数据驱动报表相关的工作,并将其经验悉数展现在这本书中。
本书非常适合希望用D3创建健壮的数据可视化图形的初学者和有一定经验的开发者阅读。本书从选择数据和可视化形式开始,到使用D3构建HTML元素SVG,对诸多知识点进行了细致的讲解。在详细阐述D3之前介绍SVG可以帮助读者了解基础知识,这对学习后面的高级主题(如添加坐标轴和可视化交互)来说是极有价值的。Ritchie在工作中对数据可视化的专注配合其写作风格,使本书的可读性变得非常强,而不是一本枯燥的D3类库基础教程。本书绝对是初学者和专业人士学习数据可视化的不二选择,我也非常乐意将本书收录为丛书的一部分。
Paul Dix
丛书主编
前言
数据、数据、数据。有关数据的信息林林总总堆积起来,速度比以往任何时候都要快。数据信息的急剧膨胀带来一个跨越两个世纪的需求数据可视化,即将原始数据中的模式和趋势加工成视觉形式的艺术。
以往,这种视觉形式会通过纸张和油墨呈现在书籍、报纸和学术期刊上,固化于印刷的那个时刻。但是,现今数据却越来越频繁地被转化成像素,并以可交互的形式呈现于线上媒体,读者点点鼠标就能改变其外观。当今,每个数据从业者都需要一款工具协助其处理从信息到网页,从原始静态的数字到动态图形。
D3是数据驱动文档(Data-Driven Documents)的简称,不仅可以帮助你将信息转换成图形,而且可以协助你基于数据创建和操作完整的网页和图表。这是一款梦幻般的工具,正是或至少是这个世界亟需的一款数据可视化工具。
D3由斯坦福大学毕业生Mike Bostock联合其导师Jeffery Heer及Vadim Ogievetsky首发于2011年。D3是基于JavaScript这种互联网世界绝对通用语言的一个自由扩展库。D3背后的基本理论是:提供一种方式,将网页上的元素与数据连接起来,然后基于这些数据去操纵网页元素。例如,你想将5个数据点转换成一幅条形图,只需在D3中将这些数据点与5个矩形图形元素连接,然后根据对应的数据值设置矩形的宽度即可真是简单到极致了。
写作目的和读者群
好吧,这样说也不十分准确。D3不是那么简单的。它功能很强大,但学习起来也很有挑战性。幸运的是,网上有很多D3教程和免费样例,其中不少是Mike Bostock本人写的。然而,虽然有这么丰富而活跃的D3生态,但其入门仍然是需要费一番工夫的特别是对那些没有JavaScript编程经验的人来说。
我写这本入门书的主要目的是想以无障碍而非面面俱到的方式全面介绍D3的基础知识要点。(假定你对HTML和CSS有一定的经验。如果没有,建议你抓紧时间学习这些基础知识。)我希望这本书可以带你轻松读懂和领会其他代码样例换句话说,就是非常轻松地走进D3的生态系统。
本书还有一个目的:阐释制作优秀的数据可视化报表的准则。互联网上充斥着糟糕的图表和图形。即使是数据可视化图表,也需要像其他技艺一样,有一组最佳实践和经验积累。从某种意义上说,每一幅可视化图表都在诉说一个故事,所以,如果你计划制作一幅可视化图表,要好好想想你打算讲述什么内容,怎么讲述才最容易打动人这很关键!希望本书可以在这方面给你一些启示。
目录架构
本书的内容组织非常直观,只是简单地贯穿了一个使用D3制作动态、可交互图形的完整流程,包括图表的初始概念,寻找合适的数据,然后给出一个强大的设计方案。随着内容的推进,每个章节的复杂度会逐渐加深。以下是每章的内容概要。
第1章 以图叙事和D3
对数据可视化进行了简单的介绍,解释可视化对提升理解有巨大作用的原因。同时,对D3进行了简单的介绍,解释为何D3会成为Web端数据可视化的利器。
第2章 发掘并图解案例
叙述了如何去搜寻一组有故事性的数据,包括相关数据准备及可视化样式制作指导,其中的示例世界人口年龄分布柱形交互图贯穿本书。
第3章 可缩放矢量图形
介绍了可缩放矢量图形(SVG)。这是一种创建美观图形元素的Web标准,D3可以很轻易地操纵这些元素。本书部分示例是用SVG绘制的。
第4章 用D3选择集操控网页
开始接触D3并学习用D3选择页面元素是本章的主题。第3章中的SVG图表会在本章中用D3重建。
第5章 数据连接:进入
对D3的核心概念数据连接进行了详细介绍。同时,用数据连接重建了第4章的示例。
第6章 缩放图形并添加轴线
介绍D3用来自动进行图形缩放和生成坐标轴的方法,并在示例中进行了应用。
第7章 加载并过滤外部数据
从外部独立数据源创建图表可能是D3的主要实际使用场景。本章介绍了如何加载外部数据,以及D3采用异步方式加载数据的原因。
第8章 为图形添加交互和动画效果
给示例添加交互按钮(数据集中每一年对应一个按钮)。当按钮被点击时,柱形图中的每一个柱形会按照实际的数据值进行水平缩放,并产生过渡动效。
第9章 添加播放按钮
播放按钮一旦被点击,就会在数据集中轮播每一年的数据。
第10章 修行靠自身
本书最后以教你如何正确进入D3生态系统结尾。
附录A JavaScript入门
为初学者提供与JavaScript基本概念相关的指导。
附录B 整理人口分布数据
手把手教你如何下载、整理本书示例中的数据。
约定
代码列表、内联代码和方法名称将使用等宽字体,如this。
结束语
写作本书时,我还只是一个D3的初学者。我这么说的原因有两个:一个原因是,以前困扰我的这些D3知识点在我脑海里仍然很清晰,我可以尽我所能在本书中表达清楚,我希望我做到这一点了;另外一个原因是,既然我能办到,那么我相信你也可以。
致谢
首先,我需要感谢我的妻子Emily Elert,在无数个周末为我精心制作午餐,料理家务,这样我才能专心写作。本书应当献给她,但这还远远不够。她是我最需要感谢的人。我其实并没有意识到,当我全身心投入写作时,我们悠闲的小日子没时间过了,但她似乎早有心理准备,对我耐心又体贴,从未将她的压力宣泄给我,并依然答应嫁给我,给了我最大的惊喜。
此外,我还要真心感谢丛书编辑Paul Dix。本书,至少我的写作经历,在一次与他轻松友好的谈话后确定下来。Paul既是我好友的未婚夫,也是我研究生院的校友。某天晚上,我们喝酒聊天,畅谈编程。我说我已经沉浸在D3中不可自拔。他打断我并问道:你是一个记者?是的。我回答。Paul沉默了一会儿,然后神秘地问道:你想写一本关于D3的书吗?Paul,谢谢你给了我这次机会。
当然,我还要感谢我的编辑Debra Williams Cauley,她充分展示了把握节奏的能力,刺激我不断向前,否则我这些写书的时间会浪费在各种慈善寿司午宴上。在本书的整个写作过程中,她还帮助我对校审的具体反馈进行分类。
说到校审,真的很有必要感谢他们。Kevin Quealy、Robert Mauriello及Josh Peek对本书的原稿提供了反馈。Robert对计算机领域的相关概念进行把关,确保本书不失专业性。Alli Treman和Sasha Mendez非常细致,不放过任何一行代码,抓出了不少低级错误。特别是Lynn Cherny,给了我很多有深度的建议,这无疑将本书的品质提升了一个档次。
还要特别感谢Chris Zahn,容忍我在从原稿到最终发布的过程中不断犯错。原稿中有些章节的格式惨不忍睹,他都能帮忙整理清楚,态度还非常友善。
回顾本书的整个出版过程,不得不多提一下Kevin Quealy和Amanda Cox。他们不仅让我对数据可视化产生了浓厚的兴趣(他们关于数据新闻学的教学是如此让人惊艳,我在纽约大学受教了),也对我的职业发展一路提携。我欠他们太多。他们真的是无与伦比。
我还想感谢David Yanofsky,他是我在Quartz工作时二人图形组中的另一个。他教给我很多关于D3和JavaScript的知识,并帮助我制作了自己的第一个交互式图表。他还是一个无可救药的段子手,我很尊敬他。谢谢你,兄弟。
最后,但绝不仅限于此,我还要感谢Mike Bostock编写了一个如此美妙的JavaScript库,用于制作基于Web的数据可视化。他还不断制作优雅、美观的样例,以帮助我们汲取D3的全部能量。谢谢你,牛人!
|
|