通过plotly.express库和Flask框架部署企鹅数据可视化的网页

这里不废话，直接入主题。

1.企鹅数据表下载网址

说明：阿里云天池提供大量免费的数据表，学习数据可视化的朋友可以自己去下载。
南极洲企鹅数据表下载地址

2、Flask框架的项目的文件目录如图

这里主要通过app.py部署resume.html在通过其中的链接访问chartsajax.html文件
app.py源码：
注意：这里的gm0()->gm15()共16个函数分别对应可视化截图中的16章图。

from flask import Flask, render_template, request
import pandas as pd
import json
import plotly
import plotly.express as px

import csv, re, operator
# from textblob import TextBlob

app = Flask(__name__)
@app.route('/')
def cv(person=person):
    return render_template('resume.html', person=person)
@app.route('/chart')
def index():
	return render_template('chartsajax.html',  graphJSON0 = gm0(),graphJSON1 = gm1(),graphJSON2 = gm2(),graphJSON3 = gm3()
                           , graphJSON4 = gm4(), graphJSON5 = gm5(),graphJSON6 = gm6() ,graphJSON7 = gm7(),graphJSON8= gm8()
                           , graphJSON9 = gm9(),graphJSON10 = gm10(),graphJSON11 = gm11(),graphJSON12 = gm12(), graphJSON13 = gm13(),
                           graphJSON14 = gm14(), graphJSON15 = gm15() )
def gm0():
    df = pd.read_csv("penguins.csv")

    fig = px.scatter(df, x="flipper_length_mm", y='body_mass_g',color="species")
    graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
    return graphJSON
def gm1():
    df = pd.read_csv("penguins.csv")

    fig = px.scatter(df, x="flipper_length_mm", y='body_mass_g',color="species" ,facet_col ='island',log_x=True)
    graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
    return graphJSON

def gm2():
    df = pd.read_csv("penguins.csv")
    fig = px.histogram(df, x="flipper_length_mm", y='body_mass_g', color="species")
    graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
    return graphJSON
def gm3():
    df = pd.read_csv("penguins.csv")
    # gapminder = px.data.gapminder()
    # gapminder2007 = gapminder.query('year == 2007')
    fig = px.scatter(df, x="flipper_length_mm", y='body_mass_g', color="species",marginal_y="rug", marginal_x="histogram")
    graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
    return graphJSON
def gm4():
    df = pd.read_csv("penguins.csv")
    # gapminder = px.data.gapminder()
    # gapminder2007 = gapminder.query('year == 2007')
    fig = px.box(df, x="body_mass_g", y="species", orientation="h", color="sex", notched=True)
    graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
    return graphJSON

def gm5():
    df = pd.read_csv("penguins.csv")
    # gapminder = px.data.gapminder()
    # gapminder2007 = gapminder.query('year == 2007')
    fig = px.violin(df, y="bill_length_mm", x="island", color="sex", box=True, points="all")
    graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
    return graphJSON

def gm6():
    df = pd.read_csv("penguins.csv")
    # gapminder = px.data.gapminder()
    # gapminder2007 = gapminder.query('year == 2007')
    fig = px.scatter(df, x="bill_length_mm", y="species", color="sex",  marginal_x="violin", marginal_y="box")
    graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
    return graphJSON

def gm7():
    df = pd.read_csv("penguins.csv")
    # gapminder = px.data.gapminder()
    # gapminder2007 = gapminder.query('year == 2007')
    fig = px.scatter_matrix(df, dimensions=['bill_length_mm', 'bill_depth_mm', 'flipper_length_mm','body_mass_g'], color='species')
    graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
    return graphJSON

def gm8():
    df = pd.read_csv("penguins.csv")
    # gapminder = px.data.gapminder()
    # gapminder2007 = gapminder.query('year == 2007')
    fig = px.parallel_coordinates(df,
                                  color="species_id",
                                  labels={"species_id":"species",
                                          'bill_length_mm':'bill_length',
                                          'bill_depth_mm':'bill_depth',
                                          'flipper_length_mm':'flipper_length',
                                          'body_mass_g':'body_mass'},
                                  color_continuous_scale=px.colors.diverging.Tealrose,
                                  color_continuous_midpoint=2)
    graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
    return graphJSON

