D3: Is there a name for this type of chart and code example?

Question

I've seen this kind of bar chart in a couple of places. This is from LinkedIn. The page is rather complicated.

When you click on a bar, it recalculates and reorders the bars in the other columns. Here, San Fran is clicked.

Is there an example of something like this in d3?

Is there any specific name for it?

Answer 1

In general, this is known as a faceted search which generates the data that powers the visualization. The two parts to this, the data and the visualization, are described below along with some links to integrated D3.js / ElasticSearch examples.

Data: Faceted Search / Aggregation

The data produces a histogram by counting facets across a set of items. Traditionally, this was done (efficiently) as a faceted search in a fulltext search engine like Lucene and ElasticSearch (built on Lucene). ElasticSearch now calls this capability aggregations. The data is calculated fast enough that it is done in real time for searches.

In the LinkedIn example, you would create a search index of people with fields like those listed. Then using a faceted search, you can easily get counts of documents (people) with each facet value. In your query, you can also say you want say the top x (10) most popular values.

For more info see the following links. The first is more detailed while the second and third are higher level.

1. Lucene Faceted Search User's Guide
2. ElasticSearch Documentation on Facets
3. ElasticSearch Documentation on Aggregations (new approach)

Visualization: Horizontal Bar Chart

Once you have the data, the visualization is a combination of sorting by highest count and a simple horizontal bar chart which can be generated using a variety of means. The following links use D3.js directly or NVD3.js which is a helper library for making common charts. To get the desired effect, you may have to link clicks to new searches with updated parameters.

1. D3 JS Simple Horizontal Bar chart
2. NVD3.js Horizontal Multi-Bar chart (use a single series)

Integrated Examples

Here are some links for pre-built integrations using D3.js and faceted search / aggregations.

1. Elastic List For Faceted Search Built In D3.Js
2. Data visualization with Elasticsearch aggregations and D3

Answer 2

Elastic List seems to be the closest answer.