数据篇32 # 如何选择合适的方法对数据进行可视化处理？

Posted 2023-01-06 凯小默

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了数据篇32 # 如何选择合适的方法对数据进行可视化处理？相关的知识，希望对你有一定的参考价值。

说明

【跟月影学可视化】学习笔记。

从原始数据中过滤出有用的信息

下面通过航拍公园人群分布例子，按照某些属性对数据进行过滤，再将符合条件的结果展现出来。

数据来源：https://github.com/akira-cn/graphics/blob/master/data/park-people/data.json

[
  "x": 456,
  "y": 581,
  "time": 12,
  "gender": "f"
, 
  "x": 293,
  "y": 545,
  "time": 12,
  "gender": "m"
, 
  "x": 26,
  "y": 470,
  "time": 12,
  "gender": "m"
, 
  "x": 254,
  "y": 587,
  "time": 12,
  "gender": "m"
, 
  "x": 385,
  "y": 257,
  "time": 8,
  "gender": "m"
, 
...]

上面数据里数组中的每一项表示一个游客，x、y 是拍摄位置，time 是时间，gender 是性别。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>游客散点图</title>
        <style>
            #main 
                width: 500px;
                height: 500px;
                position: absolute;
                border: 1px dashed #fa8072;
            

            #main > * 
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
            

            #main .landmark 
                position: absolute;
                line-height: 200px;
                width: 200px;
                height: 200px;
                border-radius: 50%;
                text-align: center;
                font-size: 32px;
                color: #fff;
            
            #main .landmark1 
                background: #daa520;
            
            #main .landmark2 
                left: 260px;
                background: #fa8072;
            
            #main .landmark3 
                top: 260px;
                background: #6a5acd;
            
            #main .landmark4 
                top: 260px;
                left: 260px;
                background: #2e8b57;
            
        </style>
    </head>
    <body>
        <div id="main">
            <div>
                <div class="landmark landmark1">广场</div>
                <div class="landmark landmark2">休闲区</div>
                <div class="landmark landmark3">游乐场</div>
                <div class="landmark landmark4">花园</div>
            </div>
            <canvas width="600" height="600"></canvas>
        </div>
        <script>
            const canvas = document.querySelector("canvas");
            const  width, height  = canvas;

            function draw(data, filter = null) 
                if (filter) data = data.filter(filter);
                const context = canvas.getContext("2d");
                for (let i = 0; i < data.length; i++) 
                    const  x, y, gender  = data[i];
                    context.fillStyle =
                        gender === "f"
                            ? "rgba(255, 0, 0, 0.4)"
                            : "rgba(0, 0, 255, 0.4)";
                    context.beginPath();
                    const spot = context.arc(x, y, 10, 0, Math.PI * 2);
                    context.fill();
                
            

            fetch("./data/park-people.json")
                .then((res) => 
                    return res.json();
                )
                .then((data) => 
                    // draw(data, ( time ) => time === 8);
                    draw(data, ( time ) => time === 12);
                    // draw(data, ( time ) => time === 18);
                    // draw(data, ( time ) => time === 20);
                );
        </script>
    </body>
</html>