JavaScript数据可视化编程 PDF下载

第1章　图像数据　1


1.1　创建基础的柱状图　2


1.1.1　第1步 引入所需的JavaScript代码　2


1.1.2　第2步 创建一个用来包含图表的
元素　3


1.1.3　第3步 定义数据　3


1.1.4　第4步 绘制图表　4


1.1.5　第5步 改进纵轴　5


1.1.6　第6步 改进横轴　6


1.1.7　第7步 调整样式　8


1.1.8　第8步 多彩的柱体色彩　9


1.1.9　第9步 Flotr2可能会出现的一些“bug”及处理方案　11


1.2　用折线图来绘制连续数据　12


1.2.1　第1步 定义数据　12


1.2.2　第2步 绘制二氧化碳数据的图像　13


1.2.3　第3步 添加温度数据　14


1.2.4　第4步 改进图表的可读性　14


1.2.5　第5步 让用户理解右侧的温度标记　16


1.2.6　第6步 给图表添加标注　17


1.2.7　第7步 Flotr2“bugs”的应急方案　19


1.3　使用饼图强调部分数据　19


1.3.1　第1步 定义数据　20


1.3.2　第2步 绘制图表　21


1.3.3　第3步 标注数值　22


1.3.4　第4步 Flotr2“bugs”的应急方案　23


1.4　用离散图表绘制x/y值　23


1.4.1　第1步 定义数据　23


1.4.2　第2步 格式化数据　24


1.4.3　第3步 绘制数据　24


1.4.4　第4步 调整图表的轴　25


1.4.5　第5步 标注数据　26


1.4.6　第6步 阐明x轴　27


1.4.7　第7步 回答用户的问题　28


1.4.8　第8步 解决Flotr2的“bugs”　32


1.5　用气泡图表示数量扩展x/y数据　32


1.5.1　第1步 定义数据　32


1.5.2　第2步 给图表创建背景图　33


1.5.3　第3步 绘制数据　34


1.5.4　第4步 添加背景　35


1.5.5　第5步 给气泡上色　36


1.5.6　第6步 调整图例的样式　38


1.5.7　第7步 Flotr2“bugs”的应急预案　39


1.6　使用雷达图显示多维数据　39


1.6.1　第1步 定义数据　40


1.6.2　第2步 创建图表　42


1.6.3　第3步 Flotr2“bugs”的应急预案　43


1.7　小结　43


第2章　和图表进行交互　45


2.1　选择图表内容　46


2.1.1　第1步 包含需要的JavaScript类库　46


2.1.2　第2步 设置一个div元素来盛放图表　48


2.1.3　第3步 准备数据　48


2.1.4　第4步 绘制图表　49


2.1.5　第5步 添加控件　49


2.1.6　第6步 定义适合交互的数据结构　52


2.1.7　第7步 基于交互状态确定图表数据　53


2.1.8　第8步 使用JavaScript添加控件　55


2.1.9　第9步 响应交互控件的操作　56


2.2　缩放图表　58


2.2.1　第1步 准备页面　58


2.2.2　第2步 绘制图表　59


2.2.3　第3步 准备支持交互的数据　60


2.2.4　第4步 准备接受交互事件　60


2.2.5　第5步 开启交互　61


2.3　追踪数据的值　64


2.3.1　第1步 留出一个
元素来保存所有图表　65


2.3.2　第2步 准备数据　66


2.3.3　第3步 绘制图表　66


2.3.4　第4步 实施交互　70


2.4　使用AJAX获取数据　75


2.4.1　第1步 理解源数据　75


2.4.2　第2步 通过AJAX获得第一层的数据　76


2.4.3　第3步 处理第一层数据　80


2.4.4　第4步 获取实际数据　81


2.4.5　第5步 处理数据　84


2.4.6　第6步 创建图表　85


2.5　小结　88


第3章　在页面中整合图表　89


3.1　创建经典的sparkline　90


3.1.1　第1步 加载需要请求的JavaScript库　90


3.1.2　第2步 创建sparkline的HTML标签　91


3.1.3　第3步 绘制sparkline　92


3.1.4　第4步 调整图表样式　92


3.2　绘制多个变量　94


3.2.1　第1步 准备HTML标签　95


3.2.2　第2步 绘制图表　96


3.2.3　第3步 建立一套默认的图表样式　96


3.2.4　第4步 修改指定class的默认样式　97


3.2.5　第5步 为指定图表创建唯一的样式　99


3.3　sparkline的注解　101


3.3.1　第1步 准备数据　102


3.3.2　第2步 准备HTML标签　102


3.3.3　第3步 添加图表　103


3.3.4　第4步 添加主要注释　103


