使用P5.js的数据可视化入门

随着数字化全球化的发展，数据已经从有限的、昂贵的、难以找到的、或难以收集和采集的发展到丰富的、廉价的。人们花更多的时间在数字世界里看新闻或在社交媒体上，购买和销售产品和服务，这算是这个数字世界的一种新常态。

在目前的数字化中，数据可以简单地从许多重要的消费者那里获得。然而，这造成了不同渠道的笨重和广泛的信息。面对如此庞大的数据量，存储、处理、分析和理解每条信息变得很麻烦。

这种适度的数据量是如此之大，以至于传统软件无法收集、存储、理解或分析它。因此，大数据的概念产生了。

有了更容易获得的数据，在我们周围和数据中心里就有数千兆字节的数据。这些数据没有被使用，而是作为一种负担坐在那里。这些资源只有在我们作为个人和企业能够从中产生的情况下才是优秀的。

大数据的概念将数千兆字节的原始数据处理成企业和个人可以使用的有意义的价值，如预测性分析。这样一来，数据就不会闲置在数据中心里。相反，它被转化为数字黄金。

数据可视化代表了原始数据，并将其转化为图形、图表和图片，显示了原始数据的表现方式。处理这些数据可以确保数据的清洁和准确。

这使我们能够获得洞察力，识别新的模式和趋势。对它的可视化描述赋予原始原始数据以意义和目的。因此，模式和趋势出现了，我们可以产生可操作的洞察力。

当我们谈论可视化的时候，它是关于用我们的眼睛来可视化我们周围的事物。然后，我们将信息可视化，这样我们就可以做出一个明智的决定。所以我们可以看到数据中的趋势和模式，并与之联系起来。

在本教程中，我们将学习数据可视化，以及如何使用JavaScript，用P5.js在图形和图表中表示数据。P5.js是一个开源的JavaScript库，使数据可视化可以在网页上实现。

为什么我们要使用数据可视化

数据可视化带来了可视化的解释。与文本相比，这是一种更快的理解方式。它帮助我们更快地处理视觉上的东西。因此，数据可视化在分析趋势和模式时非常重要，可以找到洞察力并做出更明智的决定。

设置P5.js

P5.js是一个开源的创意编码JavaScript库。它用于使用HTML5画布元素进行素描和绘画。

它可以用以下安装方法来安装。

使用NPM

如果你是一个Node.js开发者，NPM将是一个合适的方法，让软件包在你的电脑上运行。NPM是一个在线注册表，它提供了各种开源库，当你在计算机中运行Node.js时，可以使用这些库。

因此，如果你已经安装了Node.js，运行下面的命令将得到P5.js的安装并准备使用。

npm install p5

请确保你首先使用npm init 来初始化一个Node.js项目。然后在你创建的项目文件夹内运行上述命令。

使用CDN

CDN是内容交付网络的意思。CDN是一个由地理分布的服务器组成的系统，位于世界不同地区的可靠数据中心。这个网络有助于根据用户的地理位置，将网页和其他网络内容传递给用户。

当你使用CDN进行内容分发时，将创建许多副本，并根据可能的最佳路线从不同地点向最终用户提供。因此，用户可以以最佳的速度和性能获得你的内容。

要用CDN安装P5.js，你要在一个HTML文件中包含一个CDN链接到P5.js资源，如下图所示。

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js"></script>

开始使用P5.js

现在让我们深入了解并开始使用这个神奇的库吧

创建一个项目目录，我们将在其中保存代码文件。在本指南中，我们将使用CDN来访问P5.js资源。在你的项目文件夹中，创建一个index.js 文件。我们将在这里添加CDN脚本，并将P5.js的JavaScript代码加载到浏览器中。在你的index.html 文件中，添加以下CDN脚本。

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js"></script>

另外，记得创建我们在上面的HTML代码块中导入的app.css 和index.js 文件。

P5.js使用一些函数来定义你的草图会是什么样子。

这些包括。

A **setup()**函数，用于创建画布并为该画布设置背景。
A**draw() 函数**- 这个函数在不同的时间范围内被连续调用。它用于绘制草图。它将绘制函数中的每一行代码执行一次，然后重新启动，一次又一次地绘制，直到整个检查完全加载完毕。

下面是一个P5.js草图的基本设置，它在一个网页上画一个矩形。

function setup() {
    // put setup code here
    createCanvas(400, 300);
}

function draw() {
  // put drawing code here
    background(200);
    rectMode(CENTER);

    // a central colored rectangle
    fill(27, 0, 179);
    stroke(0, 107, 179);
    strokeWeight(3);
    rect(200, 150, 150, 150);
}

当你运行上面的代码时，设置是这样的。

a-rectangular-sketch