def gm9():
    df = pd.read_csv("penguins.csv")
    # gapminder = px.data.gapminder()
    # gapminder2007 = gapminder.query('year == 2007')
    fig = px.parallel_categories(df, color="species_id", color_continuous_scale=px.colors.sequential.Inferno)
    graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
    return graphJSON

def gm10():
    df = pd.read_csv("penguins.csv")
    # gapminder = px.data.gapminder()
    # gapminder2007 = gapminder.query('year == 2007')
    fig = px.line(df, x="island", y="bill_depth_mm", color="species",
                  line_group="species", hover_name="species",
                  line_shape="spline", render_mode="svg")
    graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
    return graphJSON

def gm11():
    df = pd.read_csv("penguins.csv")
    # gapminder = px.data.gapminder()
    # gapminder2007 = gapminder.query('year == 2007')
    fig = px.area(df, x="island", y="bill_depth_mm", color="species",
        line_group="species")
    graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
    return graphJSON

def gm12():
    df = pd.read_csv("penguins.csv")
    # gapminder = px.data.gapminder()
    # gapminder2007 = gapminder.query('year == 2007')
    fig =px.density_contour(df, x='bill_length_mm', y='bill_depth_mm', color="species")
    graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
    return graphJSON
def gm13():
    df = pd.read_csv("penguins.csv")
    fig = px.density_heatmap(df, x='bill_length_mm', y='bill_depth_mm')
    graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
    return graphJSON

def gm14():
    df = pd.read_csv("penguins.csv")
    fig =px.bar(df, x="island", y="flipper_length_mm", color="sex", barmode="group")

    graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
    return graphJSON

def gm15():
    df = pd.read_csv("penguins.csv")
    fig =px.pie(df, values='flipper_length_mm', names='island')
    graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
    return graphJSON
if __name__ == '__main__':
  app.run(debug= True,port=5000,threaded=True)

resume.html的关键代码

<p><a href="{{url_for('index')}}" target="_blank">有关企鹅数据的分析</a></p>

chartsajax.html源码：

<!doctype html>
<html xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"
      xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body style="font-family:arial, sans-serif">
<center><h1>基于帕尔默群岛（南极洲）企鹅数据的数据可视化分析</h1></center>
<h2>1、数据简介 </h2>
    <div>
        <h3>1.1、数据来源</h3>
        <p>数据由克里斯汀·高曼博士和长期生态研究网络成员南极洲帕尔默站收集并提供。 感谢Gorman博士，帕默站LTER和LTER网络！特别感谢Marty Downs（LTER网络办公室主任）在数据许可和使用方面的帮助。</p>
    </div>
      <div >
        <h3>1.2 、数据许可</h3>
          <p>根据Palmer Station LTER数据策略和I类数据的LTER数据访问策略，可通过CC-0许可证获得数据</p></div>
    <div>
        <h3>1.3、数据字段</h3>
       <p>数据文件夹包含两个CSV文件。对于入门课程/示例，您可能要使用第一个课程（penguins_size.csv）。 penguins_size.csv：原始企鹅数据集的简化数据。包含变量：
       <li>island：企鹅生活岛屿</li>
       <li>species：企鹅种类（Chinstrap，Adélie或Gentoo）</li>
       <li>bill_length_mm：比尔长（mm）</li>
       <li>bill_depth_mm：比尔深（mm）</li>
       <li>flipper_length_mm：脚蹼长度（mm）</li>
       <li>body_mass_g：体重（克）</li>
       <li>island：帕尔默群岛（南极洲）中的岛屿名称（Dream，Torgersen或Biscoe）</li>
       <li>sex：企鹅性别</li>
       <li>species_id:岛屿编号</li>
       </p>
   </div>
<h2>2、数据分析成果 </h2>
<h3>2.1 散点图</h3>
<p> 散点图是指在回归分析中，数据点在直角坐标系平面上的分布图，散点图表示因变量随自变量而变化的大致趋势，据此可以选择合适的函数对数据点进行拟合。</p>
    <div id="chart" class="chart"></div>
<p> 该图为不同种类（这里有3种）的企鹅，根据企鹅的脚掌大小判断企鹅脚掌与重量的相关性。</p>
<p> 通过该图可以判断出企鹅的脚掌大小与重量呈现正相关（脚掌越大，重量越重）。并且还能观察出，Gentoo种类的企鹅，它的脚掌和体重分别比另外2种企鹅的脚掌和体重大和重</p>

