D3:这种类型的图表和代码示例是否有名称?

pun*_*ess 1 bar-chart d3.js

我在几个地方看过这种条形图.这是来自LinkedIn.该页面相当复杂.

单击某个条形时,它会重新计算并重新排序其他列中的条形.在这里,点击了San Fran.

在d3中有这样的例子吗?

它有什么具体名称吗?

来自LinkedIn的示例

Gro*_*ify 6

通常,这称为分面搜索,它生成为可视化提供动力的数据.下面将介绍数据和可视化的两个部分,以及集成D3.js/ElasticSearch示例的一些链接.

数据:分面搜索/聚合

数据通过计算一组项目的构面来生成直方图.传统上,这是作为Lucene和ElasticSearch(基于Lucene构建)等全文搜索引擎中的分面搜索(高效)完成的.ElasticSearch现在调用此功能聚合.数据计算速度足够快,可以实时搜索.

在LinkedIn示例中,您将创建一个搜索索引,其中包含列出的字段.然后使用分面搜索,您可以轻松获得每个方面值的文档(人)数.在您的查询中,您还可以说您想要说出最受欢迎的x(10)值.

有关详细信息,请参阅以下链接.第一个更详细,而第二个和第三个更高级别.

  1. Lucene Faceted Search用户指南
  2. Facets上的ElasticSearch文档
  3. 关于聚合的ElasticSearch文档(新方法)

可视化:水平条形图

获得数据后,可视化结果是按最高计数排序和简单的水平条形图的组合,可以使用各种方法生成.以下链接直接使用D3.js或NVD3.js,它是用于制作通用图表的帮助程序库.要获得所需效果,您可能必须将点击链接到具有更新参数的新搜索.

  1. D3 JS简单水平条形图
  2. NVD3.js水平多条形图(使用单个系列)

综合实例

以下是使用D3.js和分面搜索/聚合的预构建集成的一些链接.

  1. 用于D3.Js的分​​面搜索的弹性列表
  2. 使用Elasticsearch聚合和D3进行数据可视化