D3.js入坑记|0 简介
D3.js入坑记
标签(空格分隔): 技术
数据可视化( Data Visualization )是把人类看不见的事物、现象等用人类能看见的方式把它表现出来。
柱形图、折线图、散点图,可被称为简单图表。
饼状图、力导向图、树状图、弦图等,可被称为复杂图表。饼状图又是复杂图表中最简单的。
从 D3 的角度看,简单图表不使用布局,复杂图表使用。
大数据时代要转变的思维:
1. 要分析所有数据,而不是少量的数据样本
在”大数据时代“,样本=总体
2. 要追求数据的纷繁复杂,而不是精确性
使用”标签“代替”分类“。现在互联网上广泛使用”标签“,通过标签来检索图片、视频、音乐等。当然,有时人们会错标标签,这让习惯精确性的人很痛苦,但是,接受”混乱“给我们带来了两个好处:
- 由于拥有了远比”分类”数量多得多的标签,我们能够获得更多的内容。
- 可以通过标签组合来过滤内容。
3. 要关注事物的相关关系,而不是因果关系
相关关系能给我们分析问题提供新的视角,我们不需要事事去探究为什么,并且,它使我们相信,不探究”为什么“也是合理的。
一个比喻
D3 就像是写毛笔字,其他的可视化库就像是写钢笔字。钢笔字上手容易,下笔简单,快捷,写出来的东西叫做文章。毛笔字需要长期磨练,上手较难,但是一旦掌握了,便能行云流水,心随念想,可进可退,只在笔尖,写出来的东西叫做艺术。
准备
预备知识
HTML:超文本标记语言,用于设定网页的内容
CSS:层叠样式表,用于设定网页的样式
JavaScript:一种直译式脚本语言,用于设定网页的行为
DOM:文档对象模型,用于修改文档的内容和结构
SVG:可缩放矢量图形,用于绘制可视化的图形
制作网页常用的工具即可。
- 记事本软件:Notepad++、Editplus、Sublime Text 等,选择自己喜欢的即可。
- 浏览器:IE9 以上、Firefox、Chrome等,推荐用 Chrome
- 服务器软件:Apache、Tomcat 等
其中,服务器软件可能不是必须的,不过 D3 中有些函数需要将 HTML 文件放置于服务器目录下,才能正常使用,关于这点以后会再做说明。
附:每个网站开发人员都有必要了解以下几方面的知识:
万维网如何工作
HTML 语言
如何使用层叠样式表 (CSS)
JavaScript 编程
XML 标准
服务器脚本技术
使用 SQL 来管理数据
接下来,正式开启入门
D3 入门系列
0 简介和安装
1 第一个程序HelloWorld
2 选择元素和绑定数据
2.1 选择、插入、删除元素
3 做一个简单的图表!
4 比例尺的使用
5 坐标轴
5.1 完整的柱形图
6 让图表动起来
7 理解 update, enter, exit 的使用
8 交互式操作
9 布局
9.1 饼状图的制作
9.2 力导向图的制作
9.3 弦图的制作
9.4 集群图的制作
9.5 树状图的制作
9.6 打包图的制作
10 地图的制作
10.1 简化 GeoJSON 文件
10.2 可拖动的地图
10.3 GeoJSON 和 TopoJSON 文件有什么不同?
入门总结