data

LEENA4506

DesignPatterns.pptx

Home >English homework help >data

Design Patterns

Christian Behrens

https://www.behance.net/gallery/29576487/The-Form-of-Facts-and-Figures

Christopher Alexander

The term design patterns was originally coined about three decades ago by Christopher Alexander, an architect and critic who envisioned a generic and modular “language” of methods to describe the process of construction and urban planning by means of recurring problems that are well-known in a specific context, and respective solutions that have been proved and tested in the past and can therefore be seen as a safe choice to tackle a certain design challenge. Although it never made its breakthrough in the field of architecture, the basic idea of design patterns was adopted by other engineering disciplines, most notably software development in the early 1990s. A second wave of success seems to have appeared recently, when several projects were launched to build up pattern libraries for digital user interfaces. https://en.wikipedia.org/wiki/Christopher_Alexander

Design Patterns

Rejected by Architects, Adopted by Software Engineers,

…and the field of user interface design.

Although Alexander’s book became a bestseller and is a de-facto standard read for architecture students until today, it received much criticism and invoked sceptical reactions among the architecture community. Looking back at it some thirty years later, Alexander’s pattern language can be described as a success story on a detour. While widely rejected by architects and urban planners, the concept was picked up by computer scientist in the late 1980s and became a huge success in the wake of the rise of object-oriented programming languages such as Java

Design Patterns

Rejected by Architects, Adopted by Software Engineers,

…and the field of user interface design.

http://zurb.com/patterntap

http://patternry.com/

useful for the general description of common design problems, and provide solutions based on the relationships and behaviors of objects Companies and institutions that deal with interface design problems, have also launched own projects that aim at streamlining the development of new products and services by means of a comprehensive design pattern collection. Design Patterns can help to tackle commonly known recurring design problems with well-proven solutions. A single pattern provides a brief description of one particular design problem. This problem can be a physical attribute of an application (for instance a dropdown menu), or a functional behavior (e.g. the login dialog of a website). A pattern typically consists of a description of the problem, and a solution that has been proven before and is generally recognized. Usually, a pattern provides additional information like an example of a real-world scenario in which it has been successfully applied as well as a rationale to briefly describe the benefit the usage this patterns bears.

Discrete Quantities: Simple Bar Chart

Snapshot:

they do not display continuous developments over an interval of time

but measure the values of discrete data items.

Bar charts are used to visualize ab-solute magnitudes of data items.

They can theoretically consist only a single data item, but in most cases are used to additionally compare the quantitative value of several entities with each other.

Bar charts as a major group of standard display are distinguished charts from line charts and pie charts as they do not display continuous developments over an interval but measure the values of discrete data items.

Also, they display absolute numerical values rather than proportions.

Discrete Quantities: Simple Bar Chart

Speaking of snapshots- primary and election results are immediate, time stamped. Appropriate for simple bar charts

Proportions: Simple Pie Chart

https://eagereyes.org/techniques/pie-charts#comment-12674 https://datavizblog.com/2014/09/06/dataviz-squaring-the-pie-chart/

the basic premise: that the pie slices sum up to a meaningful whole. The pie represents some kind of whole, which is made up of the slices. What this means is that the pie chart first and foremost represents the size relationship between the parts and the entire thing.

Proportions: Simple Pie Chart

https://eagereyes.org/techniques/pie-charts#comment-12674 https://datavizblog.com/2014/09/06/dataviz-squaring-the-pie-chart/

Slices have to be mutually exclusive; by definition, they cannot overlap. The data therefore must not only sum up to a meaningful whole, but the values need to be categorized in such a way that they are not counted several times. A good indicator of something being wrong is when the percentages do not sum up to 100%, like in the infamous Fox News pie chart.

Proportions: Simple Pie Chart

https://eagereyes.org/techniques/pie-charts#comment-12674 https://datavizblog.com/2014/09/06/dataviz-squaring-the-pie-chart/

