Django上使用数据可视化利器Bokeh解析


Posted in Python onJuly 31, 2019

前言

最近在实验室做的一个项目中,需要把大量的数据在 web 端进行可视化,需要绘制各类图表。数据都是以 csv 文件的形式保存在服务器中。本来是想使用 D3.js 这个数据可视化前端库来画图,但是需要编写大量的 js 代码。后来发现了 Bokeh 这个框架,只需要在后端编写及少量的 Python 代码生成对应的 html 与 js,再传送到前端让浏览器解析,大大的减少了工作量。

1. 波形图

这里绘制一个包含了数千个数据点的信号波形图,绘制方法和 Matlab 如出一辙。学习成本为零。

import pandas as pd
from bokeh.plotting import figure
from bokeh.io import output_file, show

csv_file = 'points.csv'
data = pd.read_csv(csv_file)
TOOLS = 'hover,crosshair,pan,wheel_zoom,box_zoom,reset,save,box_select'
picture = figure(width=1000, height=400, tools=TOOLS)
picture.line(data['order'], data['value'], color='blue', alpha=0.5)
output_file('waveform.html', title='waveform')
show(picture)

points.csv 中包含了 2048 个点。上面这段脚本是直接生成了一个 html 文件,show(picture)语句打开了这个 html 文件。效果如下:

Django上使用数据可视化利器Bokeh解析

右侧的工具栏是通过TOOLS = 'hover,crosshair,pan,wheel_zoom,box_zoom,reset,save,box_select'设置的。包含了常见的一些功能,包括缩放,保存,重置等等。由于简书的 markdown 不支持直接插入 div 块和 js 脚本,所以只能截取一个图放在这里,不能体验到右侧的工具栏的使用感受。

2. 集成到 Django 中

上面的例子是直接生成了一个 html 文件,但在正常的使用中,只应该生成对应的 div 和 js 就行了。
在 Django 的 view.py 中,定义一个 view。

def waveform(request):
  csv_file = 'your file'
  data = pd.read_csv(csv_file) 
  TOOLS = "hover,crosshair,pan,wheel_zoom,box_zoom,reset,save,box_select"
  picture = figure(width=1200, height=400, tools=TOOLS) 
  picture.line(data['order'], data['value'], color='blue', alpha=0.5)
  script, div = components(picture, CDN)
  return render(request, 'waveform.html', {'script': script, 'div': div})

这样就把对应的 template 的 waveform.html 中:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Experiment with Bokeh</title>
  <link href="{% static 'bokeh-0.12.4.min.css' %}" rel="stylesheet" type="text/css">
  <link href="{% static 'bokeh-widgets-0.12.4.min.css' %}" rel="stylesheet" type="text/css">
  <script src="{% static 'bokeh-0.12.4.min.js' %}"></script>
  <script src="{% static 'bokeh-widgets-0.12.4.min.js' %}"></script>
  {{ script |safe }}
</head>
<body>
{{ div |safe }}
</body>
</html>

这里有一个不太好的地方,把 script 放到了 head 里面。

然而要是放在底部。就不能正确画出图了。(求大神解答)

3. 时频图

在经过短时傅里叶变换输出的结果,可以用 image 来显示时频分布图。与 Matlab 画出来的也是如出一辙。

import numpy as np
import pandas as pd
from bokeh.io import output_file, show
from bokeh.plotting import figure
data = pd.read_csv('tf_stft.csv')
value = np.array(data['value'])
d = np.reshape(value, (338, 124))
d = np.transpose(d)
TOOLS = "hover,crosshair,pan,wheel_zoom,box_zoom,reset,save,box_select"
p = figure(x_range=(0, 62), y_range=(0, 169), tools=TOOLS)
p.image(image=[d], x=0, y=0, dw=62, dh=169, palette="Viridis256")
output_file("image.html", title="image.py example")
show(p)

结果如下:

Django上使用数据可视化利器Bokeh解析

如果是使用 D3.js 来绘制这个图形的话,就比较费劲了。

4. 小结

Bokeh 这个框架,比起 D3.js,它的可视化选项相对较少。因此,目前来看 Bokeh 无法挑战 D3.js 的霸主地位。而且 Bokeh 过于依赖 python 的数值计算库,并非一个纯前端的框架,使得它的使用范围也小于 D3.js。

而在纯 python 的数值计算领域,也已经有 matplotlib 这种提供了与 Matlab 一模一样的接口的数据可视化库,Bokeh 的适用场景也并不多。
但是,它非常适合嵌入 Flask 或者 Django 的程序中,非常好用,速度也很快。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
跟老齐学Python之print详解
Sep 28 Python
仅用500行Python代码实现一个英文解析器的教程
Apr 02 Python
Python下的常用下载安装工具pip的安装方法
Nov 13 Python
python中nan与inf转为特定数字方法示例
May 11 Python
python对配置文件.ini进行增删改查操作的方法示例
Jul 28 Python
Android分包MultiDex策略详解
Oct 30 Python
python之super的使用小结
Aug 13 Python
python快排算法详解
Mar 04 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
Sep 29 Python
Python模拟登录之滑块验证码的破解(实例代码)
Nov 18 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
Nov 13 Python
Python图像处理库PIL详细使用说明
Apr 06 Python
Flask框架单例模式实现方法详解
Jul 31 #Python
pycharm配置当鼠标悬停时快速提示方法参数
Jul 31 #Python
详细介绍Python进度条tqdm的使用
Jul 31 #Python
处理Selenium3+python3定位鼠标悬停才显示的元素
Jul 31 #Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
Jul 31 #Python
django解决订单并发问题【推荐】
Jul 31 #Python
python opencv将图片转为灰度图的方法示例
Jul 31 #Python
You might like
php分页函数
2006/07/08 PHP
劣质的PHP代码简化
2010/02/08 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
python多进程操作实例
2014/11/21 Python
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
Python lambda和Python def区别分析
2014/11/30 Python
Python三级菜单的实例
2017/09/13 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
Python实现word2Vec model过程解析
2019/12/16 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
python 发送get请求接口详解
2020/11/17 Python
联想台湾官网:Lenovo TW
2018/05/09 全球购物
应届生船舶驾驶求职信
2013/10/19 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
五年级下册复习计划
2015/01/19 职场文书
幼师辞职信范文
2015/02/27 职场文书
运动会广播稿300字
2015/08/19 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
新手必备Python开发环境搭建教程
2021/05/28 Python