首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >带熊猫数据的滑块小部件

带熊猫数据的滑块小部件
EN

Stack Overflow用户
提问于 2019-07-22 22:44:35
回答 1查看 1.8K关注 0票数 4

我想用滑块小部件制作一个交互式的bokeh图。我有一个带有简单值的dataframe,并希望使用滑块小部件筛选出一些值。

下面是我的测试代码。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
df = pd.DataFrame({'x':[11,12,13,14,15],'y':[22,23,24,25,26],'threshold':[1,2,3,4,5]})

source = ColumnDataSource(data=df)

plot = Figure(plot_width=400, plot_height=400)
plot.circle('x', 'y', source=source)

slider = Slider(start=1, end=5, value=1, step=1, title="threshold")

callback = CustomJS(

    args=dict(source=source),

    code="""
            ??????
            ??????
            ??????
            ??????

            source.change.emit();
         """
)

slider.js_on_change('value', callback)

show(column(slider,plot))

所以,如果代码完成了,我可以像下面的图片那样过滤掉一些圆圈。

如果有人有好主意,请告诉我你的绝妙密码。谢谢

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-07-22 23:46:52

您可以通过循环遍历原始数据(从原始数据生成的字典)并检查圆的阈值是否小于或等于滑块阈值来筛选数据。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import pandas as pd
from bokeh.models import ColumnDataSource, CustomJS, Slider
from bokeh.plotting import figure, show, ColumnDataSource
from bokeh.layouts import column


df = pd.DataFrame({'x':[11,12,13,14,15],'y':[22,23,24,25,26],'threshold':[1,2,3,4,5]})
data = df.to_dict()

source = ColumnDataSource(data=df)

plot = figure(plot_width=400, plot_height=400)
plot.circle('x', 'y', source=source)

slider = Slider(start=1, end=5, value=1, step=1, title="threshold")

callback = CustomJS(

    args=dict(source=source, slider=slider, data=data),

    code="""
            var index = [];
            var x = [];
            var y = [];
            var thresh = [];
            for (var i = 0; i < Object.keys(data.threshold).length; i++) {
                if(slider.value <= data.threshold[i]) {
                    index.push(i);
                    x.push(data.x[i]);
                    y.push(data.y[i]);
                    thresh.push(data.threshold[i]);
                }
            }
            source.data.index = index;
            source.data.x = x;
            source.data.y = y;
            source.data.threshold = thresh;
            source.change.emit();
         """
)

slider.js_on_change('value', callback)

show(column(slider,plot))
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57158139

