Magical bar charts
Exploring combinatorial problems with an interactive bar chart

Design and implementation


  • Using the javascript library d3.js

  • IE sketch

    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.


  • Provide sufficient virtual area to trigger the display of the tooltip

  • IE sketch

    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.


  • Show descriptive name of item in the tooltip

  • IE sketch

    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.


  • Separate chart area from axis labels

  • IE sketch

    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.


  • Combining interactive exploration with algorithmic guidance

  • IE sketch

    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.


  • Resorting with staggered delay and translucency

  • IE sketch

    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.


  • Displaying OR selections

  • IE sketch

    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.


  • Displaying additional structure

  • IE sketch

    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.


  • More to find here

  • You can find more information about the implementation and design choices on github.