Web数据可视化

Echart，D3方向

Created by Nelson Kuang 2018.08.17

风格设置

None - Fade - Slide - Convex - Concave - Zoom

主题选择

Black (default) - White - League - Sky - Beige - Simple
Serif - Blood - Night - Moon - Solarized

数据可视化基础

要学习Web数据可视化要了解的一些基础概念

• 图表的类型
• 组成图表的基本元素

图表的类型

散点图, 线状图, 面积图, 柱状图, 饼状图/环形图 , 组合线状/组合柱状图, 堆栈图, Gauge仪表盘图, 标签云图, 打包图, 弦图, 雷达图, 力向导图, 树状图, 漏斗图(Funnel), 热力图, K线图, geomap地图...

组成图表的基本元素

X轴(xAxis), Y轴(yAxis), 系列列表(series), 图例(legend) , 标题(title), 网格(grid), 极坐标系(polar), 径向轴(radiusAxis), 角度轴(angleAxis), 区域缩放(zoom), tooltip(提示框), toolbox(工具栏), 区域选择刷子(brush)...

5 分钟上手 ECharts

• 获取 ECharts
• 引入 ECharts
• 绘制一个简单的图表
• 这样你的第一个图表就诞生了！

获取 ECharts

• 从 官网 下载或者按需打包
• ECharts 的 GitHub 上下载
• npm 获取 echarts

  npm install echarts --save

• cdn 引入，你可以在 cdnjs， npmcdn 或者国内的 bootcdn

引入 ECharts

绘制一个简单的图表

这样你的第一个图表就诞生了！

D3.js从入门到“放弃”指南

• 学习好SVG矢量图
• 理解D3给Dom节点绑定数据时的Update、Enter和Exit模式
• 绘制一个简单的图表
• 各种想象不到的API

学习好SVG矢量图

SVG适量图是必须的，为什么要学习SVG图呢？因为D3.js堪称SVG中的jQuery，稍稍熟悉点jQuery的话，会更容易上手D3，当然你如果想用D3输出Canvas图或者你牛逼哄哄的说老子就只用D3来玩Canvas怎么嘀也可以，但SVG图操作起来更加灵活，更加方便调试，在Chrome中调试SVG图更加直观。D3只是一个作图工具，你完全也可以手写SVG的XML代码来完成作图...
去学习SVG吧...

D3的Update、Enter和Exit模式

								// Update…
								var p4 = d3.select("#my_p_4")
									.selectAll("p") // 选择所有的P元素
									.data([4, 8, 15, 16, 23, 40]) // 给所有的P元素相应绑定数据（当然P元素有可能与数组元素个数不相等，则要转入下面的Enter和exit操作）
									.text(function (d) { return d; }); // 改变所有的P元素的text为相应的数组的值
								
								p4.enter().append("p") // 如果原有P节点元素小于数组的元素个数，则要给父节点append节点补足
										.text(function (d) { return d; });
								
								// Exit…
								p4.exit().remove(); // 如果原有P节点元素大于数组的元素个数，则要执行删除操作，以保证p节点元素个数与传入的data数组元素个数相当
								

绘制一个简单的图表

简单？ 在D3的世界里没有“ 简单”两字

Talk is cheap, just show me the code!

简单柱状图源码

简单柱状图Demo

各种想象不到的API