<h3>2.2 分类散点图</h3>
<p> 该散点图可以通过数据的某个属性的分类，对一组数据在某个数据限制下的数据进行相关性分析</p>
    <div id="chart1" class="chart"></div>
<p> 该散点图，是根据企鹅生活的岛屿，对不同岛屿上的企鹅的种类脚掌与体重的相关性</p>
<p> 通过该图，我们可以观察到：3个岛屿中，企鹅脚掌企鹅重量呈正相关；并且还观察到：不同种类企鹅生活不同岛屿的数量大致趋势。</p>

<h3>2.3 直方图</h3>
<p>直方图是数值数据分布的精确图形表示。 这是一个连续变量（定量变量）的概率分布的估计。作直方图的目的就是通过观察图的形状，判断因变量是否稳定，预测数据分析过程的结果</p>
    <div id="chart2" class="chart"></div>
<p>通过该直方图，可以直观清晰地观察到，不同种类的企鹅的体重，因脚大小变化的分布情况。</p>
<p>从图中我们得出了,Chinstrap和Adelie这两种企鹅体重集中为125kg-225kg之间,且脚掌大小为185mm-200mm之间；Gentoo类企鹅的体重大多数为125kg-175kg之间，且脚掌打大小为210mm-225mm之间</p>

<h3>2.4、联合分布图</h3>
<p>多种图形的联合在同一图形之中，通过对比分析，使得直观分析某些变量的结果更加的准确和真实。</p>
    <div id="chart3" class="chart"></div>
<p>该图是散点图、直方图和条形图主城的联合分布图，自变量是企鹅的脚掌大小，而因变量为企鹅的体重，以不同种类的企鹅标志不同的颜色</p>
<p>该图再一次确认了，3种企鹅的脚掌与体重的关系，使得前面分析的数据更加具有准确性和说服力。</p>

<h3>2.5、箱型图</h3>
<p>箱形图又称为盒须图、盒式图或箱线图，是一种用作显示一组数据分散情况资料的统计图。因形状如箱子而得名。在各种领域也经常被使用，常见于品质管理。</p>
<p>它主要用于反映原始数据分布的特征，还可以进行多组数据分布特征的比 较。箱线图的绘制方法是：先找出一组数据的上边缘、下边缘、中位数和两个四分位数；</br>然后， 连接两个四分位数画出箱体；再将上边缘和下边缘与箱体相连接，中位数在箱体中间。</p>
    <div id="chart4" class="chart"></div>
<p>该图主要是分析不同性别的企鹅，在不同岛屿上的体重的分布情况。</p>
<p>该图可以清晰地观察出Torgersen、Biscoe、Dream这3个岛屿上，男企鹅和女企鹅的体重的分布情况和其中的差异性。</p>

<h3>2.6、小提琴图</h3>
<p>小提琴图是外形像小提琴的一种图。这种图用来显示数据的分布和概率密度，可以看成是箱线图和密度图的结合。小提琴图的中间部分反映箱线图的信息，图的两侧反映出密度图的信息。</p>
    <div id="chart5" class="chart"></div>
<p>该图主要分析不同岛屿上，男企鹅和女企鹅的比尔长的分布的密度信息</p>
<p>从图中我们可以得出Torgersen、Biscoe、Dream这3个岛屿上男企鹅和女企鹅的比尔长的分布的密度（mm）分别为：
<li>Torgersen岛屿男企鹅：38.756-42.725</li>
<li>Torgersen岛屿女企鹅：35.8-39.25</li>
<li>Biscoe岛屿男企鹅：43.5-50.075</li>
<li>Biscoe岛屿女企鹅：39.65-46.5</li>
<li>Dream岛屿男企鹅：40.6-51.3</li>
<li>Dream岛屿女企鹅：36.976-46.625</li>
</p>

<h3>2.7、联合分布图</h3>
    <div id="chart6" class="chart"></div>
<p>该图主要是联合了散点图、小提琴图和箱型图，主要分析不同种类企鹅中，男女企鹅的比尔长的分布情况。</p>
<h3>2.8、如散点图矩阵</h3>
<p>散点图矩阵（SPLOM）允许您可视化多个链接的散点图：数据集中的每个变量与其他变量的关系。
    数据集中的每一行都显示为每个图中的一个点。你可以进行缩放、平移或选择操作，你会发现所有图都链接在一起！</p>
    <div id="chart7" class="chart"></div>