3.3.5　第5步 提供附加信息　105


3.4　绘制复合图表　106


3.4.1　第1步 绘制交易量图表　106


3.4.2　第2步 添加收盘价图表　107


3.4.3　第3步 添加注解　108


3.4.4　第4步 把详情也当作图表来展示　109


3.5　对点击事件进行响应　110


3.5.1　第1步 添加图表　111


3.5.2　第2步 处理点击事件　111


3.5.3　第3步 改进过渡效果　113


3.5.4　第4步 添加动画效果　114


3.6　实时更新图表　115


3.6.1　第1步 获取数据　116


3.6.2　第2步 更新可视化　117


3.7　小结　118


第4章　创建特殊图表　119


4.1　用tree map来图像化层级　119


4.1.1　第1步 包含需要的类库　120


4.1.2　第2步 准备数据　120


4.1.3　第3步 绘制tree map　121


4.1.4　第4步 通过改变底色展示附加数据　122


4.2　用热力图突出显示地区　125


4.2.1　第1步 加载需要的JavaScript　126


4.2.2　第2步 定义可视化数据　127


4.2.3　第3步 创建背景图片　127


4.2.4　第4步 留出包含可视化内容的HTML元素　128


4.2.5　第5步 格式化数据　128


4.2.6　第6步 绘制地图　129


4.2.7　第7步 调整热力图的z-index　130


4.3　用网络图展示节点间的关系　130


4.3.1　第1步 加载需要的类库　130


4.3.2　第2步 准备数据　131


4.3.3　第3步 定义图表的节点　132


4.3.4　第4步 用边线链接节点　133


4.3.5　第5步 自动布局　134


4.3.6　第6步 添加交互　136


4.4　用文字云的形式展示开发语言的使用比例　139


4.4.1　第1步 加载需要的类库　139


4.4.2　第2步 准备数据　140


4.4.3　第3步 添加需要的标签　141


4.4.4　第4步 创建一个简单的云　142


4.4.5　第5步 添加交互　143


4.5　小结　146


第5章　时间轴显示　147


5.1　使用库构建时间轴　148


5.1.1　第1步 引入所需类库　148


5.1.2　第2步 准备数据　149


5.1.3　第3步 画出时间轴　150


5.1.4　第4步 为数据设置对应的Chronoline.js选项　151


5.2　使用JavaScript构建时间轴　154


5.2.1　第1步 准备好HTML结构　155


5.2.2　第2步 开始执行JavaScript　155


5.2.3　第3步 运用语义化的html来创建时间轴　156


5.2.4　第4步 添加内容说明　159


5.2.5　第5步 选择性地借助jQuery　161


5.2.6　第6步 用CSS解决时间轴的样式问题　161


5.2.7　第7步 为时间轴添加一些利于信息结构展现的样式　163


5.2.8　第8步 添加交互效果　165


5.3　使用Web组件　170


5.3.1　第1步 回顾标准组件　170


5.3.2　第2步 引入需要的组件　173


5.3.3　第3步 准备数据　173


5.3.4　第4步 创建一个默认的时间轴　175


5.3.5　第5步 调整时间轴样式　178


5.4　小结　181


第6章　地理位置信息的可视化　182


6.1　使用字体构建地图　183


6.1.1　第1步 在页面中引入地图字体组件　183


6.1.2　第2步 在页面中显示出某一个国家的地图　183


6.1.3　第3步 将多个国家整合进地图　185


6.1.4　第4步 根据数据的不同使各国呈现可视化上的差异　186


6.1.5　第5步 添加图例　188


6.2　使用SVG绘制可视化地图　189


6.2.1　第1步 创建SVG地图　191


6.2.2　第2步 在页面中嵌入地图　192


6.2.3　第3步 收集数据　193


6.2.4　第4步 定义色彩主题　195


6.2.5　第5步 为地图上色　196


6.2.6　第6步 加上图例　197


6.2.7　第7步 添加交互效果　198


6.3　将地图引入到可视化的背景中　201


6.3.1　第1步 建立Web页面　202


6.3.2　第2步 准备数据　203


6.3.3　第3步 选择地图样式　203


6.3.4　第4步 地图绘制　204


6.3.5　第5步 加上目击事件　205


6.4　集成一个功能完备的地图库　206


6.4.1　第1步 准备数据　207


6.4.2　第2步 建立Web页面和相关的库　207


6.4.3　第3步 绘制基本地图　208


6.4.4　第4步 为地图加上路线　210


6.4.5　第5步 添加动画控制器　212


6.4.6　第6步 准备添加动画　216


6.4.7　第7步 使路线具有动画效果　217


6.4.8　第8步 为每个站点加上标签　220


