Thanks to the excellent effort Mike Bostock has put in to create a visualization library which is open source, incredibly powerful and comes with so many examples and so much documentation, it just is the obvious choice for implementing modern visualizations.
If the tooltip appears just when the mouse pointer is hovering over the actual bar, it can be frustrating for the user to hit the area when the bar is small. Therefore, the actual tooltip area is the size of the bar with maximum height plus the area of the corresponding label under the x axis.
If an item name is quite long it can severely affect your bar chart! You can dynamically
compute the width of each bar based on the longest item name. However, then a single long item name
might totally destroy the aesthetics of your chart and in the worst case result in a prohibitively wide chart.
Not showing all labels significantly worsens the intuitive understanding, the same is true when
the label is cut off after some letters. Rotating the item names does not affect the bar width, but makes
the name difficult to read.
The approach implemented allows for providing two distinct names for each item. One (short) item
name which could follow a certain abbreviation standard is displayed under the x axis. The other item name
- the long (descriptive) name of the item - is shown in the tooltip.
Many prominent d3.js examples display the label of the y axis within the chart region of the bars. Item explorer keeps the labels outside of the axes.
Since the task of exploration typically takes place in a space too large to be explored manually,
it makes sense to facilitate an exploration process with the user and computer doing what they can do best.
While the computer runs powerful number crunching algorithms at mind boggling speed, it can detect
statistically valid patterns. However, given that not all knowledge is available to the computer,
it cannot decide which patterns are new or meaningful. On the other hand, the user brings in
domain knowledge which is not encoded in the data and together with the strong perceptual capabilities
forms ideas and hypotheses on the fly. Equipped with algorithmic guidance, the user can discover meaningful patterns
before the attention of the user is exceeded. This division of labour works best when the representation of the automatically computed results matches
the interactive capabilities provided by the visualization.
Item explorer offers the interactive selection of conditions by the user. At the same time, the algorithmic results
are shown in the exploration panel such that they can seamlessly be used as additional selection conditions.
This implementation of sorting is recommended by Heer & Robertson.
The implementation of this sorting technique in d3.js is shown on this site.
However, the transition of the bars and the label of the x axis is not synchronized and
can lead to a confusing transition.
Therefore, with the help of
the amazing stackoverflow community, the setup of the DOM is adjusted such that each bar and the corresponding
label under the x axis are grouped together. Grouping these objects which anyway have a one-to-one
relationship results in a smooth transition.
While item a AND item b selections and NOT item c selections are shown
in terms of a green or red rectangle around the corresponding label, the display of item d OR item e
is more tricky. One option would be to display a number under each item of the OR selection,
referring to the ID of the selection. E.g. if the first OR selection is item d OR item e OR item f, then
this OR selection would get the ID 1. Thus a 1 could be drawn under items d, e and f.
Instead, the chosen implementation connects the selected items by drawing arcs. For the example above, it would
draw an arc from item d to item e and one from item e to item f. However,
resorting means not just that the lengths of the arcs have to be recomputed and transitioned, it also means
that arcs might be deleted and new arcs might be drawn! E.g. if the resorting of the example leads to the order
item e, item f, item d, then the desired result should change the arcs to connect item e with item f
(update length and position of existing arc)
and item f with item d (new arc has be drawn!). Among many possible ways to transition the arcs, in item explorer the arcs are first shrunk to
0 and then expanded to the new length.
The items which are the basis for the exploration can come in many forms. Therefore, two different concept layers
are supported to embed existing structure into the visualization.
One concept is that subsets of items/products
can belong to a same group on a higher level of abstraction. E.g. item candy and item banana are both food
whereas item beer and item orange juice are drinks. This concept can be represented by choosing the
same color for corresponding bars.
The second concept is that different "items" can belong to different aspects.
E.g. the exploration space might contain both different products bought in a store as well as different payment methods.
These two dimensions can be specified which results in drawing distinct dimensions in separate bar charts and sorting is
applied separately. Both concepts can be provided with the data in the first line by using
column features.
You can find more information about the implementation and design choices on github.