说明
【跟月影学可视化】学习笔记。
数据可视化的一般过程
- 先看有什么样的数据：分析真实数据
- 然后看想从数据中了解什么信息：获取想要的信息
- 再决定使用何种可视化方式呈现：为数据选择正确的呈现形式
- 最后看展示的效果怎么样，是否有意义：了解数据背后有价值的内容
实战演练：对公园中的游客进行数据可视化
这里使用上一节的例子进行实战演练：数据还是那些，里面有时间、地点和性别。
[{ "x": 456, "y": 581, "time": 12, "gender": "f" }, { "x": 293, "y": 545, "time": 12, "gender": "m" }, { ... }]
- 第一步：假设我们想了解公园一天中的游客变化规律
- 第二步：需要统计不同时间段公园内人数
- 第三步：要呈现游客在不同时间段的变化规律，使用折线图来呈现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>公园24小时游客人数变化图</title> <style> html, body { width: 100%; height: 100%; } #container { width: 600px; height: 600px; border: 1px dashed #fa8072; } </style> </head> <body> <script src="https://d3js.org/d3.v6.js"></script> <script src="https://unpkg.com/spritejs@3/dist/spritejs.min.js"></script> <div id="container"></div> <script> const { Scene, Sprite, Polyline, SpriteSvg } = spritejs; (async function () { const data = await (await fetch("./data/park-people.json")).json(); // 用到 d3.rollups 它可以对数据进行分组，然后汇总 const dataset = d3 .rollups( data, (v) => v.length, (d) => d.time ) .sort(([a], [b]) => a - b); // 假设公园是早晨 6 点开门，晚上 22 点关门，此时游客数为0 dataset.unshift([6, 0]); dataset.push([22, 0]); console.log(dataset); const scene = new Scene({ container, width: 600, height: 600, displayRatio: 2, }); const fglayer = scene.layer("fglayer"); // 把数据转换成要显示的折线上的点坐标 const points = []; dataset.forEach((d, i) => { const x = 20 + 20 * d[0]; const y = 300 - d[1]; points.push(x, y); }); // 用 SpriteJS 创建 Polyline 元素，把这个折线点坐标传给它 const p = new Polyline(); p.attr({ points, lineWidth: 4, strokeColor: "salmon", smooth: true, }); fglayer.append(p); // 创建坐标轴 // 设置 domain 从 0 到 24，表示一天的 24 个小时，range 从 0 到 480，表示占据 480 像素宽度。 const scale = d3.scaleLinear().domain([0, 24]).range([0, 480]); // 通过 d3.axisBottom 高阶函数，用创建的 scale 来生成一个具体的坐标轴算子 axis const axis = d3 .axisBottom(scale) .tickValues(dataset.map((d) => d[0])); const axisNode = new SpriteSvg({ x: 20, y: 300, flexible: true, }); d3.select(axisNode.svg) .attr("width", 600) .attr("height", 60) .append("g") .call(axis); axisNode.svg.children[0].setAttribute("font-size", 20); fglayer.append(axisNode); })(); </script> </body> </html>
第四步：大致就得到了一天中游园人数的变化趋势，这对公园来说是有一些参考价值的。