Do the parts make up a meaningful whole? If not, use a different chart. Only use a pie chart if you can define the entire set in a way that makes sense to the viewer.

Are the parts mutually exclusive? If there is overlap between the parts, use a different chart.

Do you want to compare the parts to each other or the parts to the whole? If the main purpose is to compare between the parts, use a different chart. The main purpose of the pie chart is to show part-whole relationships.

How many parts do you have? If there are more than five to seven, use a different chart. Pie charts with lots of slices (or slices of very different size) are hard to read.

Proportions: (not so) Simple Pie Chart

https://eagereyes.org/techniques/pie-charts#comment-12674 https://datavizblog.com/2014/09/06/dataviz-squaring-the-pie-chart/

How many parts do you have? If there are more than five to seven, use a different chart. Pie charts with lots of slices (or slices of very different size) are hard to read.

Proportions: Ring Pie Chart (donut Chart)

Ring charts are alone or ringing a pie chart.

Proportions: Waffle (Square Pie) Chart

An alternative to the round pie chart is the square pie or waffle chart. It consists of a square that is divided into 10×10 cells, making it possible to read values precisely down to a single percent. Depending on how the areas are laid out (as square as possible seems to be the best idea), it is very easy to compare parts to the whole.

Discrete quantities: Dot Matrix Chart

This use of a similar set of choices resembles the square pie chart/waffle chart.

It is not concerned with “the whole” like the forms of pie chart we have been looking at.

The dot matrix is a one-dimensional representation form for discrete quantitative data. Instead of merging the discrete values into a continuous representation such as a bar or pie chart, it retains the “countability” of the data by employing a series of proxy elements. The special view on quantifiable information the dot matrix offers to the user (he can literally count the amount of data displayed) is the result of a trade-off with the display’s accuracy. Thus, this representation pattern is only useful when an appropriate scale ratio is applied. how accurate the matrix display will be.

Discrete quantities: Dot Matrix Chart

Data Basis

Use the dot matrix for the display of discrete quantitative values. This means that since there are only “full” elements in a matrix, no fractions or floating-point numbers can be displayed. In case you use the dot matrix for variables with continuous values, you have to put up with an approximation of your data in the representation. The conversion factor of the matrix (the amount represented by a single element) basically determines how accurate the matrix display will be.

Discrete quantities: Simple Bar charts

Data Basis

Description

Bar charts are used to visualize absolute magnitudes of nominal data items. They can theoretically consist only a single data item, but in most cases are used to additionally compare the quantitative value of several entities with each other. Bar charts as a major group of standard display are distinguished charts from line charts and pie charts as they do not display continuous developments over an interval but measure the values of discrete data items. Also, they display absolute numerical values not proportions.

Discrete quantities: Simple Bar charts

Data Basis

Description

Usage

Create a Cartesian coordinate system. Divide and label the y-axis so that the magnitude of each item lies within the available scale. Separate the x-axis into regular segments, and attach to each of these segments one of the data items you want to display. For each data item, attach a vertical rectangle above the corresponding label on the x-axis and adjust its height according to the data value it represents.

Rationale

Bar charts are, besides line and pie charts the most common data visualization technique and find wide usage in popular statistics. They are useful to compare several quantitative entities of a common class. The substantial information provided by a bar chart is the relationship of several data items belonging to a common group or class in terms of magnitude.

Discrete quantities: Multiset bar charts

Description

The concept of multiset bar charts is based on the Simple Bar Chart pattern,

but additionally allows several datasets to be displayed within one diagram.

Thus, these diagrams let the user inspect and compare several sets of quantitative data

while occupying significantly less display space than a set of multiple conventional bar charts.

Data Basis

Use a multiset bar chart to display various datasets of quantitative data items within one diagram. Note that you can use several independent datasets, but that you have to make sure that each set contains the same nominal class of discrete items. APPLES TO APPLES

Discrete quantities: Multiset bar charts

Example

The publication Atlas der Gobalisierung (Atlas of Globalization) compares several countries by their spendings for military purposes and how the budget has developed from 1995 to 2005.

