Altair:更改滑块的位置

2023-12-06

是否可以更改滑块选择绑定的位置?

在 Altair 文档或 vega-lite 文档中找不到某些内容(https://vega.github.io/vega-lite/docs/bind.html).

我想将年份滑块向上移动,靠近主散点图:
https://vizsim.github.io/pkws_in_D/kba_neuzl_umwelt_fz14_v01.html

enter image description here


在 Altair/Vega-Lite 输出中调整滑块位置的唯一方法是使用 CSS。如果您直接输出 HTML,则可以将 CSS 添加到 HTML 文件中。如果您在 Jupyter 笔记本中显示 Altair 图表,则可以使用IPython.display module添加适当的 CSS。

例如,这里是美国人口随时间变化滑块移至右上角的图表:

from IPython.display import display, HTML

display(HTML("""
<style>
form.vega-bindings {
  position: absolute;
  right: 0px;
  top: 0px;
}
</style>
"""))

import altair as alt
from vega_datasets import data

source = data.population.url

pink_blue = alt.Scale(domain=('Male', 'Female'),
                      range=["steelblue", "salmon"])

slider = alt.binding_range(min=1900, max=2000, step=10)
select_year = alt.selection_single(name="year", fields=['year'],
                                   bind=slider, init={'year': 2000})

alt.Chart(source).mark_bar().encode(
    x=alt.X('sex:N', title=None),
    y=alt.Y('people:Q', scale=alt.Scale(domain=(0, 12000000))),
    color=alt.Color('sex:N', scale=pink_blue),
    column='age:O'
).properties(
    width=20
).add_selection(
    select_year
).transform_calculate(
    "sex", alt.expr.if_(alt.datum.sex == 1, "Male", "Female")
).transform_filter(
    select_year
).configure_facet(
    spacing=8
)

enter image description here

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Altair:更改滑块的位置 的相关文章

随机推荐

  • 无法将 NSTaggedPointerString 类型的值转换为 NSDictionary

    我正在尝试将 Firebase 值分配给我的结构 var productsArray Product 但是我有一个小错误 无法将 NSTaggedPointerString 类型的值转换为 NS字典 我知道我不能直接分配它们 所以这就是我这
  • NOT IN 不会产生与 NOT EXISTS 相同的结果

    这些都是相当基本的陈述 我有一个链接到另一个表中的项目的图形列表 我想检查有多少图形没有使用并且理论上可以删除 所以首先我使用了 NOT IN 子句 SELECT GraphicNr Graphicfile FROM dbo Graphic
  • 对哈希进行排序的最快方法是什么?

    人们经常问什么是best方式对哈希进行排序 但随后他们不会询问所需的后续问题 即什么是fastest方式 这确实决定了最好的方式 无论使用什么版本的 Ruby 在 Ruby 中对哈希进行排序的最快方法是什么 我正在寻找其他答案 以涵盖极端情
  • 从 Android 中 JSONString 中存储的 URL 加载 ImageView 中的图像

    我有一个JSON字符串 说出名称和 Url 我需要将名称提取到TextView并提取并显示图像ImageView 以下是上述场景的代码 public static final String JSON STRING WebImages Ima
  • 使用 VBA 动态创建 HTML 表格行

    我正在使用 VBA 在 Outlook 电子邮件中创建一个表 我已经弄清楚如何生成表 但我的问题是我需要动态调整表中的行数 对于某些电子邮件 将有两行数据 对于其他电子邮件 将有三行 依此类推 在下面的代码中rowstocontact is
  • setWebViewClient 与 setWebChromeClient 有什么区别?

    有什么区别setWebViewClient vs setWebChromeClient在安卓中 来自源代码 Instance of WebViewClient that is the client callback private vola
  • 当我的闪屏启动时出现 java.lang.UnsupportedOperationException

    当我的启动屏幕启动时 我在 logcat 中收到错误 11 06 02 36 45 450 E global 4184 Deprecated Thread methods are not supported 11 06 02 36 45 4
  • 简单的 Android 应用程序 - 在智能手机上运行时出现内存不足错误

    我对 Android Studio 相当陌生 我尝试制作一个简单的应用程序 单击按钮后应出现随机图像 下一个不可能是已经展示过的 我有两节课 MainActivity 和 RandomCardDraw 当我在 AVD 模拟器中运行该应用程序
  • JFreechart极坐标图形状注释

    我正在尝试用不同的颜色为极坐标图的不同区域着色 例如 为角度 20 和 60 之间以及半径 2 和 4 之间的区域着色 我怎样才能做到这一点 我正在考虑使用形状注释并从那里绘制弧线 但似乎极坐标图没有形状注释 有任何想法吗 谢谢 impor
  • PHP:最佳配置存储?

    我的应用程序通过大量键 值进行配置 例如 30 000 个 我想找到这些配置的最佳部署方法 因为我知道我想避免 DEFINE 以允许运行时重新配置 我想过 通过 php 文件将它们预编译成数组 将它们预编译到 tmpfs sqlite 数据
  • Access-Control-Allow-Origin 错误但请求通过

    我目前正在将一个基本 API 部署到我的实时服务器上 并且遇到了 我认为是 CORS 问题 但发生了一些我无法解释的行为 我正在从 AngularJS 前端与 Laravel 5 laravel cors 后端 我开始使用简单的 jQuer
  • 如何获取 Silverlight 应用程序中的客户端大小?

    我想获取运行 Silverlight 应用程序的浏览器窗口的大小 我尝试过以下几行 但它总是返回零 public Page InitializeComponent Initialize public void Initialize Worl
  • 删除前的模型回调

    我试图在使用级联模型删除这些图像的容器时删除图像 delete 级联工作正常 但我无法在删除后回调模型以正常工作 因此我可以在删除时删除实际的图像文件 function beforeDelete containerId this gt id
  • 开发一套依赖 R 包的最佳实践

    我开始研究一系列 R 包 所有这些包都共享大量公共代码 这些代码位于自己的包中 我们称之为myPackageUtilities 所以我有几个包 myPackage1 myPackage2 etc 所有这些包都依赖于中的每个方法myPacka
  • 过滤 pandas 中的数据框

    我有一个数据框如下 dic wteam 2 3 4 2 4 lteam 3 4 2 4 2 pd DataFrame dic lteam wteam 0 3 2 1 4 3 2 2 4 3 4 2 4 3 4 我需要一个新的数据框 其中有
  • 使用 write.table 将结果附加到 R 中的现有文件

    我对 R 中的文件进行了文本挖掘 然后将其作为新列附加到现有文件中 完成后 该列将添加到实际内容之后 我该如何纠正这个问题 结果如下 Customer Names T MAX INDUSTRIAL LTD T MAX INDUSTRIAL
  • 如何从 Powershell 运行此 Beyond Compare 脚本?

    目前我可以使用 Beyond Compare 脚本将结果输出到文件 你们都能够帮助我弄清楚如何通过 Powershell 检查结果文本文件中的差异 不过 我还有一个问题 为了将结果保存到文本文件中 Beyond Compare 让您使用基本
  • 如何在 Selenium (selenium-webdriver) JavaScript 中使用 Chrome 配置文件

    由于似乎没有办法使用现有的 Chrome 窗口 我如何在该窗口中使用用户的 Google 帐户 以及所有设置和密码 Selenium opens Selenium似乎为自己打开了窗口 但没有谷歌帐户 这是我的程序的重要组成部分 我的程序对时
  • 使用asyncio在django中执行周期性任务

    你认为可以使用asyncio在django中每n秒运行一个任务 这样主进程就不会被阻塞吗 例如 每 5 分钟在控制台中打印一次 例如 import asyncio from random import randint async def d
  • Altair:更改滑块的位置

    是否可以更改滑块选择绑定的位置 在 Altair 文档或 vega lite 文档中找不到某些内容 https vega github io vega lite docs bind html 我想将年份滑块向上移动 靠近主散点图 https