http://www.infodesignpatterns.com en ../patterndetail.php?pattern=85 The sankey diagram visualizes complex systems of material or energy flows. It describes isolated systems by means of their input and output flows, and describes the proportional magnitudes of the single flows as they contribute to the entire system. The input portions of such a system are depicted as arrows leading into a main flow (usually flowing from left to right), while outputs are drawn as arrows leading away from the system. The proportional magnitude of each contribution is displayed through the width of the respective arrow. ../patterndetail.php?pattern=116 In some cases it is desirable that the user can not only select a certain point on an interval but inspect a whole range at once. For instance, instead of only looking at the events that occurred at a single day on a timeline, perhaps the data of a whole week or month are of interest for the user as well. To this end the double slider extends the single slider pattern and lets the user narrow down whole interval segments by moving two sliders along the interval line. ../patterndetail.php?pattern=83 A pie chart is a circular object divided into multiple polar segments. It displays the relative magnitude of several quantitative values compared to each other, or, in other words, the distribution of several values that belong to the same dataset. The full circle represents the total magnitude of this dataset, equal to 100 percent, while each segment stands for the magnitude of one particular variable. Segment area, arc length and arc angle of each segment are proportional to the value the segment represents. The segments of a pie chart are usually labeled with percentage numbers rather than total values (although they can feature both for the sake of understanding). ../patterndetail.php?pattern=71 A scatterplot displays correlations between two metric variables. It visually describes a two-column table with pairs of variates that doesn’t provide much meaningful information in the tabular form, especially when the underlying datasets become large. In a scatterplot chart, each pair of variates is represented by a dot in a two-dimensional Cartesian coordinate system. With a sufficient number of elements, it enables the viewer to identify certain development trends of the data and potentially even points to functional correlations between the observed variables. Also, exceptions from such functional rules become visible, like outliers. ../patterndetail.php?pattern=72 Bubble charts share certain similarities with scatterplots: They are drawn into a Cartesian coordinate system and provide information about the correlation between quantitative attributes as represented by the two coordinate axes. But in opposition to a scatterplot, the raw data of a bubble chart does not consist of an array of anonymous pairs of variates that only become meaningful in the context of a larger group of items. Instead, each dataset has a unique label assigned, usually a plain-text name to identify the corresponding object in the coordinate grid. In other words, the bubble chart is a method to display an array of objects with distinct features that all dataset members have in common. The other significant characteristic of the bubble chart that distinguishes it from the scatterplot, is the ability to display more than two different quantitative attributes in a two-dimensional coordinate system. Instead of simple dots, each item is displayed as a circle or bubble. While two numerical variables can be derived from its x- and y- coordinates in the representation, the remaining data attributes are displayed by the bubbles’ graphic features, including object size, fill color, brightness etc. Their choice depends on the format of the raw data. While quantitative values can be displayed by the position of the bubbles within the coordinate grid, object size or brightness, qualitative (or categorical) values are usually distinguished by the object’s fill color. These considerations are crucial to the correct use of the bubble chart and refer to Jacques Bertin’s theory of graphic variables. ../patterndetail.php?pattern=74 In most cases, a line chart is used to display the behavior of one single value over an interval. However, there are situations in which it is important to let the user directly compare several variables and their development over the same interval. Instead of drawing several charts next to each other with each one displaying one single graph, create a single coordinate system that fosters the requirements of each variable within the same system. The Multiple Line Chart pattern incorporates several simple line charts within the same coordinate base. ../patterndetail.php?pattern=101 When dealing with large sets of information that belong to different categories, or with multiple data sets within a single display, the user is often only interested in a subset of these data. However, he needs to see the entire data structure even if he is only focussing on a fraction of it because the subset’s location within or otherwise relation to the overall data structure is of crucial importance. For each use case of your application, designate a property to each data item, which labels it as active or passive. Distinguish between these two groups visibly, for instance by fading passive elements. In interactive systems, allow the user only to interact with active elements, while passive elements are visible but cannot be clicked, dragged etc. ../patterndetail.php?pattern=100 Too many information in one screen easily overload the available physical space as well as the user’s cognitive abilities. Separate your content by assigning it to different categories, and place it on different logical layers accordingly. Let the user decide which layers are visible or editable, and which are not. ../patterndetail.php?pattern=103 Traditional linear search methods often prove unsuitable for large sets of data, which applies particularly for multi-faceted information (data consisting of items that can be ordered by multiple criteria). Facet browsing helps the user to extract information from a multi-faceted database by letting him limit the range of results gradually as he determines search criteria step by step. Making selections over several criteria gradually limits the result span. The final result presented to him only encompasses the intersection of those criteria that were used. ../patterndetail.php?pattern=104 The standard process of a search query involves typing one or more keywords into a text input field, clicking a confirmation button and waiting for a system response. Although a common technique with widespread use, this search process can become time-consuming and quickly result in a frustrating user experience, especially when the user doesn’t exactly know what he is actually looking for, or how to describe the data he wants to retrieve properly. The dynamic query tackles this issue by responding to the user input “on the fly”, which means that the result field is updated each time the user enters a letter into a text field or makes a selection by clicking a checkbox or radio button. The possible result span is not limited gradually, but this technique also helps to point out spelling mistakes and impossible criteria combinations from the outset.