Usage

Create a Cartesian coordinate system. Identify those data items from different sets that belong to the same entity. Separate the x-axis into regular segments, and attach to each of these segments one of the data entities you want to display. For each data item belonging to a specific group, attach a vertical rectangle above the corresponding label on the x-axis and adjust its height according to the data value it represents. Visually separate the entity groups from each other and bundle their bars.

Rationale

Multiset bar charts allow the user to compare the magnitude of data items by two separate discrete parameters. It is often used to sub-divide discrete entities for further and more detailed exploration, like for instance the months in an unemployment chart that are divided into male and female figures.

Discrete quantities: Stacked bar charts

Description

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.

Data Basis

Use the stacked bar chart to display multiple sets of quantitative values.

The sets all share the same scaling, i.e. each set has the same number and types of values

(APPLES TO APPLES)

the single values of two different sets are directly comparable to each other.

Discrete quantities: Stacked bar charts

Usage

Create a Cartesian coordinate grid and draw the first series of datasets as in a stacked bar chart.

Apply the second series of patterns by creating

the respective rectangles and “stacking” them on top of their corresponding counterparts from the previous series.

Repeat with all subsequent datasets.

Rationale

Stacked bar charts let the user directly compare the total magnitude of several datasets within one diagram

while providing additional information about the composition of these sets from their single items.

The value of a whole dataset is the most important information to retrieve from this visualization

- the magnitude of single items can be read and interpreted,

but their precise evaluation is hampered because the segments of a bar do not share the same base.

Discrete quantities: Isometric bar charts

Description

Isometric bar charts use the perspective projection of visual elements to display several sets of quantitative data within the same diagram that would be overlapping in a conventional two-dimensional chart. In fact, they represent an alternative style of multiset bar charts - instead of breaking the different sets apart and placing groups of bars of the same variable next to each other, they allow the designer to keep the original structure of each subchart. Although the creation of a perspective structure is more complex than drawing a “flat” bar chart, the isometric view offers several advantages such as a small demand of display space (note that bars can partially overlap each other). However, the effect of complex graphics to attract the user’s attention always bears the danger of producing “chartjunk” instead of effective visualizations.

Data Basis

You have multiple datasets that consist, similarly to the Simple Bar Chart pattern, of quantitative data items. Note that you can use several independent datasets, but that you have to make sure that each set contains the same nominal class of descrete items.

Discrete quantities: Isometric bar charts

Usage

Create a three-dimensional cartesian coordinate system in isometric view. Assign the variables of your datasets to the axes - usually the x- or y-axis (which both represent the horizontal axes in the three-dimensional chart) holds the indentifier of the different datasets you want to display. The two remaining axes act as they would in a two-dimensional coordinate system displaying only one bar chart. The isometric perspective suggests that the different bar charts are placed behind each other.

Rationale

Isometric projections are easily interpreted by human perception as three-dimensional objects - as long as perspective and shading are not completely out of place. Hence, with relatively little effort they allow the designer to add a dimension to its graphics and therefore the possibility of displaying one more variable at a time. On the other hand the temptation of using perspective visualizations as “eye candy” is quite high, and in many cases an isometric chart looks very attractive indeed. However, the look of an infographic should never be the main reason for opting in favour of such a display technique.

Continuous quantities: Simple Line Charts

Line charts display the quantitative value of an observed object over a continuous interval. In most cases, this interval is a time span, and the graph describes how the object’s variable changes over this time interval. The line chart is a widely used diagram type, and due to its familiar structure easy to grasp. Besides the individual values themselves the most significant information that can be derived from it is the gradient of the curve, which provides information about the intensity of the attribute’s change over time. Also, minimum and maximum values can be easily identified from such a representation.

Continuous quantities: Simple Line Charts

William Playfair

In 1786, British entrepreneur William Playfair published a critical article on the spendings of the British government that saw an extraordinary increase during the time of the Spanish-American War and the American Civil War. To emphazise his arguments, he created a line chart displaying the soaring national debt of the British Empire during the 18th century [Tufte 2001].

