开源图形处理库_plotly.js简介-一个开源图形库
开源图形处理库
by Praveen Dubey
通过Praveen Dubey
plotly.js简介-一个开源图形库 (An introduction to plotly.js — an open source graphing library)
Plotly.js is a library ideally suited for JavaScript applications which make use of graphs and charts. There are a few reasons to consider using it for your next data visualization project:
Plotly.js是一个非常适合使用图形和图表JavaScript应用程序的库。 有几个理由考虑将其用于下一个数据可视化项目：
- Plotly.js uses both D3.js (SVG) and WebGL for graphics rendering Plotly.js同时使用D3.js(SVG)和WebGL进行图形渲染
- Plotly.js is an “all-in-one bundle” with d3.js and stack.gl modules Plotly.js是带有d3.js和stack.gl模块的“多合一捆绑包”
- It works with JSON schema 它适用于JSON模式
- Plotly.js supports basic, statistical, scientific, financial and map charts. Plotly.js支持基本，统计，科学，财务和地图图表。
Also, more than 9000 stars on its open source Github is a strong indicator for its community growth.
此外，其开源Github上有9000多颗星星，这是其社区发展的有力指标。
用法与范例 (Usage and Examples)
Let’s looks at setup and few examples for better and practical understanding.
让我们看一下设置和一些示例，以更好地和实际地理解。
First, include the file from its CDN.
首先，包括其CDN中的文件。
<head><!-- Include Plotly.js --><script src="https://cdn.plot.ly/plotly-latest.min.js"></script></head>Next, let’s plot a small graph which shows the numbers and their squares:
接下来，让我们绘制一个小图，以显示数字及其平方：
The code to generate this graph is below:
生成该图的代码如下：
<head> <!-- Include Plotly.js --> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script></head><body> <div id="myDiv"> <!-- Plotly chart will be drawn inside this DIV --> </div><script> var trace = { x: [1, 2, 3, 4, 5, 6, 7, 8], y: [1, 4, 9, 16, 25, 36, 49, 64], mode: 'line' };var data = [ trace ]; Plotly.newPlot('myDiv', data);</script></body>Basic setup can be done with a file inclusion, a DOM element, and a script for plotting.
基本设置可以通过包含文件，DOM元素和绘图脚本来完成。
After the inclusion of the Plotly.js library in <head>, we have defined an empty <div> to plot the graph.
在<he ad>中包含Plotly.js库之后，我们定义了一个empty <div>来绘制图形。
Plotly.new() draws a new plot in the<div> element, overwriting any existing plot and in this case we used myDiv. The input will be a <div> element and some data.
Plotly.new() 绘制在一个新的情节<d IV>元件，覆盖任何existin 克情节并且在这种情况下，我们used myDiv。 输入将be a <div>元素和一些数据。
Notice the inclusion of mode in the trace variable. It can be any combination of "lines", "markers", "text" joined with a "+" OR "none".
请注意，trace变量中包含mode 。 它可以是"lines" ， "markers" ， "text"加上"+"或"none"任意组合。
Examples include "lines", "markers", "lines+markers", "lines+markers+text", "none".
例子包括"lines" ， "markers" ， "lines+markers" ， "lines+markers+text" ， "none" 。
Here we have used markers. Notice that you only get points marked in the graph coordinates and do not see the connected line across all points.
在这里，我们使用了markers 。 请注意，您只会得到图形坐标中标记的点，并且 看不到所有点之间的连接线。
Plot multiple lines now just by adding values to the data variable:
现在只需将值添加到data变量即可绘制多行：
<head> <!-- Include Plotly.js --> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script></head><body> <div id="myDiv"> <!-- Plotly chart will be drawn inside this DIV --></div> <script> var trace1 = { x: [1, 2, 3, 4], y: [10, 15, 13, 17], mode: 'lines', type: 'scatter' };var trace2 = { x: [2, 3, 4, 5], y: [16, 5, 11, 9], mode: 'marker', type: 'scatter' };var trace3 = { x: [1, 2, 3, 4], y: [12, 9, 15, 12], mode: 'lines+markers', type: 'scatter' };var data = [trace1, trace2, trace3];Plotly.newPlot('myDiv', data); </script></body>The legend in a graph is linked to the data being graphically displayed in the plot area of the chart.
传奇 图表中的“图表”链接到在图表的绘图区域中以图形方式显示的数据。
As of now we don’t have any labels, and the legend looks like:
到目前为止，我们还没有任何标签，图例看起来像：
Let’s update them by using options such as text,textfont ,textpostion for customization of our data labels. These should be passed with individual data sets.
让我们通过使用诸如text ， textfont ， textpostion选项textpostion定义数据标签来更新它们。 这些应与单独的数据集一起传递。
<head> <!-- Include Plotly.js --> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script></head><body> <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div> <script> var trace1 = { x: [1, 2, 3, 4, 5], y: [100, 60, 30, 60, 10], mode: 'lines+markers+text', type: 'scatter', name: 'Beta', text: ['Mobile A', 'Mobile B', 'Mobile C', 'Mobile D', 'Mobile E'], textposition: 'top center', textfont: { family: 'Raleway, sans-serif' }, marker: { size: 12 } };var trace2 = { x: [1.5, 2.5, 3.5, 4.5, 5.5], y: [100, 10, 70, 150, 40], mode: 'lines+markers+text', type: 'scatter', name: 'Alpha', text: ['Product A', 'Product B', 'Product C', 'Product D', 'Product E'], textfont : { family:'Times New Roman' }, textposition: 'bottom center', marker: { size: 12 } };var data = [ trace1, trace2 ];var layout = { xaxis: { range: [ 0.75, 5.25 ] }, yaxis: { range: [0, 200] }, legend: { y: 0.5, yref: 'paper', font: { family: 'Arial, sans-serif', size: 20, color: 'black', } }, title:'Data Labels on the Plot' };Plotly.newPlot('myDiv', data, layout); </script></body>The layout of other visual attributes such as the title and annotations will be defined in an object usually called layout.
其他视觉属性(例如标题和注释)的layout将在通常称为layout的对象中定义。
By now we have seen some examples of line, let’s quickly plot a bar chart using 'bar' as type.
到目前为止，我们已经看到了一些折线示例，让我们使用'bar'作为类型快速绘制条形图。
var data = [{ x: ['Company X', 'Company Y', 'Company Z'], y: [200, 140, 230], type: 'bar'}];Plotly.newPlot('myDiv', data);You can also change the type in the above data shown for products and mobile by changing scatter to bar.
您也可以更改type 在上面显示的产品和移动设备数据中，将scatter更改为bar 。
var trace = { x: [1.5, 2.5, 3.5, 4.5, 5.5], y: [100, 10, 70, 150, 40], mode: 'lines+markers+text', type: 'bar', name: 'Alpha', text: ['Product A', 'Product B', 'Product C', 'Product D', 'Product E'], textfont : { family:'Times New Roman' }, textposition: 'top', marker: { size: 12 } };Here is one example which changes the opacity of bar:
这是一个改变不透明度的例子 条：
var trace2 = { x: ['Alpha', 'Beta', 'Gamma'], y: [100, 200, 500], type: 'bar', name: 'Opacity Example', marker: { color: 'rgb(204,204,204)', opacity: 0.5 }};We have created some basic scatter charts and talked about few options which can be easily tweaked to get different variations of the same chart.
我们创建了一些基本的散点图，并讨论了可以轻松调整以获取同一图表的不同变体的一些选项。
Let’s continue by plotting a meteor dataset using only few lines of code.
让我们继续绘制流星数据集 仅使用几行代码。
I am using dataset from bcdunbar’s github and will try to break down entire process into multiple steps.
我正在使用来自bcdunbar的github的数据集 并尝试将整个过程分为多个步骤。
Let’s get started.
让我们开始吧。
步骤1.初始设置 (Step 1. Initial Setup)
Add plotly.js in your HTML file. This includes the JavaScript file, empty div element and placeholder for scripts.
在您HTML文件中添加plotly.js。 这包括JavaScript文件，空div元素和脚本占位符。
<html><head> <!-- Include Plotly.js file from CDN --> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script></head><body><!-- DIV will be used for charts --><div id="mapDiv"></div> <script> // JS code for plot </script></div></body></html>步骤2.数据集 (Step 2. Dataset)
Since our dataset is in CSV format, we can use Plotly.d3.csv. It internally reads the CSV data from an AJAX call.
由于我们的数据集为CSV格式，因此我们可以使用Plotly.d3.csv 。 它从AJAX调用内部读取CSV数据。
Wrapper code for plotting:
包装图的绘图：
Plotly.d3.csv('https://raw.githubusercontent.com/bcdunbar/datasets/master/meteorites_subset.csv', function(err, rows){Plotly.plot('mapDiv', data, layout);});步骤3.访问令牌 (Step 3. Access Token)
Get the Mapbox access token we would be using from here.
从此处获取将要使用的Mapbox访问令牌。
Plotly.plot needs two main things: data and layout which defines what type of data will be used and how it should be plotted on screen.
Plotly.plot需要两件事： data和layout ，用于定义将使用哪种类型的数据以及应如何在屏幕上绘制数据。
步骤4.地图布局 (Step 4. Map Layout)
var layout = { title: 'Demonstration of Meteorite Landing using Plotly.js', font: { color: 'white' }, dragmode: 'zoom', mapbox: { center: { lat: 38.03697222, lon: -90.70916722 }, style: 'light', zoom: 2 }, paper_bgcolor: '#191A1A', plot_bgcolor: '#191A1A', showlegend: true, annotations: [{ x: 0, y: 0, text: 'NASA', showarrow: false }]};Notice that we are using mapbox to define all map configs including center, zoom level, color and legends.
请注意，我们正在使用mapbox 定义所有地图配置，包括中心，缩放级别，颜色和图例。
Next add the token we created in Step 3 by using:
接下来，使用以下命令添加我们在步骤3中创建的令牌：
Plotly.setPlotConfig({ mapboxAccessToken: 'your token here'});步骤5.处理数据 (Step 5. Process Data)
Last thing we need is to add our data object from the source CSV:
我们需要做的最后一件事是从源CSV添加数据对象：
var classArray = unpack(rows, 'class'); var classes = [...new Set(classArray)];function unpack(rows, key) { return rows.map(function(row) { return row[key]; }); }var data = classes.map(function(classes) { var rowsFiltered = rows.filter(function(row) { return (row.class === classes); }); return { type: 'scattermapbox', name: classes, lat: unpack(rowsFiltered, 'reclat'), lon: unpack(rowsFiltered, 'reclong') }; });Now we have data, layout, token and map… Here’s the end result:
现在我们有了数据，布局，令牌和地图……这是最终结果：
This was a plotting demonstration with step by step approach on plotting a map dataset using plotly.js. You can find a lot of examples on the Plotly documentation to get started with.
这是一个绘图演示，其中逐步介绍了如何使用plotly.js绘制地图数据集。 您可以在Plotly文档中找到很多入门示例。
Hope this gave you a good introduction to Plotly js.
希望这对Plotly js有一个很好的介绍。
Make sure to drop your feedback below, and code for this can be found on my Github.
请确保将您的反馈意见放在下面，并且可以在我的Github上找到相关代码。
开源图形处理库