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 相关文章推荐
解决pyqt中ui编译成窗体.py中文乱码的问题
Dec 23 Python
通过源码分析Python中的切片赋值
May 08 Python
Flask Web开发入门之文件上传(八)
Aug 17 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
Dec 07 Python
分析运行中的 Python 进程详细解析
Jun 22 Python
django中的图片验证码功能
Sep 18 Python
Python Pandas对缺失值的处理方法
Sep 27 Python
在python里使用await关键字来等另外一个协程的实例
May 04 Python
pytorch查看通道数 维数 尺寸大小方式
May 26 Python
python 如何快速复制序列
Sep 07 Python
OpenCV+python实现膨胀和腐蚀的示例
Dec 21 Python
Pyhton模块和包相关知识总结
May 12 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 mail to 配置详解
2014/01/16 PHP
PHP递归算法的简单实例
2019/02/28 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
js clearInterval()方法的定义和用法
2015/11/11 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
Python 解析XML文件
2009/04/15 Python
Python中的rjust()方法使用详解
2015/05/19 Python
python开发之thread实现布朗运动的方法
2015/11/11 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
python设置随机种子实例讲解
2019/09/12 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
护理不良事件检讨书
2014/02/06 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
骨干教师个人总结
2015/02/11 职场文书
铁人观后感
2015/06/16 职场文书
领导欢送会主持词
2015/07/06 职场文书
2015年学校办公室主任工作总结
2015/07/20 职场文书
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL
Vue中Object.assign清空数据报错的解决方案
2022/03/03 Vue.js