Embed Size (px)
Citation preview
Data Label Position Von Jens Herrmann ([email protected] ) Ziel ist es die Regel UN 2.3 Unify the position of legends and labels (in Verbindung mit EX 1.1 Use appropriate chart types Grouped column charts) auszuarbeiten und einheitliche Positionierungs und Darstellungsregeln für Data Labels zu definieren, wie es bereits für andere Visualisierungselemente geschehen ist. Dadurch soll das Einheitliche „Look and Feel“ des IBCS gestärkt werden.
A standardized notation of legends and labels will improve legibility and speed up comprehension of charts, see Figure UN 2.3.
Status Quo In der aktuellen Version 1.1 gelten folgende Regeln zu Data Labels
1. Omit labels of small visualization elements, use labels with not more than three digits, and avoid unnecessary and distracting labels (see also the SIMPLIFY rules SI 5 “Avoid distracting details”).
2. Write labels horizontally for better legibility. 3. Position labels next to their visualization elements. If this is not possible, use lines
connecting the labels to the correct visualization elements. 4. In charts with horizontal category axes, position labels above or below the
visualization elements, see the first and second figure here on the left. In stacked columns, either center labels in the data points (if the data points are large enough) or position them outside of the data points.
5. In charts with two value axes, position labels next to the visualization elements (above or below, right or left), see figure on the left. Large bubble visualization elements labels can also have centered labels.
Die aktuelle Visualisierung hat das Problem, dass nur im Idealfall der Chart lesbar ist. In einem Chart mit AC und PY als Säulen und PL als Marker kann die Lesbarkeit schlecht sein wenn die Werte sehr weit auseinander liegen Werte und nur die AC Werte eingeblendet sind. Wenn jedoch bei allen Serien Data Labels für ihre Data Points eingeblendet werden kommt es zu Überschneidungen wenn die Werte sehr nah beieinander liegen. Es wird daher einheitliche genaue Regeln benötigt um diese Unschärfe zu bereinigen.
Vorschlag Punkt 4 soll erweitert werden um die Unterscheidung von single column/ bar charts und grouped column/bar charts. Single column/bar charts haben genau einen y-Wert (z Bsp. AC) pro x-Wert (Kategorie, Datum etc.) während grouped column/ bar charts bis zu 4 y-Werte pro x-Wert haben können. Bei letzteren Charts wird dann zwischen zwei Darstellungsmodi unterschieden, zwischen welche je nach Business Case gewählt werden kann.
1. Labels nur bei der ersten (AC) Series a. Wird verwendet wenn nur die Daten der ersten Serie wichtig sind und
die weiteren Serien lediglich unterstützend mit angegeben werden. 2. Labels bei allen Serien darstellen
a. Wird verwendet wenn die Data Labels von allen Szenarios betrachtet werden sollen und die Serien gleich wichtig sind.
Darstellungsregeln für Business Case 2 Für IBCS 1.2 sollten wir uns auf eine der Varianten einigen. Beide vorgestellte Varianten haben die gleichen Sichtbarkeitsregeln für die Labels Beide Varianten verwenden ein dynamisches Format für die Data Labels, welches sich nicht nach der Serie richtet sondern nach dem jeweiligen y-Wert in der x- Kategorie.
Variante 1 (für Labels bei allen Serien darstellen)
Sichtbarkeit
● Sekundär Label wird ausgeblendet wenn er +- 1ems vom Primär Label entfernt ist.
● Marker Label wird ausgeblendet wenn er sich innerhalb eines bar/ column befindet ● Marker Label wird ausgeblendet wenn er +- 1ems vom Primär Label entfernt ist.
Balken mit höheren y-Wert (primär)
Schrift Schwarz
Hintergrund Weiß 50% Deckkraft
Position Oberhalb des Data Points
Balken mit niedrigeren y-Wert (sekundär)
Schrift Weiß
Hintergrund Schwarz 50% Deckkraft
Position Innerhalb (Oben) des Data Points
Marker
Schrift Schwarz
Hintergrund Weiß 50% Deckkraft
Position Oberhalb des Data Points
Variante 2 Balken mit höheren y-Wert (primär)
Schrift Schwarz
Hintergrund Transparent
Position Oberhalb des Data Points
Balken mit niedrigeren y-Wert (sekundär)
Schrift Weiß
Hintergrund Transparent
Position Oberhalb des Data Points nach rechts verschoben
Marker
Schrift Schwarz
Hintergrund Transparent
Position Oberhalb des Data Points
Sichtbarkeit ● Sekundär Label wird ausgeblendet wenn er +- 1ems vom
Primär Label entfernt ist. ● Marker Label wird ausgeblendet wenn er sich innerhalb eines bar/ column befindet ● Marker Label wird ausgeblendet wenn er +- 1ems vom Primär Label entfernt ist.
Herleitung Die Herleitung zeigt die verschiedenen Varianten zur darstellung der Datalabels Und diesen lediglich zur Vollständigkeit
Zusammenfassung ● Einführung der Begriffe Single colum/bar chart und multi column/bar chart ● Einführung von 2 Modi für den Multi column/bar chat
a. Nur 1 Serie hat Data Label b. Möglichst alle Serien haben Data Labels
● Standardisierung des Labels Formates, der Position und Sichtbarkeitsregeln.
Intervall Grenzen Von Jens Herrmann ([email protected] ) In einigen Templates zu Timelines wird bereits dieses Element verwendet jedoch ist die Verwendung nicht klar definiert. Es kann ein Marker verwendet werden um das Ende und oder den Anfang des Chart Intervalls zu Markieren, wenn dieser nicht auf einem Tick der Zeitachse (x-Achse) liegen. Dies setzt voraus, dass zwischen den Ticks weitere Datenpunkte liegen. Die Verwendung der Marker führt zu einer besseren Lesbarkeit trotz der ggf. bestehenden Redundanz zum Titel.
Status Quo Im Moment sind keine genauen Spezifikationen in der Version 1.1 zu finden
Vorschlag
Eine optionale Markerline (gestrichelt) in der Farbe der Gridline mit einem Datums Label für den Start bzw. Ende des Intervalles.
Ink to Data Ratio Gridlines Von Jens Herrmann ([email protected] ), Hu, Yuan-Chun ([email protected] ) Einführung von weißen Grid Lines bei Balken Charts mit hoher Datendichte um die Lesbarkeit und die Ink to Data ratio zu verbessern.
Status Quo Im Moment ist. Im standard 1.1 diese Darstellungsform nicht behandelt, es gibt auch noch keine Template die eine solche Darstellung verwendet
Vorschlag In Situationen in der viele ggf. schmale Säule oder Balken in einem Cart oder in Multiples dargestellt werden und das verwenden von Data Labels daher nicht möglich ist ohne die Lesbarkeit zu beeinträchtigen, kann alternativ eine y-Achse verwendet werden mit Weißen Grid Lines die oberhalb der Balken dargestellt wird. Es wird damit ein ähnlicher Effekt verfolgt wie mit den weißen Linien in den Tabellen) verwendet. Die Ink to Data Ration wir verbessert und die Lesbarkeit dadurch erhöht.
Herleitung Die Darstellung wurde in einer Dokumentation und einem Blog über Informatio Design entdeckt (Link: )
Data Label Position By Jens Herrmann ([email protected]) The goal is the rule UN 2.3 Unify the position of legends and labels (in conjunction with EX 1.1 Use appropriate chart types Grouped column charts) and define uniform positioning and display rules for data labels, as has already been done for other visualization elements. The aim is to strengthen the uniform look and feel of the IBCS.
A standardized notation of legends and labels will improve legibility and speed up comprehension of charts, see Figure UN 2.3.
Status quo In the current version 1.1 the following rules apply to data labels
1. Omit labels of small visualization elements, use labels with not more than three digits, and avoid unnecessary and distracting labels (see also the SIMPLIFY rules SI 5 “Avoid distracting details”).
2. Write labels horizontally for better legibility. 3. Position labels next to their visualization elements. If this is not possible, use lines
connecting the labels to the correct visualization elements. 4. In charts with horizontal category axes, position labels above or below the
visualization elements, see the first and second figure here on the left. In stacked columns, either center labels in the data points (if the data points are large enough) or position them outside of the data points.
5. In charts with two value axes, position labels next to the visualization elements (above or below, right or left), see figure on the left. Large bubble visualization elements labels can also have centered labels.
The current visualization has the problem that the chart can only be read in the ideal case. In a chart with AC and PY as columns and PL as markers the readability can be poor if the values are very far apart values and only the AC values are displayed. However, if data labels for all series are displayed for their data points, there is an overlap if the values are very close together. Therefore, uniform, precise rules are required to correct this blurring.
Proposition Point 4 is to be extended to distinguish between single column/bar charts and grouped column/bar charts. Single column/bar charts have exactly one y value (e.g. AC) per x value (category, date etc.) while grouped column/bar charts can have up to 4 y values per x value. In the latter charts, a distinction is then made between two display modes, which can be selected depending on the business case.
1. Labels only for the first (AC) Series a. Used when only the data of the first series are important and the other series
are only indicated in a supporting way. 2. Display labels for all series
a. Used when the data labels are to be viewed from all scenarios and the series are equally important.
Display rules for business case 2 For IBCS 1.2 we should agree on one of the variants. Both variants presented have the same visibility rules for the labels. Both variants use a dynamic format for the data labels, which does not depend on the series but on the respective y value in the x category.
Variant 1 (for labels for all series)
Visibility
● Secondary label is hidden when it is +- 1ems from the Primary label is removed.
● Marker label is hidden if it is inside a bar/ column ● Marker Label disappears when +- 1ems is removed from the primary label.
Bar with higher y-value (primary)
script black
background white, 50% opacity
location above the data point
Bar with lower y-value (secondary)
script white
background black, 50% opacity
location inside (at the top) of the data point
Markers
script black
background white 50% opacity
location above the data point
Variation 2 Bar with higher y-value (primary)
script black
background transparent
location above the data point
Bar with lower y-value (secondary)
script white
background transparent
location oved to the right above the data point
Markers
script black
background transparent
location above the data point
Visibility
● Secondary label is hidden when it is +- 1ems from the Primary label is removed.
● Marker label is hidden if it is inside a bar/ column ● Marker Label disappears when +- 1ems is removed from the primary label.
Derivation The derivation shows the different variants for the representation of the data labels. And this only for the sake of completeness
Recap ● Introduction of the terms single column/bar chart and multi column/bar chart ● Introduction of 2 modes for the multi column/bar chart
1. Only 1 series has data label 2. As many series as possible have data labels
● Standardization of label format, position and visibility rules.
Interval Limits By Jens Herrmann ([email protected] ) This element is already used in some templates for timelines, but its use is not clearly defined. A marker can be used to mark the end and or the beginning of the chart interval, if it is not on a tick of the time axis (x-axis). This requires that there are additional data points between the ticks. The use of markers leads to a better readability despite the possible redundancy to the title.
Status quo Currently no exact specifications can be found in version 1.1
Proposition
An optional marker line (dashed) in the color of the grid line (grey)with a date label for the start or end of the interval.
Ink to Data Ratio Gridlines By Jens Herrmann ([email protected] ), Hu, Yuan-Chun ([email protected] ) Introduction of white grid lines for high-density bar charts to improve readability and ink to data ratio.
Status quo Right now is. The standard 1.1 does not deal with this display format, there is also not yet a template that uses such a display format.
Proposition In situations where many possibly narrow columns or bars are displayed in a cart or in multiples and the use of data labels is therefore not possible without impairing readability, a y-axis can alternatively be used with white grid lines that is displayed above the bars. A similar effect is used as with the white lines in the tables). Ink to data ration is improved and readability increased.
Derivation The presentation was discovered in a documentation and a blog about information design (Link: )
