我在几个地方看过这种条形图.这是来自LinkedIn.该页面相当复杂.
单击某个条形时,它会重新计算并重新排序其他列中的条形.在这里,点击了San Fran.
在d3中有这样的例子吗?
它有什么具体名称吗?
通常,这称为分面搜索,它生成为可视化提供动力的数据.下面将介绍数据和可视化的两个部分,以及集成D3.js/ElasticSearch示例的一些链接.
数据:分面搜索/聚合
数据通过计算一组项目的构面来生成直方图.传统上,这是作为Lucene和ElasticSearch(基于Lucene构建)等全文搜索引擎中的分面搜索(高效)完成的.ElasticSearch现在调用此功能聚合.数据计算速度足够快,可以实时搜索.
在LinkedIn示例中,您将创建一个搜索索引,其中包含列出的字段.然后使用分面搜索,您可以轻松获得每个方面值的文档(人)数.在您的查询中,您还可以说您想要说出最受欢迎的x(10)值.
有关详细信息,请参阅以下链接.第一个更详细,而第二个和第三个更高级别.
可视化:水平条形图
获得数据后,可视化结果是按最高计数排序和简单的水平条形图的组合,可以使用各种方法生成.以下链接直接使用D3.js或NVD3.js,它是用于制作通用图表的帮助程序库.要获得所需效果,您可能必须将点击链接到具有更新参数的新搜索.
综合实例
以下是使用D3.js和分面搜索/聚合的预构建集成的一些链接.