<p>该图主要绘制的是不同岛屿之间不同种类企鹅的比尔长、比尔深度、脚板大小以及体重的变化和分布情况。</p>
<p>通过该图可以直观看出不同岛屿间企鹅多个属性的相关性和分布性等。</p>

<h3>2.9、平行坐标图</h3>
<p>平行坐标图是一种通常的可视化方法， 用于对高维几何和多元数据的可视化。
    平行坐标图是信息可视化的一种重要技术。为了克服传统的笛卡尔直角坐标系容易耗尽空间、 难以表达三维以上数据的问题，
    平行坐标图将高维数据的各个变量用一系列相互平行的坐标轴表示，变量值对应轴上位置。为了反映变化趋势和各个变量间相互关系，往往将描述不同变量的各点连接成折线。</br>
    所以平行坐标图的实质是将m维欧式空间的一个点Xi(xi1,xi2,...,xim) 映射到二维平面上的一条曲线。 </br>
    平行坐标图的一个显著优点是其具有良好的数学基础，其射影几何解释和对偶特性使它很适合用于可视化数据分析。</p>
    <div id="chart8" class="chart"></div><p></p>
<p>该图主要分析bill_length_mm：比尔长（mm），bill_depth_mm：比尔深（mm），
    flipper_length_mm：脚蹼长度（mm），body_mass_g：体重（克），species_id:岛屿编号这5个属性之间的多元数据，得出结论。</p>
<p>通过不同变元之间的数据变化最终可以得出企鹅的种类编号。</p>

<h3>2.10、并行类别图</h3>
<p>并行类别是并行坐标的分类模拟：使用它们可视化数据集中多组类别之间的关系。</p>
    <div id="chart9" class="chart"></div><p></p>

<p>该图主要分析种类、生活岛屿、性别、种类编号之间的变化关系</p>
<p>通过途中的颜色条的变化，我们可以得出不同岛屿之间，企鹅的种类是分布不均匀的。</p>


<h3>2.11、线条图</h3>
<p>线条图（也叫做矢量图形）是由线条、曲线、矩形以及其他对象创建的。用户可以编辑、移动和重新排列单独的线条。</p>
    <div id="chart10" class="chart"></div><p></p>
<p>通过描绘不同岛屿之间不同种类的企鹅的比尔深度的分布情况，可以判断出Adelie这种企鹅生活于3个岛屿之间</p>

<h3>2.12、面积图</h3>
<p>面积图又称区域图，强调数量随时间而变化的程度，也可用于引起人们对总值趋势的注意。堆积面积图和百分比堆积面积图还可以显示部分与整体的关系。</p>
    <div id="chart11" class="chart"></div><p></p>
<p>该图主要分析不同岛屿之间的不同企鹅的比尔深度的分布总值趋势情况</p>
<p>从图中我们可以看出，Adelie这种企鹅在3个岛屿中比尔长几乎不变化。而Chinstrap企鹅在Dream岛屿中的比Biscoe岛屿中的更加深，Gentoo类企鹅在3种岛屿中比尔深度都不同</p>

<h3>2.13、等高线图</h3>
<p>用于分析多组数据的梯度变化</p>
    <div id="chart12" class="chart"></div>
<p>从图中可以看出，不同种类的企鹅的比尔长和比尔深度的梯度变换</p>

<h3>2.14、密度热力图</h3>
<p>以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示。热力图可以显示不可点击数据组合段发生的事情</p>
    <div id="chart13" class="chart"></div>
<p>该图主要分析的是所有企鹅的比尔长度和比尔深度之间的密度分布情况</p>
<p>从图中我们可以看出颜色由蓝到黄，数据量显示一次增加。</p>

<h3>2.15、条形图</h3>
<p>条形图（bar chart）是用宽度相同的条形的高度或长短来表示数据多少的图形。条形图可以横置或纵置，纵置时也称为柱形图（column chart），是统计图资料分析中最常用的图形。主要特点有</br>
    1、能够使人们一眼看出各个数据的大小。</br> 2、易于比较数据之间的差别。</p>
    <div id="chart14" class="chart"></div><p></p>
