网络拓扑

D3.js入坑记|0 简介

2016-08-12  本文已影响194人  4plus

D3.js入坑记

标签(空格分隔): 技术


数据可视化( Data Visualization )是把人类看不见的事物、现象等用人类能看见的方式把它表现出来。

柱形图、折线图、散点图,可被称为简单图表。

饼状图、力导向图、树状图、弦图等,可被称为复杂图表。饼状图又是复杂图表中最简单的。

从 D3 的角度看,简单图表不使用布局,复杂图表使用。

大数据时代要转变的思维:

1. 要分析所有数据,而不是少量的数据样本

在”大数据时代“,样本=总体

2. 要追求数据的纷繁复杂,而不是精确性

使用”标签“代替”分类“。现在互联网上广泛使用”标签“,通过标签来检索图片、视频、音乐等。当然,有时人们会错标标签,这让习惯精确性的人很痛苦,但是,接受”混乱“给我们带来了两个好处:

  1. 由于拥有了远比”分类”数量多得多的标签,我们能够获得更多的内容。
  2. 可以通过标签组合来过滤内容。

3. 要关注事物的相关关系,而不是因果关系

相关关系能给我们分析问题提供新的视角,我们不需要事事去探究为什么,并且,它使我们相信,不探究”为什么“也是合理的。

一个比喻

D3 就像是写毛笔字,其他的可视化库就像是写钢笔字。钢笔字上手容易,下笔简单,快捷,写出来的东西叫做文章。毛笔字需要长期磨练,上手较难,但是一旦掌握了,便能行云流水,心随念想,可进可退,只在笔尖,写出来的东西叫做艺术。

准备

预备知识

HTML:超文本标记语言,用于设定网页的内容
CSS:层叠样式表,用于设定网页的样式
JavaScript:一种直译式脚本语言,用于设定网页的行为
DOM:文档对象模型,用于修改文档的内容和结构
SVG:可缩放矢量图形,用于绘制可视化的图形

制作网页常用的工具即可。

其中,服务器软件可能不是必须的,不过 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 文件有什么不同?
入门总结

资源&参考

上一篇下一篇

猜你喜欢

热点阅读