Continuous quantities: Multiset Line Charts

0303 Multiset Line Chart

Description

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.

Data Basis

Use this type of diagram to display several quantitative variables and their development over a shared regular interval, for instance time. The variables you want to display may express different quantities, so that the y-axis might adopt more than one scale. But they all share the same reference variable, and here should lie within the same interval. If not, you have to choose appropriate interval boundaries to foster all variables you want to display.

Usage

Create a two-dimensional Cartesian coordinate system. Label and subdivide the x-axis according to the variable expressing the interval, while the y-axis carries the labels for those variables you want to display. If your dataset contains variables of different scale and unit, attach several scales to the y-axis, and make them clearly distinguishable. For each data item, draw a point at the corresponding locations in the coordinate pane. Connect points that belong to the same set with each other through a continuous line from left to right. The result of this process is a set of lines or curves that reflects an approximation of the dependent variables’ developments over the examined interval. The smaller the distance between two neighboring points, the higher the graph’s accuracy.

Continuous quantities: Stacked Area Charts

Description: An area chart displays the development of quantitative values over an interval. It resembles a line chart as it uses lines connecting data points with each other. The specific characteristic of the area chart is that the area below the line is filled with a certain color or texture. When more lines are added to the graphic, they are “stacked” on top of the previous line. This makes the area

Displaying Information: Continuous Quantities chart a preferred diagram type for displaying several data sets within the same chart with stress on a total magnitude several variables add to.

Required Data: Use stacked area charts for the display of sets of one or more quantitative values observed against a continuous interval, such as time. More than one value per dataset is possible (and even desirable for this type of display), but they should all be scaled identically. The crucial reason why you decide in favor of this display type (and against line charts) is that not only the magnitudes of the single variables count. Instead, the total amount the several variables contribute takes center stage.

Continuous quantities: SPARKLINES

Description

Sparklines are a miniaturized form of classic time series charts, like line or bar charts. The term sparklines was coined by Edward R. Tufte when he introduced them as “small, high-resolution graphics embedded in a context of words, numbers, images.” They are a visual tool to enhance written text that contains many references to numerical values, such as financial news articles or statistical reports. Note that sparklines are always used as a redundant feature: The intention of using them is not to replace written text, but to support the information it conveys by visual means.

Data Basis

Use sparklines to display time series, i.e. tables containing pairs of variates, with one variable scaled as a time interval to embed it as inline element in paragraph text or unobtrusive indicator within an application. Additionally, case-specific information about selected values from the dataset can be highlighted, for instance through small colored dots on the graph line that mark minimum and maximum values of the series.

Usage

Identify a text passage or similar source that discusses a quantitative value. Draw a line or bar chart of this data, crop the resulting graph from the coordinate grid, and scale it down to the height of the according text line or available space within your display. Insert the graph item at an appropriate position (i.e. close to the mention of the value), so that its connection with the text becomes clear. Sparklines can be applied to paragraph text but also to tables, where they occupy a separate cell in the same row as the corresponding numerical values.

Rationale

Sparklines are basically minimized versions of line charts displayed as micro-content within a larger application or paragraph, having the same height as the surrounding characters. Despite the minimal size, their origin (some of the most common traditional diagram forms) becomes quickly clear to the reader. As a sparkline does not contain any scales labels, its main intent is not to provide a highly detailed picture of a dataset. Instead, it provides the reader with valuable background information on the fact he is reading about without distracting his eye in the middle of the sentence.

Continuous quantities: SPARKLINES

Description

Data Basis

Usage

Rationale

Spatial configurations: Thematic Map

https://en.wikipedia.org/wiki/Choropleth_map

https://en.wikipedia.org/wiki/Thematic_map

Spatial configurations: Thematic Map choropleth Map

https://en.wikipedia.org/wiki/Choropleth_map

https://en.wikipedia.org/wiki/Thematic_map