<p>该图研究的是不同岛屿之间不同种类企鹅的男女分布情况。</p>
<p>从图中可以直观看出，3个岛屿企鹅的男女比列相差不大。并且不同岛屿之间企鹅的数量由大到小依次为：Biscoe、Dream、Torgersen。</p>

<h3>2.16、饼状图</h3>
<p>饼状图显示一个数据系列（数据系列：在图表中绘制的相关数据点，这些数据源自数据表的行或列。
    图表中的每个数据系列具有唯一的颜色或图案并且在图表的图例中表示。可以在图表中绘制一个或多个数据系列。
    饼状图只有一个数据系列。）中各项的大小与各项总和的比例。饼状图中的数据点
    （数据点：在图表中绘制的单个值，这些值由条形、柱形、折线、饼状图或圆环图的扇面、圆点和其他被称为数据标记的图形表示。相同颜色的数据标记组成一个数据系列。）
    显示为整个饼状图的百分比。</p>
    <div id="chart15" class="chart"></div><p></p>
<p>这里主要显示本数据中各个岛屿研究企鹅的数量比例。Biscoe占有：51%，Dream占有：35.5%，Torgersen：13.5%。</p>

<h2>3、总结 </h2>
<p>Plotly.py 已经发展成为一个非常强大的可视化交互工具，它可以让你控制图形的几乎每个方面，从图例的位置到刻度的长度。推出 Plotly Express 的主要目标是使 Plotly.py 更容易用于探索和快速迭代；
对于Plotly 生态系统，一旦使用 Plotly Express 创建了一个图形，就可以使用Themes，使用 FigureWidgets 进行命令性编辑，使用 Orca 将其导出为几乎任何文件格式，或者在 GUI JupyterLab 图表编辑器中编辑它；
主题(Themes)允许控制图形范围的设置，如边距、字体、背景颜色、刻度定位等，也可以使用模板参数，应用任何命名的主题或主题对象；
Plotly_express 的输出，继承自 Plotly.py 的 Figure 类 ExpressFigure 的对象，这意味着可以使用任何 Figure 的访问器和方法，来改变 px 生成的图表，通常借助于 .update() 函数来调用；
demo：对Plotly_express生成的图表，设置标记类型、坐标轴标签名称、坐标轴刻度倾斜角度、显示坐标轴线、坐标轴刻度间隔等。总而言之，Plotly.py 是一个功能齐全，能力强大的库。作为一名数据分析员，是很有必去要学习和掌握的！</p>

</body>

<script>
    d0 = {{ graphJSON0 | safe }};
    Plotly.newPlot('chart', d0, {});

    d1 = {{ graphJSON1 | safe }};
    Plotly.newPlot('chart1', d1, {});

    d2 = {{ graphJSON2 | safe }};
    Plotly.newPlot('chart2', d2, {});

    d3 = {{ graphJSON3 | safe }};
    Plotly.newPlot('chart3', d3, {});


    d4 = {{ graphJSON4 | safe }};
    Plotly.newPlot('chart4', d4, {});

    d5 = {{ graphJSON5 | safe }};
    Plotly.newPlot('chart5', d5, {});

    d6 = {{ graphJSON6 | safe }};
    Plotly.newPlot('chart6', d6, {});

    d7 = {{ graphJSON7 | safe }};
    Plotly.newPlot('chart7', d7, {});

    d8 = {{ graphJSON8 | safe }};
    Plotly.newPlot('chart8', d8, {});

    d9 = {{ graphJSON9 | safe }};
    Plotly.newPlot('chart9', d9, {});

    d10 = {{ graphJSON10 | safe }};
    Plotly.newPlot('chart10', d10, {});

    d11 = {{ graphJSON11 | safe }};
    Plotly.newPlot('chart11', d11, {});

    d12 = {{ graphJSON12 | safe }};
    Plotly.newPlot('chart12', d12, {});

    d13 = {{ graphJSON13 | safe }};
    Plotly.newPlot('chart13', d13, {});

    d14 = {{ graphJSON14 | safe }};
    Plotly.newPlot('chart14', d14, {});

    d15 = {{ graphJSON15 | safe }};
    Plotly.newPlot('chart15', d15, {});
</script>
</html>

运行后的网页结果如下：

续上图

如有疑问评论区可留言询问，如有不足请大家指正，一起学习，一起进步，谢谢。路过的你我们下次再见！