数据是纯粹的事实，纯粹意味着这种事实没有任何处理，意义也没有得到揭示 ，但是信息是数据处理的结果，它揭示了数据的意义，而且是数据的可视化表示
- 抛弃不精确的样本数据，分析全部数据（小数据时代 随机采样分析 依赖随机性，很难做到 ）
- 着眼数据的完整性，弱化单条数据精确性
请看svg目录
请看canvas目录
d3是data driven documents 数据驱动文档的缩写 d3 includes data and document d3 是一个数学js库，比较底层
- txt
- json
- csv
// append 插入元素，并改变指向到当前元素
const el = d3.select("body").append("p")
// 操作属性 attr 会覆盖掉老的attr
const el = d3.select("body").append("p")
el.attr("class", "className").text("huahua")
// 样式操作 true代表add，false代表删除
el.classed("hua-h2", true)
el.classed("hua-h1", true)
el.style("color", "green")
是使用fetch方法加载数据的
// load txt
d3.text("/path/to/file.txt").then(function(text) {
console.log(text); // Hello, world!
});
//load csv
d3.csv("./demo.csv").then(function(data) {
console.log(data);
});
// load json
d3.json("./demo.json").then(function(data){
console.log(data)
})
-
没有被可视化的数据，记做A和B的差集，A\B ,为了得到这个结果，我们需要selection.data(data).enter()， 这个函数返回一个全新的D3对象集合，表示没有被可视化的数据 ， 在这个集合上的函数操作且关联图形，这个状态叫做 进入状态（enter mode）
-
如数据领域a（数据）和图形领域b（图形）的交集 A∩B ，我们用selection.data(data) 表示这个交集 ，函数的返回值 表示绑定了数据的D3对象集合，我们就可以处理新集合，这个新集合的状态叫做更新（update mode）状态,
-
没有数据管理的图形，B\A，表示删除数据后，失去数据关联的图形集合，可以通过函数 selection.exit得到，当我们在这个新的集合调用相关 函数操作更新或者删除不需要的图形，这个状态叫做exit mode 退出状态
// 简单chart
const data = [10,25,30]
d3.select("#app").
selectAll("div").data(data).enter().append("div").
attr("class" ,"bar").style("height", function(d){
return d * 10 + 'px'
})
// svg chart
const svg = d3.select("#app").append("svg").attr("width", 1000).attr("height", 400)
svg.selectAll("react").data(data).enter().append("rect").
attr("x" , function(d,i){
return i * (1000/ data.length)
}).
attr("y" , 10).
attr("height" , function(d){
return d;
}).
attr("width" , function(d){
return 800/data.length - 5
})
- selection.sort 是排序，
- selection.filter 是过滤
- d3.json 可以从服务端拉取json数据
函数F，是集合A到集合B的映射，如果A是数据域，B是图形域，函数f就是把集合 A映射到B的一个尺度(scale)
- 星期 %a Fri %A Friday
- 月份 %b Feb %B February
- 几号 %d %e 01 1
- %x 年月日
- %X 时分秒
d3 动画是基于插值的
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent