当前位置: article > 正文

echarts d3比较_技术人员眼中的BI之可视化 —— 艺术家：D3

作者：不正经 | 2024-05-18 06:49:41

踩

echarts d3

可视化的经典著作

如上一篇聊ECharts时所说，用ECharts只回答了HOW的问题，并没有回答WHY的问题。要回答WHY的问题，我们就需要有理论来指引了。

可视化的一本经典之作就是：《The Grammar of Graphics》（《图形语法》）这本书了：

此书作为经典，指引了很多图形库的设计。当然对于值得我们尊敬的经典著作，我肯定不期望能在一篇公众号的文章里就能描述清楚，还请有志于深入研究可视化的朋友们自行研读。

本文主要是从更实用的角度，用另一个非常著名的 D3 可视化JavaScript库来让大家体验一下可视化的魅力。

D3

D3，全名是：Data-Driven Documents，项目地址在：https://d3js.org/

项目的历史我就不再赘述了，大家可以自行搜索 D3 （也可以顺便了解一下它的创建者 Mike Bostock https://bost.ocks.org/mike/）

D3的特点：

表达能力非常强大
非常底层（如果类比编程语言的话， D3可以算是C语言，SVG是汇编语言）

由于其太底层又博大精深，所以比较难在文章中写清。所以，我也犹豫了很久要不要写D3，不过考虑到D3在可视化领域的“泰山北斗”地位，如果写可视化而不写D3，那将会是不完整的。So, 让我们开始D3之旅。

Step 0. 准备工作

本文中的例子是和前文ECharts中同样的例子：”世界人口总量“在2011年和2012年的对比。方便大家来体会EChart和D3的不同。

建立一个 d3.html 文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3 Demo</title>
<script src="https://d3js.org/d3.v5.js"></script>
</head>
<body>
<svg></svg>
</body>
<script>
</script>
</html>

后续的所有D3代码将动态修改 <svg></svg> 中的内容

Step 1. 获取数据

首先，我们把数据（前文ECharts中的例子）存为csv文件，作为样例数据

yearcountrypopulation2011巴西182032012巴西193252011印尼234892012印尼234382011美国290342012美国310002011印度1049702012印度1215942011中国1317442012中国1341412011世界人口6302302012世界人口681807

接下来，我们通过 d3.csv 函数来获取和解析CSV中的数据，以供后续使用。

由于CSV中，默认每个值都是文本类型，而我们知道 year 和 population 是数值类型，那么我们可以在 d3.csv 的第二个参数（回调函数）中做类型转化：

let dataset = await(d3.csv("d3data.csv", function(d) {
return {
year: +d.year,
country: d.country,
population: +d.population
};
}));

获取到如下方便 D3 操作的数据：

[
{"year": 2011, "country": "巴西", "population": 18203},
{"year": 2012, "country": "巴西", "population": 19325},
{"year": 2011, "country": "印尼", "population": 23489},
{"year": 2012, "country": "印尼", "population": 23438},
{"year": 2011, "country": "美国", "population": 29034},
{"year": 2012, "country": "美国", "population": 31000},
{"year": 2011, "country": "印度", "population": 104970},
{"year": 2012, "country": "印度", "population": 121594},
{"year": 2011, "country": "中国", "population": 131744},
{"year": 2012, "country": "中国", "population": 134141},
{"year": 2011, "country": "世界人口", "population": 630230},
{"year": 2012, "country": "世界人口", "population": 681807}
]

Step 2. 数据转化

《图形语法》一书中提到了三种数据转化操作：

cross：有点类似SQL中的笛卡尔积
blend：有点类似SQL中的Union
nest：有点类似SQL中的Group By，但是不一样

本例中，由于本例中数据是单表，我们只需要用 nest 操作，D3中的相关文档：https://github.com/d3/d3-collection/blob/v1.0.7/README.md#nest

我们先来看一下简单的对国家做 nest 操作会得到什么结果？

d3.nest()
.key(d => d.country)
.entries(dataset)

得到结果：

[
{
"key": "巴西",
"values": [
{"year": 2011, "country": "巴西", "population": 18203},
{"year": 2012, "country": "巴西", "population": 19325}
]
},
{

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/587183