6.4.9　第9步 在标签上应用动画　223


6.4.10　第10步 将标签动画整合进整个动画的步骤之中　225


6.4.11　第11步 加上标题　228


6.5　小结　230


第7章　用D3.js自定义可视化数据视图　231


7.1　适应传统的图表类型　232


7.1.1　第1步 准备数据　233


7.1.2　第2步 建立Web页面　233


7.1.3　第3步 为可视化视图创建一个平台　234


7.1.4　第4步 控制图表的尺寸　235


7.1.5　第5步 画出图表框架　237


7.1.6　第6步 在图中加入数据　239


7.1.7　第7步 解答用户的问题　240


7.2　创建一个力导向网络图　241


7.2.1　第1步 准备数据　242


7.2.2　第2步 创建页面　244


7.2.3　第3步 创建展示平台　244


7.2.4　第4步 绘制节点　244


7.2.5　第5步 绘制连线　247


7.2.6　第6步 将元素定位　248


7.2.7　第7步 加入力导向　249


7.2.8　第8步 添加交互效果　252


7.2.9　第9步 一些其他方面的体验改进　255


7.3　创建可缩放的地图　256


7.3.1　第1步 准备数据　256


7.3.2　第2步 建立页面　257


7.3.3　第3步 创建地图投影　257


7.3.4　第4步 初始化SVG容器　258


7.3.5　第5步 取回地图数据　258


7.3.6　第6步 绘制地图　258


7.3.7　第7步 取回天气数据　259


7.3.8　第8步 在地图上体现数据　260


7.3.9　第9步 添加交互效果　261


7.4　创建一个特殊的可视化视图　263


7.4.1　第1步 准备数据　264


7.4.2　第2步 设置页面　264


7.4.3　第3步 为视图建立一个舞台　265


7.4.4　第4步 创建比例　265


7.4.5　第5步 取回数据　268


7.4.6　第6步 绘制视图　270


7.4.7　第7步 给视图上色　271


7.4.8　第8步 添加交互效果　275


7.5　小结　279


第8章　在浏览器中管理数据　280


8.1　使用函数式编程　281


8.1.1　第1步 先来个指令式编程风格版本　281


8.1.2　第2步 调试指令式风格代码　282


8.1.3　第3步 理解指令式编程可能带来的问题　283


8.1.4　第4步 使用函数式编程风格重写　283


8.1.5　第5步 评估性能　284


8.1.6　第6步 修复性能问题　284


8.2　使用数组　286


8.2.1　按位置提取元素　286


8.2.2　合并数组　288


8.2.3　去除无效数据　291


8.2.4　找到数组中的元素　292


8.2.5　生成数组　293


8.3　处理对象　293


8.3.1　处理属性名和属性值　294


8.3.2　清理对象子集　296


8.3.3　更新属性　297


8.4　处理集合　299


8.4.1　使用迭代工具函数　300


8.4.2　在集合中找到元素　302


8.4.3　检验集合　303


8.4.4　调整集合顺序　304


8.5　小结　305


第9章　创建数据驱动的网络应用：第1部分　306


9.1　框架与函数库　307


9.1.1　第1步 选择一个应用函数库　307


9.1.2　第2步 安装开发工具　308


9.1.3　第3步 建立新项目　309


9.1.4　第4步 加入我们的特殊依赖　311


9.2　模型与视图　313


9.2.1　第1步 定义应用的模型　314


9.2.2　第2步 实现模型　316


9.2.3　第3步 定义应用的集合　317


9.2.4　第4步 定义应用的主视图　319


9.2.5　第5步 定义主视图模板　323


9.2.6　第6步 改善主视图　326


9.3　可视化视图　329


9.3.1　第1步 定义额外视图　329


9.3.2　第2步 实现Details视图　329


9.3.3　第3步 实现Properties视图　330


9.3.4　第4步 实现Map视图　334


9.3.5　第5步 实现Charts视图　337


9.4　小结　338


第8章　创建数据驱动的网络应用：第2部分　340


10.1　连接Nike 服务　340


10.1.1　第1步 验证用户权限　341


10.1.2　第2步 接收Nike 返回数据　343


10.1.3　第3步 处理翻页　343


10.1.4　第4步 动态更新视图　348


10.1.5　第5步 过滤集合　349


10.1.6　第6步 解析返回值　350


10.1.7　第7步 获取详细数据　350


10.2　组装完整应用　354


10.2.1　第1步 创建Backbone.js 路由控制器（router）　354


10.2.2　第2步 支持不属于任何集合的Run模型　357


10.2.3　第3步 让用户改变视图　359


10.2.4　第4步 应用调优　364


10.3　小结　366