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=80 In a stacked bar chart, each bar represents a whole set quantitative data. A bar is then separated into segments so that each segment represents a single item of the corresponding set. Stacked bar charts are therefore an alternative representation for quantitative multiset data. ../patterndetail.php?pattern=86 “Threads” are mainly used in online communication systems such as email to describe a group of messages that relate to each other. When a person creates a message to which one or more other persons reply, all these messages form a thread as they relate to each other in respect of a common topic. Hence, a thread is a strictly ordinal structure, meaning that each element has is fixed place in a causal order. Thread arcs were first described as part of a research paper published for the experimental email client Remail. Its main intention is to give the user better control over the messages in his email folders by sorting them according to their affiliations with a specific thread. ../patterndetail.php?pattern=117 Drag and drop is sort of the mother of all digital interaction techniques. It simulates a simple but practical action that we perform countless times per day: Picking things up and move them to a different location. In interactive infographics, this ability can be useful as well when the graphic elements do not have necessarily fixed positions but can be moved around, e.g. to clear up the display space or to compare items by putting them next to each other. ../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=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=90 The Relation Circle suggests an alternative visual arrangement of interconnected elements, wherein the nodes of a network form a circle shape at equal distance. It actually covers various types of data structures that share the radial layout as the topmost order principle. Connections can occur between several nodes on the radial bondary as well as between nodes and locations within the area confined by the circle. Relation circles have become popular with the visualization of large interconnected structures as they are provided through APIs of social networks and online communities. Another popular application field are thematic maps covered with items that belong to a certain category. Here, the label and description of a geographic entity is separated from the location itself. ../patterndetail.php?pattern=88 A tree map is an alternative representation of a tree structure and was proposed by Ben Shneiderman the early 1990s. While a conventional family tree displays the single elements and their family relations to each other, it doesn’t provide any information about these elements’ quantitative properties. The tree map arranges its items according to their position within the hierarchy and displays the magnitude of each items through a visual property such as color or size. ../patterndetail.php?pattern=118 When you display data in the form of numerous items, such as maps or networks, the user often has an interest in a whole group of elements. Clicking on each item separately in order to inspect or manipulate them can quickly become a cumbersome task. A selection mask helps the user to select a whole range of graphic objects merely circumscribing them with the mouse pointer. It draws a (usually rectangular) dynamic shape from the point the user pressed the mouse cursor to the point it was released again. All elements overlapped by the resulting shape are marked as selected then.