当前位置:

首页 > temp > JavaScript教程 >

五、plotly.js 数据可视化

五、plotly.js 数据可视化

绘图和可视化是数据分析中非常重要的任务，因此，我们将用整整一章的时间来讨论它们。数据分析师通常会执行绘图和数据可视化，作为探索性数据分析 ( EDA )阶段的一部分。这可以极大地帮助识别隐藏在数据中的有用模式，并为数据建模建立直觉。

在这一章中，您将学习如何使用 Plotly.js 创建丰富的交互式情节，这些情节可以嵌入到任何 web 应用中。

具体来说，我们将涵盖以下主题:

plotly . js 简介
plotly . js 的基本原理
用 Plotly.js 创建基本图表
用 Plotly.js 创建统计图表

技术要求

为了遵循本章，您应该具备以下条件:

现代浏览器，如 Chrome、Safari、Opera 或火狐
Node.js 和(可选)安装在系统上的丹佛笔记本 ( Dnotebook )
用于下载数据集的稳定互联网连接

Dnotebook 的安装说明可以在 第二章Dnotebook-一个 JavaScript 的交互式计算环境中找到。

注意

如果不想安装任何软件或库，可以在https://playnotebook.jsdata.org/使用 Dnotebook 在线版。

Danfo.js 自带出图应用编程接口 ( API )方便出图，引擎盖下使用 Plotly。这就是我们在本章中介绍 Plotly.js 的主要原因，因为在这里获得的知识将帮助您在下一章中轻松定制使用 Danfo.js 创建的地块。

plotly . js 简介

