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调用windows api锁定计算机示例
Apr 17 Python
Python中获取对象信息的方法
Apr 27 Python
MySQL适配器PyMySQL详解
Sep 20 Python
Python3连接SQLServer、Oracle、MySql的方法
Jun 28 Python
Python中extend和append的区别讲解
Jan 24 Python
Python 实现数据结构中的的栈队列
May 16 Python
python如何使用socketserver模块实现并发聊天
Dec 14 Python
后端开发使用pycharm的技巧(推荐)
Mar 27 Python
python轮询机制控制led实例
May 03 Python
Autopep8的使用(python自动编排工具)
Mar 02 Python
解决Django transaction进行事务管理踩过的坑
Apr 24 Python
如何解决.cuda()加载用时很长的问题
May 24 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获取bing每日壁纸示例分享
2014/02/25 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
Ionic快速安装教程
2016/06/03 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
使用pm2自动化部署node项目的方法步骤
2019/01/28 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
深入了解Python在HDA中的应用
2019/09/05 Python
基于python实现从尾到头打印链表
2019/11/02 Python
python和js交互调用的方法
2020/06/23 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
2014厂务公开实施方案
2014/02/17 职场文书
募捐倡议书
2014/04/14 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
增值税发票丢失证明
2015/06/19 职场文书
亲戚关系证明
2015/06/24 职场文书
远程教育学习心得体会
2016/01/23 职场文书