复制
相关文章
微信小程序滑块验证方法
如图: 滑块验证组件 puzzleVerify目录 index.wxml <!-- 滑动验证弹窗 --> <view class="slide_model" wx:if="{{slidebel}}"> <view class="slide_wrapper"> <!-- 拼图图片部分 --> <view class="canvas_img" id="canvas_img"> <!-- 背景图片 --> <canvas style="width: {{canvas_width}
江一铭
2022/06/17
1.7K0
微信小程序滑块验证方法
小程序开发基础-swiper 滑块视图容器
参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/
达达前端
2019/07/03
2K0
小程序开发基础-swiper 滑块视图容器
小程序左右标签滑块排行榜
效果: 效果 <view class="menu"> <view class="{{currentTab==0?'select':'default'}}" data-current="0" bin
达达前端
2019/07/03
6740
小程序左右标签滑块排行榜
微信小程序实现标签页滑块效果
微信小程序实现标签页滑块效果 image.png 案例一 小程序完整代码: wxml: <view class="swiper-tab"> <view class="swiper-tab-li
达达前端
2019/07/04
1.9K0
Python Java 滑块识别-通杀滑块「建议收藏」
在写爬虫的时候,经常会遇到滑块问题,很多次都想过尝试如何攻破滑块,但是每次都没成功,除了最开始的极验滑块,当时通过原图和滑块图的对比,能够得出缺口坐标,但是随着极验、网易、腾讯滑块的更新,已经不能够找到原图了,下面给出滑块通杀的解决方案。
全栈程序员站长
2022/11/07
2.3K0
Flutte部件目录-基本部件(一)
一个容器首先用padding包围子组件(由decoration中出现的所有边框填满),然后将附加constraints应用于填充范围(将width和height作为约束合并(如果其中任一个非空)。然后container被 margin描述的额外的空白空间包围。
南郭先生
2018/08/14
7.5K0
数据分析-大熊猫来了
答案当然不是!!!!今天我们学习的是一个python中用来用于数据分析,操作和可视化的全功能数据分析库pandas~~~先来学习如何读取表格数据文件使用pandas,接下来开始吧:
XXXX-user
2019/08/20
9890
数据分析-大熊猫来了
小程序中带图片modal的实现
前言:做小程序经常会遇到弹框提示,大家应该首选wx.showModal,标题、内容、button内容和颜色都可以自己定义,可以说是满足90%的dialog需求。但是,只支持文本内容,没办法插入图片素材。 先来看看wx.showModal的用法: wx.showModal({ title: '温馨提示', content: '提示内容。。。', confirmText: '确定', confirmColor: '#1677d2', cancelText: '取消', cancelCo
连胜
2018/03/07
3.4K0
小程序中带图片modal的实现
Flutter 流体滑块
在本文中,我们将**探讨Flutter中的Fluid Slider。**我们还将在flutter应用程序中使用flutter_fluid_slider包来实现流体滑块和属性的演示程序。
老孟Flutter
2021/05/11
11.7K0
Flutter 流体滑块
滑块混淆代码
顺带一提,大概花了一天半学的ast,掌握的没那么高级...抱着实现就行的心态...所以代码不够简洁,语法不够高级请见谅...
懒py夏洛
2022/06/02
1.3K0
滑块混淆代码
Xcelsius(水晶易表)系列2——单值部件
今天专门跟大家分享水晶易表中的一大类部件——单值部件。 单值部件使用频率很高,从它的名称就能猜个大概,它是用来表达单个指标的图表部件。 水晶易表中的单值部件大体上分为两类:输入型单值部件和输出型单值部件。 输入型的单值部件主要包含:滑块、进度条、刻度盘等,而输出型单值部件最典型的就是量表。 输入型的单值部件可以引用并识别excel中带公式的单元格,这样鼠标点击既可以实现动态控制。 量表的最大特色就是呈现简单易懂的指标数据效果,并且添加预警功能(警报)。 首先来看我们今天使用到的数据文件,是一家银行业的收
数据小磨坊
2018/04/11
1.5K0
Xcelsius(水晶易表)系列2——单值部件
微信小程序,一个滑块拼图游戏
一个微信小程序游戏,基于 pixi.js 和 JetLua/fish 微信小游戏适配库实现。滑动进行方块拼接
用户5997198
2022/03/28
1.8K0
微信小程序,一个滑块拼图游戏
AntUI滑块Sliders
浅色分页器 <style>.demo-swiper.swiper-container {    height: 150px;    overflow: hidden;    margin: 0 10px;    padding-top: 10px; }.demo-swiper .swiper-slide {    line-height: 140px;    text-align: center;    background: #108EE9;    color: #ffffff; }</style><di
爱知汇
2020/10/10
2.4K2
微信小程序bindtap的作用_小程序分享带参数
之前一直以为微信小程序按钮点击事件传参是和web端相同,即在事件中写明所传递的参数即可,但是这样尝试过以后发现小程序的控制台报错,报所写的bindtap中参数错误,之后百度发现,小程序按钮点击这类事件时一般的处理方法是指明元素所在的id,bindtap只是写明函数名,例如,bindtap=’setNumber’,而不是bindtap=’setNumber(1)’,在js中只要写function(e).通过e可以获取所传过来元素的所有信息。
全栈程序员站长
2022/08/03
4.5K0
微信小程序bindtap的作用_小程序分享带参数
Flutte部件目录-基本部件(三) 顶
要显示snackbar或持久底部表,请通过Scaffold.of获取当前BuildContext的ScaffoldState,然后使用ScaffoldState.showSnackBar和ScaffoldState.showBottomSheet函数。
南郭先生
2018/08/14
6.3K0
Flutte部件目录-基本部件(三)
                                                    顶
Flutte部件目录-基本部件(二) 顶
支持以下图像格式:JPEG,PNG,GIF,GIF动画,WebP,WebP动画,BMP和WBMP
南郭先生
2018/08/14
4.4K0
Flutte部件目录-基本部件(二)
                                                    顶
关于压力机设备的一些题
工作机构是将传动系统的旋转运动变换曾滑块的往复直线运动的部分。由曲柄、连杆、滑块、导轨等组成。
独元殇
2023/03/14
1.1K0
拖动滑块验证
效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>drag</title> <style> /
阿超
2022/08/21
3.3K0
拖动滑块验证
Xcelsius(水晶易表)系列3——深入了解单值部件
今天继续分享有关单值部件的使用技巧! 今天的小案例非常简单,是一组关于产品销售利润的计算。 给定进货成本、国税税金、零售定价、预计销售数量等,最后需要输出的指标是预计利润。 根据昨天的分享案例我们知道
数据小磨坊
2018/04/11
1.3K0
Xcelsius(水晶易表)系列3——深入了解单值部件
点击加载更多

相似问题

小滑块怎么去掉滑块号?

13

带滑块的

14

带串联列的熊猫数据

26

带N列的熊猫数据

11

带条件规则的熊猫数据

12
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文