Python数据可视化Dash+Bootstrap

Python基于Dash+Bootstrap的数据可视化

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

Dash框架是基于flask、React 、plotly开发的可视化框架，不仅对其进行了集成、还将繁琐的方法统一起来。简单好学，通过极少量的代码就可以实现炫酷的可视化界面，简直不要太方便。
效果如下：

可视化图形，八大功能

下载图片、变焦、图片移动、框中选择、套索选中、放大、缩小、居中显示

代码实现思路

主要分为两点
1、app.py中编写程序代码。包含创建画布、绘制图形、界面布局三个部分
2、assets文件下的myapp.css文件进行界面布局、界面渲染*

有道友问：Dash是怎么找到路径的呢？如下图：


Dash默认识别文件夹名为assets，可自行更改。

环境配置

pip install dash -i https://pypi.tuna.tsinghua.edu.cn/simple some-package
pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple some-package

上代码

app.py

import dash
import dash_core_components as dcc
import dash_html_components as html

app=dash.Dash()

def tiaoxing():
    return html.Div([
        html.P([]),
    dcc.Graph(
    id='tx',
        figure={
            'data':[
                {'x':[4,6,8],'y':[12,16,18],'type':'bar','name':'chart one'},
                {'x':[4,6,8],'y':[20,24,28],'type':'bar','name':'chart two'}
            ],
            'layout':{
                'title':'simple bar chart',
            }
        }
    )
],className='tiaoxing')

def zhexiantu():
    return html.Div([
        html.P([]),
        dcc.Graph(
            id='xtq',
            figure={
                'data':[
                    {'x':[1,2,3,4,5,6,7,8,9,10,11],'y':[5,8,11,32,41,5,2,7,16,4,8],'type':'Scatter','name':'one'},
                    {'x': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 'y': [5,6,3,7,1,5,48,2,3,58,4,],'type': 'Scatter', 'name': 'two'}
                ],
                'layout':{
                    'title':'折线图'

                }
            }
        )
    ],className='zhexiantu')
a=16
def bink():
    return html.Div([
        html.P([]),
        dcc.Graph(
            id='btk',
            figure={
                'data': [
                    {'labels': ['one', 'two', 'three', 'four', 'five', 'six'],
                     'values': [50, 34, 86, 75, 64, 39], 'type': 'pie', 'hole': '0.8', 'name': '饼图', 'size': '100'}
                ],
                'layout': {'title':'bingtu'}
            }
        )
    ], className='bintuk')

def sandiantu():
    import numpy as np
    b = np.random.uniform(1, 3, size=300)
    c = 0.5 * b ** 2 + b + 2 + np.random.normal(0, 1, size=300)
    return html.Div([
        html.P([]),
        dcc.Graph(
            id='sdt',
            figure={
                'data':[
                    {'x':b,'y':c,'type':'Scatter','mode':'markers','name':"散点图"}
                ],
                'layout':{
                    'title':'sandian'
                }
            }
        )
    ],className='sandiantu')
def bintu():
    return html.Div([
        html.P([]),
        dcc.Graph(
            id='bt',
            figure={
                'data':[
                    {'labels':['one', 'two', 'three', 'four', 'five', 'six'],'values':[280, 25, 10, 100, 250, 270],'type':'pie','name':'bingtu','size':'100'}
                ],
                'layout':'bingtu'
            }
        )
    ],className='bintu')
def row1():
    return html.Div([
        tiaoxing(),
        bink(),
        sandiantu()
    ], className='row')
def row2():
    return html.Div([
            zhexiantu(),
            bintu()
    ],className='row')
def row3():
    return html.Div([
        row1(),
        row2()
    ],className='di')
app.layout=html.Div([
    html.H1(["交互式电子信息可视化"],style={'margin':'2% auto','color':'white'}),
    row3(),
],className='card')

if __name__ =='__main__':
    app.run_server(port=4050)

项目完整代码请点击我的云盘
提取码：mk3b
如有任何问题，欢迎在下方留言，谢谢！