根据作者的说法，plotly . js(https://plotly.com/javascript/)是一个开源的、高级的、声明性的图表库，它建立在流行的 D3 . js(https://d3js.org/)和 stack . GL(https://github.com/stackgl)库之上。

它支持超过 40 种图表类型，包括以下几种:

基本图表，如散点图、折线图、条形图和饼图
统计图表，如箱线图、直方图和密度图
热图、对数图和等高线图等科学图表
财务图表，如瀑布图、烛台图和时间序列图
气泡图、choropleth 图和 Mapbox 图等地图
散点图、曲面图以及三维网格的三维 ( 三维)图表

要使用 Plotly.js，您需要访问浏览器的文档对象模型 ( DOM )。这意味着 Plotly.js 是一个客户端库，因此只能通过内容交付网络 ( CDN )脚本在浏览器中使用，或者在React、Vue等客户端库中使用。在下一节中，我们将看到如何安装 Plotly.js。

通过脚本标签使用 Plotly.js

为了在超文本标记语言 ( HTML )文件中使用 Plotly.js ，需要通过其script标签添加 Plotly.js。在下面的代码片段中，我们将 Plotly.js script标签添加到一个简单的 HTML 文件的标题部分:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script> 
</head>
<body>

</body>
</html>

如前面的代码片段所示，添加完 Plotly.js script标签后，保存 HTML 文件并在浏览器中打开它。输出将是一个空页面，但是在引擎盖下，Plotly.js 被添加并在页面中可用。我们可以通过制作一个简单的图来测试这一点，按照这里的步骤:

在 HTML 主体中创建一个div标签，在这里将绘制图形。我们给它一个myPlot的标识符 ( ID ，如下图:

js <body> <div id="myPlot"> </body
In the body of your HTML page, create sample x and y data, and then plot a scatter plot, as shown in the following code snippet:

js ... <body> <div id="myPlot"></div> <script> let data = [{ x: [1, 3, 5, 6, 8, 9, 5, 8], y: [2, 4, 6, 8, 0, 2, 1, 2], mode: 'markers', type: 'scatter' }] Plotly.newPlot("myPlot", data) </script> </body> ...

在浏览器中打开 HTML 文件会得到以下输出:

Figure 5.1 – A simple scatter plot made with Plotly

图 5.1–用 Plotly 制作的简单散点图

在本章中我们将大量使用的 Dnotebook 中，您可以通过首先使用load_package函数在顶部单元格中加载脚本来加载和使用 Plotly，如以下代码片段所示:

load_package(["https://cdn.plot.ly/plotly-1.58.4.min.js"])

然后，在新单元格中，可以添加以下代码:

let data = [{
  x: [1,3,5,6,8,9,5,8],
  y: [2,4,6,8,0,2,1,2],
  mode: 'markers',
  type: 'scatter'
}]

Plotly.newPlot(this_div(), data)

运行前面的代码单元将产生以下输出:

Figure 5.2 – A simple scatter plot made with Plotly on Dnotebook

图 5.2–用数据手册上的 Plotly 制作的简单散点图

你可以看到上一节的代码和 HTML 版本是一样的，只有一个细微的区别——传递给Plotly.newPlot的this_div函数。

this_div函数只是一个 Dnotebook 助手函数，它创建并返回代码单元块正下方的div标签的标识。这意味着无论何时你在 Dnotebook 中处理情节，你都可以使用this_div功能获得一个div标签。

注意

接下来，我们将使用this_div而不是指定div标签标识。这是因为我们将主要在 T4 的环境中工作。要在 HTML 或其他用户界面 ( UI )客户端中使用代码，只需将this_div更改为您想要使用的div标签的 ID 即可。

现在您知道如何安装 Plotly，我们将进入下一部分，这是关于创建基本图表。

plotly . js 的基本原理

使用 Plotly.js 的一个主要优势就是上手容易，可以指定很多配置让你的剧情更好。在这一节中，我们将介绍一些重要的可用配置选项，并向您展示如何指定这些选项。

在我们进一步讨论之前，让我们了解如何将数据输入 Plotly。

数据格式

要制作一个二维 ( 2D )图，其中是您将要创建的最常见的类型的图，您必须传递一个带有x和y键的数组对象，如以下代码示例所示:

const trace1 = { 
  x: [20, 30, 40],
  y: [2, 4, 6]
}

注意

数据点通常在 Plotly 中被称为轨迹。这是因为您可以在一个图形中绘制多个数据点。这里提供了一个例子:

var data = [trace1, trace2]

Plotly.newPlot("my_div", data);

x和y数组可以包含字符串和数字数据。如果它们包含字符串数据，数据点将按原样绘制，即点到点。这里有一个例子:

var trace1 = {
    x:['2020-10-04', '2021-11-04', '2023-12-04'],
    y: ["cat", "goat", "pig"],
    type: 'scatter'
};
Plotly.newPlot(this_div(),  trace1);

运行前面的代码单元将产生以下输出:

Figure 5.3 – A plot of string values against date with Plotly

图 5.3–用 Plotly 绘制的字符串值与日期的关系图

另一方面，如果您的数据是数字，Plotly 将自动排序，然后选择默认比例。请看下面的例子:

var trace1 = {
    x: ['2020-10-04', '2021-11-04', '2023-12-04'],
    y: [90, 20, 10],
    type: 'scatter'
};
var data = [trace1];
Plotly.newPlot(this_div(), data);

运行前面的代码单元将产生以下输出:

Figure 5.4 – A plot of numerical values against date with Plotly

图 5.4–用 Plotly 绘制的数值与日期的关系图

在我们将移到配置部分之前，让我们看一个在同一图表中绘制多个轨迹的例子。首先，我们设置数据，如下面的代码片段所示:

var trace1 = {
    x:['2020-10-04', '2021-11-04', '2023-12-04'],
    y: [90, 20, 10],
    type: 'scatter'
};
var trace2 = {
    x: ['2020-10-04', '2021-11-04', '2023-12-04'],
    y: [25, 35, 65],
    mode: 'markers',
    marker: {
        size: [20, 20, 20],
    }
};
var data = [trace1, trace2];
Plotly.newPlot(this_div(), data);

运行前面的代码单元将给出如下输出:

Figure 5.5 – A plot of multiple traces sharing the same x axis

图 5.5–共享同一个 x 轴的多条轨迹图

注意

在单个图表中绘制多个轨迹时，建议轨迹共享一个公共轴。这使你的情节更容易阅读。

如果您想知道是否可以向数据数组中添加更多的跟踪，那么答案是肯定的——您可以添加任意多的跟踪，但是您必须考虑可解释性，因为添加更多的跟踪可能不容易解释。

现在您已经知道如何将数据传递到图中，让我们了解一些基本的配置选项，您可以在制作图表时将其传递给 Plotly。

地块的配置选项

配置可用于设置属性，如图形的交互性和模式条。配置是一个对象，通常作为Plotly.newPlot调用中的最后一个参数传递，如下面的代码片段所示:

config = { … }
Plotly.newPlot("my_div", data, layout, config)

在接下来的章节中，我们将介绍一些常见的配置选项，这些选项将在 第 8 章中使用，创建无代码数据分析/处理系统。如果你想知道有哪些配置选项可以使用，那么你可以在这里了解更多:https://plotly . com/JavaScript/configuration-options/# remove-modebar-buttons。

向模式栏添加自定义按钮

Plotly 为提供了一种方式向模式栏添加具有自定义行为的按钮。当我们想要用自定义行为扩展我们的情节时，这变得非常有用，例如，链接到您的个人网站。

在下面的例子中，我们将添加一个自定义按钮，在点击时向用户显示This``is``an``example``of``a``plot``that``answers``a``question``on``click。

注意

添加自定义按钮在 Dnotebook 中不起作用，所以我们将在一个 HTML 文件中这样做。您可以使用 Plotly 脚本设置一个 HTML 文件，正如我们在中通过脚本标签使用 Plotly.js 部分所演示的那样。

在 HTML 文件的正文部分中，添加以下代码:

<div id="mydiv"></div>
<script>
        ...
        var config = {
            displayModeBar: true,
          modeBarButtonsToAdd: [
                {
                    name: 'about',
                    icon: Plotly.Icons.question,
                    click: function (gd) {
                        alert('This is an example of a plot that answers a question on click')
                    }
                }]
        }
        Plotly.newPlot("mydiv", data, layout, config);
 </script>

在浏览器中保存并打开前面的 HTML 文件，点击刚刚创建的按钮。它应该显示一个带有您指定的文本的警报，类似于下面屏幕截图中显示的警报:

Figure 5.9 – Chart with a custom button

图 5.9–带有自定义按钮的图表

在我们之前展示的代码片段中，请注意modeBarButtonsToAdd配置选项。这个选项是我们定义要添加的按钮的地方，以及当我们点击它时会发生什么。这里列出了创建自定义按钮时可以指定的主要属性:

name:按钮的名称。
icon:模式栏中显示的图标/图像。这可以是自定义图标，也可以是任何内置的 Plotly 图标。
click:这定义了当你点击按钮时会发生什么。在这里，您可以指定任何 JavaScript 函数，甚至可以更改图表的行为。

接下来，让我们看看如何制作静态图表。

制作静态图表

默认情况下，Plotly 图表是交互式的。如果您希望使它们成为静态的，那么您可以在config对象中指定以下选项:

var config = {
  staticPlot: true
}

当我们只想通过分散注意力的交互来显示图表时，静态图表会很有用。

接下来，我们将向您展示如何创建响应迅速的图表。

制作响应式图表

要使图表具有响应性，例如可以在显示的窗口旁边自动调整大小，您可以将responsive属性设置为true，如以下代码片段所示:

var config = {
   responsive: true
}

当您创建将跨不同屏幕尺寸显示的网页时，响应式图表非常有用。

在下一节中，我们将向您展示如何在图表中下载和设置下载选项。

自定义下载绘图选项

默认情况下，当显示模式栏时，可以将绘图图表保存为便携式网络图形 ( PNG )文件。这个可以自定义，可以设置下载图片类型，以及文件名、高度、宽度等其他属性。

为此，您可以在config对象中设置toImageButtonOptions属性，正如我们在下面的代码片段中演示的:

var config = {
  toImageButtonOptions: {
    format: 'jpeg', // one of png, svg, jpeg, webp
    filename: 'my_image', // the name of the file
    height: 600,
    width: 700,
  }
}

最后，在下一节中，我们将演示如何更改图表的区域设置。

更改默认区域设置

为说其他语言的人制作图表时，地区很重要。这可以大大提高图表的可解释性。

接下来，我们将把默认区域设置从英语更改为法语:

Get the specific locale and add it to your HTML file (or load it using load_scripts in Dnotebook), as shown in the following code snippet:

js ... <head> <script src="https://cdn.plot.ly/plotly-1.58.4.min.js"></script> <script src="https://cdn.plot.ly/plotly-locale-fr-latest.js"></script>  </head> ...

在 Dnotebook 中，这可以使用load_package完成，如下所示:

js load_package(["https://cdn.plot.ly/plotly-1.58.4.min.js", "https://cdn.plot.ly/plotly-locale-fr-latest.js"])
在您的config对象中，指定区域设置，如下面的代码片段所示:

js var config = { locale: "fr" }

让我们看一个完整的例子有相应的输出。将以下代码添加到您的 HTML 文件正文中:

<div id="mydiv"></div>
 <script>
      var trace1 = {
            x: ['2020-10-04', '2021-11-04', '2023-12-04'],
            y: [90, 20, 10],
            type: 'scatter'
        };
        var trace2 = {
            x: ['2020-10-04', '2021-11-04', '2023-12-04'],
            y: [25, 35, 65],
            mode: 'markers',
            marker: {
                size: [20, 20, 20],
            }
        };
        var data = [trace1, trace2];
        var layout = {
            title: 'Change Locale',
            showlegend: false
        };
        var config = {
            locale: "fr"
        };
        Plotly.newPlot("mydiv", data, layout, config);
    </script>

在浏览器中加载 HTML 页面会显示如下图表，其中locale设置为法语:

Figure 5.10 – Chart with locale set to French

图 5.10–区域设置为法语的图表

现在你知道如何配置你的图了，我们将进入图表配置的另一个重要方面:布局。

情节布局

layout(https://plotly.com/javascript/basic-charts/。

在本节中，我们将介绍一些基本图表，如散点图、条形图和气泡图。

首先，我们从散点图开始。

用 Plotly.js 创建散点图

一个散点图通常用于绘制两个变量的相互关系。绘图显示为点的集合，因此命名为散点图。以下屏幕截图显示了散点图的示例:

Figure 5.15 – Example of a scatter plot showing Fare against Age margin

图 5.15–显示票价与年龄差距的散点图示例

要使用 Plotly 绘制散点图，您只需指定绘图类型，如下例所示:

var trace1 = {
    x: [2, 5, 7, 12, 15, 20],
    y: [90, 80, 10, 20, 30, 40],
    type: 'scatter'
};
var data = [trace1];
Plotly.newPlot(this_div(), data);

这给出了以下输出:

Figure 5.16 – Example scatter plot of sales versus margin

图 5.16–销售与利润的散点图示例

默认情况下，点使用线连接在一起。您可以通过设置模式类型来改变此行为。模式类型可以是以下任何一种:

markers
lines
text
none

您也可以通过用加号将它们连接在一起来使用多个模式，例如markers+text+lines或markers+lines。

在下面的例子中，我们使用markers和text作为我们的模式类型:

var trace1 = {
    x: [2, 5, 7, 12, 15, 20],
    y: [90, 80, 10, 20, 30, 40],
    type: 'scatter',
    mode: 'markers+text'
};
var data = [trace1];
Plotly.newPlot(this_div(), data);

这给出了以下输出:

Figure 5.17 – Scatter plot with mode type set to markers+text

图 5.17–模式类型设置为标记+文本的散点图

如前所述，可以在单个图表中绘制多个散点图，每个轨迹可以根据需要配置。在下面的示例中，我们绘制了三个配置了不同模式的散点图:

var trace1 = {
  x: [1, 2, 3, 4, 5],
  y: [1, 6, 3, 6, 1],
  mode: 'markers',
  type: 'scatter',
  name: 'Trace 1',
};
var trace2 = {
  x: [1.5, 2.5, 3.5, 4.5, 5.5],
  y: [4, 1, 7, 1, 4],
  mode: 'lines',
  type: 'scatter',
  name: 'Trace 2',
};
var trace3 = {
  x: [1, 2, 3, 4, 5],
  y: [4, 1, 7, 1, 4],
  mode: 'markers+text',
  type: 'scatter',
  name: 'Trace 3',
};
var data = [ trace1, trace2, trace3];
var layout = {
  title:'Data Labels Hover',
  width: 1000
};
Plotly.newPlot(this_div(), data, layout);

运行前面的代码单元会产生以下输出:

Figure 5.18 – Scatter plot with three traces

图 5.18–带有三条轨迹的散点图

现在您已经学习了基本图表的概念，在本节中，您可以轻松地从自定义数据点创建散点图，并使用所需的属性自定义大小。

接下来，我们将简要地看一下条形图。

创建条形图

条形图是 Plotly.js 中另一种流行的类型的图表，它用于使用矩形条显示数据点之间的关系，高度或长度与它们所代表的值成比例。条形图主要用于绘制分类数据。

注意

分类数据或分类变量是具有固定或有限数量的可能值的变量。英语字母表中的字母是分类数据的一个例子。

为了在 Plotly.js 中制作条形图，需要传递一个分类数据点，对应条高/长度，然后将类型设置为bar，如下例所示:

var data = [
  {
    x: ['Apple', 'Mango', 'Pear', 'Banana'],
    y: [20, 20, 15, 40],
    type: 'bar'
  }
];
Plotly.newPlot(this_div(), data);

运行前面的代码单元会产生以下输出:

Figure 5.19 – Simple bar chart with four variables

图 5.19–带有四个变量的简单条形图

通过创建多个轨迹并将它们作为一个数组传递给，可以在单个布局中绘制多个条形图。例如，在下面的代码片段中，我们创建了两个跟踪和一个绘图:

var trace1 = {
    x: ['Apple', 'Mango', 'Pear', 'Banana'],
    y: [20, 20, 15, 40],
    type: 'bar'
  }
var trace2 = {
    x: ['Goat', 'Lion', 'Spider', 'Tiger'],
    y: [25, 10, 14, 36],
    type: 'bar'
  }
var data = [trace1, trace2]
Plotly.newPlot(this_div(), data);

运行前面的代码单元会产生以下输出:

Figure 5.20 – A bar chart with two traces

图 5.20–带有两条轨迹的条形图

在同一类别内绘制多条轨迹时，可以指定一个barmode 属性。barmode属性可以是stack或group模式中的一种。例如，在下面的代码片段中，我们在stack模式下制作了两个类别相同的轨迹的条形图:

var trace1 ={
    x: ['Apple', 'Mango', 'Pear', 'Banana'],
    y: [20, 20, 15, 40],
    type: 'bar',
    name: "Bar1"
  }
var trace2 = {
    x: ['Apple', 'Mango', 'Pear', 'Banana'],
    y: [25, 10, 14, 36],
    type: 'bar',
   name: "Bar2"
  }
var data = [trace1, trace2]
var layout = {
  barmode: 'stack'
}
Plotly.newPlot(this_div(), data, layout);

运行前面的代码单元会给以下输出:

Figure 5.21 – A bar chart with two traces in stack mode

图 5.21–堆叠模式下带有两条轨迹的条形图

在下面的代码片段中，我们将barmode属性更改为group(默认模式):

...
var layout = {
  barmode: 'group'
}
...

这将产生以下输出:

Figure 5.22 – A bar chart with two traces in group mode

图 5.22–分组模式下带有两条轨迹的条形图

制作条形图时，您可以指定许多其他选项，但我们不会在本节中涵盖所有选项。您可以在这里的官方文档中看到所有配置选项，以及清晰的创建良好条形图的示例:https://plotly.com/javascript/bubble-charts/。

你可以制作许多其他类型的基本情节，但可悲的是，我们不能涵盖所有的情节。Plotly 文档中的基本图表页面(https://plotly.com/javascript/histograms/。

在下一节中，我们将介绍方框图。

用 Plotly.js 创建方框图

A 方块图是描述性统计中非常常见的类型的图。它用图形展示了使用四分位数的数字数据组。箱线图也有在上方或下方延伸的线条，称为须。胡须代表上下四分位数之外的可变性。

小费

四分位数将指定数量的数据点分成四个部分或四个季度。第一个四分位数是最低的 25%的数据点，第二个四分位数在 25%到 50%之间(达到中位数)，第三个四分位数是 50%到 75%(高于中位数)，最后，第四个四分位数描绘了最高的 25%的数字。

下面的图可以帮助你更好的理解方框图:

Figure 5.29 – Diagram depicting a box plot (source: Redrawn from https://aiaspirant.com/box-plot/)

图 5.29–描绘箱线图的图表(来源:https://aiaspirant.com/box-plot/重绘)

在 Plotly.js 中，我们通过传递数据并将trace类型设置为box来制作一个方框图。我们在下面的示例中演示这一点:

var y0 = [];
var y1 = [];
for (var i = 0; i < 50; i ++) {//generate some random numbers
y0[i] = Math.random();
y1[i] = Math.random() + 1;
}
var trace1 = {
  y: y0,
  type: 'box'
};
var trace2 = {
  y: y1,
  type: 'box'
};
var data = [trace1, trace2];
Plotly.newPlot(this_div(), data);

运行前面的代码单元会产生以下输出:

Figure 5.30 – A simple box plot with two traces

图 5.30–带有两条轨迹的简单方框图

我们可以将方框图的布局配置为水平，而不是默认的垂直格式。在下一节中，我们将演示如何做到这一点。

制作水平方框图

通过在轨迹中指定x值而不是y值，可以制作水平图。我们在下面的代码片段中演示了这一点:

var x0 = [];
var x1 = [];
for (var i = 0; i < 50; i ++) {
x0[i] = Math.random();
x1[i] = Math.random() + 1;
}
var trace1 = {
  x: x0,
  type: 'box'
};
var trace2 = {
  x: x1,
  type: 'box'
};
var data = [trace1, trace2];
Plotly.newPlot(this_div(), data);

运行前面的代码单元给出以下输出:

Figure 5.31 – A simple box plot with two traces

图 5.31–带有两条轨迹的简单方框图

您也可以制作分组方框图，如下节所示。

制作分组方框图

共享同一 x 轴的多个轨迹可以组合成单个方框图，如以下代码片段所示:

var x = ['Season 1', 'Season 1', 'Season 1', 'Season 1', 'Season 1', 'Season 1',
         'Season 2', 'Season 2', 'Season 2', 'Season 2', 'Season 2', 'Season 2']
var trace1 = {
  y: [2, 2, 6, 1, 5, 4, 2, 7, 9, 1, 5, 3],
  x: x,
  name: 'Blues FC',
  marker: {color: '#3D9970'},
  type: 'box'
};
var trace2 = {
  y: [6, 7, 3, 6, 0, 5, 7, 9, 5, 8, 7, 2],
  x: x,
  name: 'Reds FC',
  marker: {color: '#FF4136'},
  type: 'box'
};
var trace3 = {
  y: [1, 3, 1, 9, 6, 6, 9, 1, 3, 6, 8, 5],
  x: x,
  name: 'Greens FC',
  marker: {color: '#FF851B'},
  type: 'box'
};
var data = [trace1, trace2, trace3];
var layout = {
  yaxis: {
    title: 'Points in two seasons',
  },
  boxmode: 'group'
};
Plotly.newPlot(this_div(), data, layout);

运行前面的代码单元给出以下输出:

Figure 5.32 – A box plot with three traces grouped together

图 5.32–三条轨迹组合在一起的箱线图

在制作方块图时，您可以设置许多其他的选项，但是我们会让您在方块图文档中阅读更多关于它们的信息:https://plotly.com/javascript/violin/。

说完这些，我们就要结束关于 Plotly.js 的介绍部分了。在下一章中，我们将向您展示如何使用 Danfo.js 快速轻松地为这个特定库支持的任何类型的数据制作图。

总结

在本章中，我们介绍了 Plotly.js 的绘图和可视化。首先，我们简要介绍了 Plotly.js，包括安装设置。然后，我们继续讨论图表配置和布局定制。最后，我们向您展示了如何创建一些基本图表和统计图表。

您在本章中获得的知识将帮助您轻松创建交互式图表，您可以将其嵌入到您的网站或网络应用中。

在下一章中，我们将介绍使用 Danfo.js 的数据可视化，您将看到，借助 Plotly.js 的知识，您如何直接从您的 DataFrame 或 Series 轻松创建令人惊叹的图表。

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://www.moonapi.com/news/93.html

栏目列表