从上面的代码块中，我们添加了setup() 和draw() 函数。setup() 正在引入并创建一个画布，而draw() 勾画一个带有外边框的矩形(stroke)。

然后使用rectMode() 函数将该矩形设置为中心位置。在这种情况下，每一帧的背景都被填充，然后它将全色改为蓝色，并使用设定的尺寸绘制一个矩形。

a-rectangular-sketch-explained

正如你所看到的，顺着这些包很容易。现在让我们使我们的代码库更加复杂。让我们试着画一个表示一些数据的图。我们将创建并绘制简单的指数线作为图表。

我们将首先使用setup() 函数设置一个画布和一个画布背景，如下图所示。

function setup() {

    createCanvas(600, 400);
    background(200);
}

画布已经设置好了，这就是我们要绘制指数线的地方。

现在让我们来设置一个draw() 函数，负责在上面设置的画布内勾画和绘制一个物体。

create-canvas-background

function draw() {

    background(200);

    one = createVector(50,300);
    two = createVector(500,50);

    line(one.x,one.y,two.x,two.y);
}

a-line-graph

上面的图形很简单，只是一条躺在画布上的简单线条。它是二维的。它有一个x-axis 和一个y-axis 。这个图形只是一个草图，它没有任何有意义的数据表示。

数组数据的可视化

要想在数据可视化方面驾轻就熟，首先需要收集数据，对其进行分析，并以可视化的设置来表示它。在这种情况下，为了让P5.js作为一个数据可视化包工作，我们需要有可用的数据。这些数据可以被收集并以不同的格式保存，如JSON、CSV或数组对象。

我们将使用一个简单的保存数据的项目案例，然后分析这些数据，并使用P5.js来表示它。我们将使用存储在数组中的数据，然后将其绘制在图表上。

在你开始之前，请确保你在你的HTML文件head 标签中设置了CDN，即。

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js" type="text/javascript"></script>

同时，确保你的index.js 和app.css 文件被添加到你的HTML文件中。

下面是我们将添加到app.css 文件中的代码。

html, body {
  margin: 0;
  padding: 0;
}

一旦设置完毕，我们就可以开始使用一组数组对象数据。

下面是我们将用于绘制图表的目标值。

["40","153","189","109","287","69","19","163"]

让我们深入进去，开始在index.js 文件内的代码工作。

首先设置以下数组值。

// target values
let values = ["40","153","189","109","287","69","19","163"];
// intermediate values
let lerpValues = [];
// index which will increase at regular intervals
let index = 0;

我们已经添加了我们想要表示的数据，如上面的数组所示。同时，设置一个空数组，我们将用它来迭代中间值。

由于一个数组的列表是从0 的位置开始的。我们添加了一个索引0 ，然后随着我们迭代到最大的数组索引而增加。数据已经准备好了，所以我们现在可以开始设置P5.js函数。

添加'setup()'函数

让我们添加setup() 函数。

function setup() {
  createCanvas(windowWidth,windowHeight);
  // Initialization of the table of intermediate values (all to zero)
  for(let i = 0;i<values.length;i++){
    lerpValues.push(0);
  }
}

现在我们正在创建画布，并为其设置背景。为了创建我们的图形，我们需要对中间值进行迭代。这将循环这些值并将它们推到画布上。

这将初始化所有数组的值。另外，避免用draw() 来初始化这种数组。正如我们所说，draw() 在不同的时间框架内被反复调用。在每一帧上创建一个新的数组会减慢你的帧速率。

添加'draw()'函数

draw() 函数负责绘制我们的图表。

function draw() {
  background(255);
  noStroke();
  fill(0,200,220);
  for(i=0;i<index;i++){
    let posx = map(i,0,values.length,40,width);
    lerpValues[i] = lerp(lerpValues[i],values[i],0.2);
    rect(posx, height-20, 40, -lerpValues[i]);
    textAlign(CENTER);
    text(round(lerpValues[i]),posx+20,height-lerpValues[i]-30);
  }
}

添加一个间隔时间框架

setInterval() 是在你想经常询问数据的时候使用的。这个函数是浏览器中JavaScript本身的一部分，不是P5.js的函数。它每隔一组毫秒就会触发一个事件。

setInterval(function(){
  if(index<values.length){
    index+=1;
  }
},100);

这主要用于在程序运行时不断从API中查询数据，而程序正在为数据表示的东西制作动画。这有助于继续顺利地加载，但每当有新的数据进来时就会更新。在上面的代码中，我们设置了setInterval() ，并传入一个回调100 milliseconds 。

添加一个'windowResized()'函数

由于当屏幕大小调整时，图形可以扩展到隐藏的屏幕上，这个windowResized() 函数将有助于在屏幕大小变化时保持整个图形在屏幕上。

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

