tooltip - Python Jupyter 中带有工具提示的交互式文字云

标签 tooltip visualization data-visualization jupyter vega

我有一个单词和短语列表以及每个单词和短语的分数和定义。 我想将其呈现为交互式文字云,其中文本大小由分数决定,定义在悬停时显示为工具提示。我更愿意在 Jupyter 中执行此操作。

我知道许多库提供了生成词云和/或工具提示的好方法。 如何将工具提示附加到词云中的单词上?。词云需要有一种方法来知道您将鼠标悬停在哪些文本上并触发相应的工具提示。到目前为止我还没有找到一种方法来做到这一点。

我对用于执行此操作的链接相当不可知。 我主要希望结果是相当高水平的并且主要是声明性的。 我看过 Vega、bqplot 和 Andreas Mueller 的 wordcloud 包。 Vega 具有文字云和工具提示功能,旨在很好地组合管道,但我不确定如何以正确的方式连接它们。我也更喜欢编写实际的 Python 代码,而不是使用 JSON 的代码,但这是一个小问题。 Bqplot 的提示功能非常好,但没有词云组件。 wordcloud 包生成漂亮的词云,但我不知道如何使它们具有交互性。

最佳答案

我使用 ipyvegabrunel 完成了此操作,brunel 更简单,但我不喜欢它的词云布局。

布鲁内尔

df = pd.DataFrame(data, columns=['word', 'size', 'text'])
%brunel cloud size(size) label(word) tooltip(text)

ipyvega

spec = {
  "$schema": "https://vega.github.io/schema/vega/v3.json",
  "name": "wordcloud",
  "width": width,
  "height": height,
  "padding": 0,
  "data" : [
      {
          'name' : 'table',
          'values' : [{'word': word, 'text': text, 'size': size}
                      for word, text size  in data]
      }
  ],
  "scales": [
    {
      "name": "color",
      "type": "ordinal",
      "range": ["#d5a928", "#652c90", "#939597"]
    }
  ],
  "marks": [
    {
      "type": "text",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "text": {"field": "word"},
          "align": {"value": "center"},
          "baseline": {"value": "alphabetic"},
          "fill": {"scale": "color", "field": "word"},
          "tooltip": {"field": "text", "type": "nominal"}
        },
        "update": {
          "fillOpacity": {"value": 1}
        },
      },
      "transform": [
        {
          "type": "wordcloud",
          "size": [width, height],
          "text": {"field": "text"},
          "font": "Helvetica Neue, Arial",
          "fontSize": {"field": "datum.size"},
        }
      ]
    }
  ],
}
Vega(spec)

关于tooltip - Python Jupyter 中带有工具提示的交互式文字云,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49090805/

相关文章:

visualization - 记录/可视化调用图的工具?

javascript - AngularJs 工具提示指令 - 添加样式

svn - 图形化代码分析

css - 禁用以下输入时如何删除工具提示

python - 使用plotly.express 的固定比例轴facetrow/facet_col

javascript - 负值不显示在分组条形图中

javascript - 如何使c3js中的轴刻度消失?

r - 填充线下曲线

c# - C#中的NotifyIcon.ShowBalloonTip可以自定义吗?

html - 居中子元素和工具提示,绝对定位,具有流体宽度,相对于较小尺寸的父元素