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

前言

最近在实验室做的一个项目中，需要把大量的数据在 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 文件。效果如下：

右侧的工具栏是通过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)

结果如下：

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

4. 小结

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • django rest framework 数据的查找、过滤、排序的示例

    对于管理系统,常常需要展示列表数据,我们对于列表内的数据常常需要查找.过滤.排序等操作,其中查找等操作大部分是在后台进行的.django rest framework可以轻松的实现数据的查找.过滤等操作.接下来我们将以实际的例子进行介绍. 示例代码github地址: https://github.com/jinjidejuren/drf_learn 例如cmdb系统,作为资产管理系统常常需要对数据进行过滤或查找,获取期望的信息. 实现model 1.在这个示例项目中,需要实现对物理服务器的条件过

  • Django如何自定义model创建数据库索引的顺序

    首先这是一个先有鸡还是先有蛋的问题,大部分时候数据都来自excel的整理,当数据越来越多,需要分析的点也越来越多的时候,通过excel来管理显然有些吃力了. 这时候就需要将excel导入到数据库中,然而model创建的索引并非是我们编写时候的顺序,特别是当存在 models.ForeignKey 时,我们必须要先创建 ForeignKey的class,最后再创建总表. 为了保证数据库的索引跟excel的索引一致,我们需要对model中的索引字段做一系列的处理(可能这是一个野路子). 首先当然是先

  • django配置连接数据库及原生sql语句的使用方法

    前言 本文主要给大家介绍了关于django配置连接数据库及原生sql语句的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 Django配置连接数据库: 在操作数据库之前,首先先要连接数据库.这里我们以配置MySQL为例来讲解.Django连接数据库,不需要单独的创建一个连接对象.只需要在settings.py文件中做好数据库相关的配置就可以了. 示例代码如下: DATABASES = { 'default': { # 数据库引擎(是mysql还是oracle等) 'EN

  • 利用Django提供的ModelForm增删改数据的方法

    上一篇我们写了Django基于类如何增删改数据的方法,方法虽然简单,但新手可能对其原理不是很清楚,那么我们这次就用Django提供的ModelForm方法来实现增删改数据,这是一种基于现有模型的增删改方法. 一个简单的例子加以说明,前提是你已经具备Django创建项目应用的基本知识: 01.首先创建一个简单的模型,模型只有三个文本字段,标题 title , 内容 text , 添加日期 date_added ,如下: # models.py from django.db import model

  • django mysql数据库及图片上传接口详解

    django mysql数据库及图片上传接口详解

    前言 我们在 django-rest-framework解析请求参数 文章中完成了接口文档到参数解析, 一个完整的流程中还缺少对数据库的操作. 本篇内容为django连接数据库, 并编写一个image表用来存储图片路径, 编写图片上传接口和查看数据库中所有图片路径的接口. 前期准备 django操作图片需要安装一个三方库叫做,Pillow workon python35 pip install pillow pip install pymysql Pillow这个库可以对图片进行操作, 例如生成

  • django迁移数据库错误问题解决

    django.db.migrations.graph.NodeNotFoundError: Migration order.0002_auto_20181209_0031 dependencies reference nonexistent parent node ('user', '0001_initial') 删除所有的pyc文件,迁移文件 然后重新运行 python manage.py makemigrations django.db.utils.InternalError: (1060,

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

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

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

  • 基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解

    基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解

    Pyplot matplotlib.pyplot是一个命令型函数集合,它可以让我们像使用MATLAB一样使用matplotlib.pyplot中的每一个函数都会对画布图像作出相应的改变,如创建画布.在画布中创建一个绘图区.在绘图区上画几条线.给图像添加文字说明等.下面我们就通过实例代码来领略一下他的魅力. import matplotlib.pyplot as plt plt.plot([1,2,3,4]) plt.ylabel('some numbers') plt.show() 上图是我们通

  • python数据可视化 – 利用Bokeh和Bottle.py在网页上展示你的数据

    python数据可视化 – 利用Bokeh和Bottle.py在网页上展示你的数据

    目录 1. 文章重点和项目介绍 2. 数据集研究和图表准备 2.1 导入数据集 2.2 绘制图表 图表1:2019年上海,北京,深圳三地的每天AQI变化曲线 图表2:2019年上海,北京,深圳三地的每月平均AQI对比 图表3:2017年到2019年北京每月平均AQI对比 3. Bottle网页应用 3.1 文件夹结构 3.2 路由 3.3 模板实现 3.4 启动网页服务 4. 将Bokeh和Bottle集成在一起 4.1 模板修改 4.2 Python代码集成 5. 部署应用到Heroku 6.

  • Python 数据可视化之Bokeh详解

    Python 数据可视化之Bokeh详解

    目录 安装 散点图 折线图 条形图 交互式数据可视化 Interactive Legends 添加小部件 按钮 复选框 单选按钮 总结 安装 要安装此类型,请在终端中输入以下命令. pip install bokeh 散点图 散点图中散景可以使用绘图模块的散射()方法被绘制.这里分别传递 x 和 y 坐标. 例子: # 导入模块 from bokeh.plotting import figure, output_file, show from bokeh.palettes import magm

  • 使用 Django Highcharts 实现数据可视化过程解析

    使用 Django Highcharts 实现数据可视化过程解析

    概述 最近在一家公司实习,入职第一个大一点的需求是将公司开发的两个winstore app的排名信息进行可视化.大概挑选了下,排除了Flask和Echarts.最终选择使用Django和它的插件django-echarts来实现.文末有项目的完整代码,不想看的可以直接去下载,拆箱可用. 本篇博客主要用于记录整体的实现步骤,以及在实现过程中遇到的各个问题. 开发环境 本次搭建使用 Python 2.7.14,django 1.11.8,highcharts 4.0.1 直接命令行输入以下语句,即可

  • Java web数据可视化实现原理解析

    这周用java web制作了全国各个省份的疫情数据的可视化,做的是最基础的柱状图. 先导入 相应的echarts包和插件 <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 myChart.setOption({ title: { text: '全国各省确诊人数

  • 浅谈python可视化包Bokeh

    本文研究的主要是python可视化包Bokeh的相关内容,具体如下. 问题:需要把pandas的数据绘图并通过网页显示,matplotlib需要先保存图像,不合适. 解决:在网上搜了一下,找到一篇介绍文章 python可视化工具概述,其中介绍了几个python包,总结如下: Pandas对于简单绘图,可以随手用,但你需要学习定制matplotlib. Seaborn可以支持更多复杂的可视化方式,但仍然需要matplotlib知识,上色功能是个亮点. ggplot有很多功能,但还需要发展. bok

  • 利用Python代码实现数据可视化的5种方法详解

    利用Python代码实现数据可视化的5种方法详解

    前言 数据科学家并不逊色于艺术家.他们用数据可视化的方式绘画,试图展现数据内隐藏的模式或表达对数据的见解.更有趣的是,一旦接触到任何可视化的内容.数据时,人类会有更强烈的知觉.认知和交流. 数据可视化是数据科学家工作中的重要组成部分.在项目的早期阶段,你通常会进行探索性数据分析(Exploratory Data Analysis,EDA)以获取对数据的一些理解.创建可视化方法确实有助于使事情变得更加清晰易懂,特别是对于大型.高维数据集.在项目结束时,以清晰.简洁和引人注目的方式展现最终结果是非常

  • Python数据可视化常用4大绘图库原理详解

    今天我们就用一篇文章,带大家梳理matplotlib.seaborn.plotly.pyecharts的绘图原理,让大家学起来不再那么费劲! 1. matplotlib绘图原理 关于matplotlib更详细的绘图说明,大家可以参考下面这篇文章,相信你看了以后一定学得会. matplotlib绘图原理:http://suo.im/678FCo 1)绘图原理说明 通过我自己的学习和理解,我将matplotlib绘图原理高度总结为如下几步: 导库;创建figure画布对象;获取对应位置的axes坐标

  • Python实现交通数据可视化的示例代码

    目录 1.TransBigData简介 2.数据预处理 3.数据栅格化 4.订单起讫点OD提取与聚合集计 5.交互可视化 1.TransBigData简介 TransBigData是一个为交通时空大数据处理.分析和可视化而开发的Python包.TransBigData为处理常见的交通时空大数据(如出租车GPS数据.共享单车数据和公交车GPS数据等)提供了快速而简洁的方法.TransBigData为交通时空大数据分析的各个阶段提供了多种处理方法,代码简洁.高效.灵活.易用,可以用简洁的代码实现复杂

随机推荐