这是我们最终的图表。

array-data-graph

现在的数据是根据这个数组中使用的每个索引的大小来表示的。正如你所看到的，绘制这些数据很简单。

让我们尝试另一个用例。

对保存在CSV文件中的数据进行可视化

数据会以不同的格式保存。让我们使用一个简单的用例，看看我们如何能够利用保存在CSV文件中的数据。下面是我们将使用的CSV数据样本。

csv-previewed-data

这个CSV表示一个国家的大小。然后根据每个组成部分的质量进行划分，如城市地区、森林覆盖率和道路面积。每个组成部分将代表在所代表的地理边界内所占据的质量。

在你的index.html 文件中添加以下内容。

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.dom.min.js"></script>

同时，在你的app.css 中添加以下内容，以格式化该页面。

html, body {
  margin: 100;
  padding: 0;
}
canvas {
  display: block;
}

添加一些变量

let data;
let values
let labels;
let t = 0;

在这里，我们要添加一些变量来加载数据、数据值、数据标签（名称），并通过数据进行迭代。

添加'preload()'函数

要加载任何外部数据，请使用preload() 函数。这指定了在我们开始使用P5.js在网页上可视化数据之前，我们将加载一个带有标题的CSV文件。记得从这个项目的GitHub文件中下载这个data.csv 文件。

function preload() {
  data = loadTable('./data.csv', 'csv', 'header');
}

添加'setup()'函数

我们将在我们的画布上添加以下内容。

function setup() {
  createCanvas(800, 600);
  // give the name of the columns
  // give the number of lines
  // give the values of the Mass (Tt) column
  values = data.getColumn("Mass (Tt)");
  labels = data.getColumn("Component");
}

在上面的代码中，我们正在设置我们想要布置的画布或图形。我们还在加载列的名称和每列的值。

作为说明，我们可以使用setup() ，加载可以在不同时间段调用的框架。这就减少了每当draw() 与草图框架一起被调用时发生的多余的调用。

我们有两个主要的列，Component 和Mass (Tt) 。Component 将加载与每个值相关的文本标签（列名）。Mass (Tt) 将加载每个列代表的所有值。我们将使用这些值根据每个组件所占的质量来绘制不同的框架。

添加'draw()'函数

function draw() {
  background(255);
  for (let i = 0; i < values.length; i++) {
    rect(i * 40, height - 1, 40, -values[i] * t);
    fill(0, 200, 220);

    // text (labels [i], i * 40 + 20, height-1-values [i] * t-10);
    push();
    translate(i * 40 + 20, height - 1 - values[i] * t - 10);
    // to tilt the texts at 45 °
    rotate(radians(-45));
    fill(0, 200, 220);
    text(labels[i], 0, 0);
    pop();

  }
  if (t < 40) {
    t = t + 1;
  }
}

这就是真正的草图实现的地方。所以，现在我们需要遍历这些数据并读取每个值。我们要根据每个组件所代表的数字来设置每个值的高度。每个值都会画出一个单一的图形。draw() ，迭代并执行它们。然后结合不同的时间框架，得出整个图形。

为了更容易不被接受，我们还将组件的名称作为标签添加到每个呈现的值中。

现在草图已经完成，我们可以测试一切是否正常。要运行这个应用程序，你需要使用一个实时服务器。如果你在浏览器中直接打开这个HTML文件，这段代码就不会执行。我们正在运行一个在你的电脑上本地托管的外部文件。这需要作为一个服务器来运行。

为了把它提供给我们的应用程序，我们将利用[Visual Studio Code]和[Atom]编辑器提供的live sever。

对于Visual Studio atom-live-server，安装[live server]扩展。
对于Atom安装[atom-live-server]包。

当你运行你的实时服务器时，你会得到一个与此类似的图表。

visualized-csv-data

结论

P5.js是一个终极草图框架。它可以用于各种用例，如创建幻觉图、设计简单的游戏、数据可视化、屏幕移动等。例如，这个乒乓游戏就是完全用P5.js设计的。

pong-game

你能想到的任何草图都可以用P5.js包来实现。作为一个数据分析工具，P5.js可以兼容加载不同的数据源，如CSV文件或JSON对象。它也可以用来加载保存在服务器（API）中的数据，分析并以你的最佳表现形式绘制图表。

如何使用P5.js进行数据可视化的入门教程

使用P5.js的数据可视化入门

为什么我们要使用数据可视化

设置P5.js

开始使用P5.js

数组数据的可视化

添加'setup()'函数

添加'draw()'函数

添加一个间隔时间框架

添加一个'windowResized()'函数

对保存在CSV文件中的数据进行可视化

添加一些变量

添加'preload()'函数

添加'setup()'函数

添加'draw()'函数

结论