Difference between revisions of "Slicer4:2012 GenericChartColors"

From Slicer Wiki
Jump to: navigation, search
 
(34 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
__NOTOC__
+
[[Slicer3:LUTs_and_Ontologies|Back to LUT and ontologies page]]
−
 
 
−
[[Slicer3:LUTs_and_Ontologies|Back to LUT and ontologies page]]
 
  
 
[[Image:Screen Shot 2012-02-09 at 10.11.08 AM.png|right|thumb|300px|Charting was introduced to Slicer 4 in February of 2012]]
 
[[Image:Screen Shot 2012-02-09 at 10.11.08 AM.png|right|thumb|300px|Charting was introduced to Slicer 4 in February of 2012]]
 
=Introduction=
 
=Introduction=
−
Chart colors will be either derived from the generic LUT below, or, where appropriate, will be taken from the LUT used for the input data.
+
Color can be a powerful tool in conveying information in a chart.  There are several papers on choosing colors for displaying data by Maureen Stone and by Stephen Few as well as the excellent site by Cynthia Brewer ([http://colorbrewer2.org/ Color Brewer]) which convey a few guidelines. 
 +
 
 +
* For categorical data, where color can be used to convey grouping, colors should be of uniform intensity and distributed in hue.
 +
* For quantitative data, where color can be used to convey ordering or magnitude, colors should be from a single hue while ranging in intensity with light colors depicting low values and dark bright colors depicting high values.
 +
* Don't use color indiscriminately. Use color to convey information.
 +
 
 +
Slicer4 introduced general Charting capabilities in 2012. Slicer4 Charting supports line, bar, and scatter charts.  Chart colors can be assigned in a variety of manners.
 +
 
 +
# Colors can be assigned automatically to each series in a chart using a default lookup table which varies in hue.
 +
# Colors can be assigned to each series by providing a custom selection for the lookup table.
 +
# Colors can be assigned to each series by specifying a color to use for the series.
 +
# Colors can be assigned to individual bars in a bar chart by assigning a lookup table to a specific series.  While this contradicts some of the recommendations from above, it allows measures derived from specific tissues or pathologies to be visually associated with the label maps used to color those tissues or pathologies in Slicer's 2D Viewers and 3D Viewers. For instance, this approach is used in the Label Statistics Module.
  
 
=Notes=
 
=Notes=
Line 17: Line 26:
  
  
−
==Lookup table==
+
=Categorical Data=
−
 
+
The following lookup tables are useful for categorical data where you want the color to convey the grouping of the data.
−
This color table uses approximately equal steps in hue to define a color pallet that allows each color to be distinguish and visually pleasing. Based on the papers by Maureen Stone "Expert Color Choices for Presenting Data" and "Choosing Colors for Data Visualization".
 
−
 
 
−
{| class="wikitable sortable labelpage labelpagetable" border="1"
 
−
! integer_label
 
−
! text_label
 
−
! color
 
−
! notes
 
−
|-
 
−
|0
 
−
|Series 1
 
−
|style="background: #d4252b; color:white"|#d4252b
 
−
|#d4252b
 
−
|-
 
−
|1
 
−
|Series 2
 
−
|style="background: #0065af; color:white"|#0065af
 
−
|#0065af
 
−
|-
 
−
|2
 
−
|Series 3
 
−
|style="background:#e6dc46"|#e6dc46
 
−
|#e6dc46
 
−
|-
 
−
|3
 
−
|Series 4
 
−
|style="background:#8c3186; color:white"|#8c3186
 
−
|#8c3186
 
−
|-
 
−
|4
 
−
|Series 5
 
−
|style="background:#339e33; color:white"|#339e33
 
−
|#339e33
 
−
|-
 
−
|5
 
−
|Series 6
 
−
|style="background:#fe7d20; color:white"|#fe7d20
 
−
|#fe7d20
 
−
|-
 
−
|6
 
−
|Series 7
 
−
|style="background:#27b7b2; color:white"|#27b7b2
 
−
|#27b7b2
 
−
|-
 
−
|7
 
−
|Series 8
 
−
|style="background:#3a3a8c; color:white"|#3a3a8c
 
−
|#3a3a8c
 
−
|-
 
−
|}
 
  
−
==Dark Bright Lookup table==
+
==Dark Bright Lookup Table==
  
−
Palette designed by Stephen Few in "Practical Rules for Using Colors in Charts". Similar to the Maureen Stone palette. Stephen Few recommends this palette for highlighting data. This palette is useful when display small points or thin lines.
+
This LUT is now the default lookup table for charts. Palette designed by Stephen Few in "Practical Rules for Using Colors in Charts". Similar to the Maureen Stone palette. Stephen Few recommends this palette for highlighting data. This palette is useful when display '''small points''' or '''thin lines'''. Again, this palette is good for categorical data.
  
 
{| class="wikitable sortable labelpage labelpagetable" border="1"
 
{| class="wikitable sortable labelpage labelpagetable" border="1"
Line 121: Line 81:
 
|}
 
|}
  
−
==Medium Lookup table==
+
==Medium Lookup Table==
 +
 
 +
Another Stephen Few palette. Similar to the Dark Bright color but in the medium range of intensity. May be a better choice for '''bar charts'''.
  
 
{| class="wikitable sortable labelpage labelpagetable" border="1"
 
{| class="wikitable sortable labelpage labelpagetable" border="1"
Line 171: Line 133:
 
|}
 
|}
  
−
==Light Pale Lookup table==
+
==Light Pale Lookup Table==
 +
 
 +
A light pale palette from Stephen Few.
  
 
{| class="wikitable sortable labelpage labelpagetable" border="1"
 
{| class="wikitable sortable labelpage labelpagetable" border="1"
Line 181: Line 145:
 
|0
 
|0
 
|Series 1
 
|Series 1
−
|style="background: #f1afae; color:white"|#ef5962
+
|style="background: #f1afae; color:white"|#f1afae
−
|#ef5962
+
|#f1afae
 
|-
 
|-
 
|1
 
|1
 
|Series 2
 
|Series 2
−
|style="background: #dae3ac; color:white"|#7dc16d
+
|style="background: #dae3ac; color:white"|#dae3ac
−
|#7dc16d
+
|#dae3ac
 
|-
 
|-
 
|2
 
|2
 
|Series 3
 
|Series 3
−
|style="background:#b8d3eb; color:white"|#5a9dd2
+
|style="background:#b8d3eb; color:white"|#b8d3eb
−
|#5a9dd2
+
|#b8d3eb
 
|-
 
|-
 
|3
 
|3
 
|Series 4
 
|Series 4
−
|style="background:#f3d0b1; color:white"|#f9a560
+
|style="background:#f3d0b1; color:white"|#f3d0b1
−
|#f9a560
+
|#f3d0b1
 
|-
 
|-
 
|4
 
|4
 
|Series 5
 
|Series 5
−
|style="background:#d4b3d3; color:white"|#9d69aa
+
|style="background:#d4b3d3; color:white"|#d4b3d3
−
|#9d69aa
+
|#d4b3d3
 
|-
 
|-
 
|5
 
|5
 
|Series 6
 
|Series 6
−
|style="background:#ddb9aa; color:white"|#cd6f5a
+
|style="background:#ddb9aa; color:white"|#ddb9aa
−
|#cd6f5a
+
|#ddb9aa
 
|-
 
|-
 
|6
 
|6
 
|Series 7
 
|Series 7
−
|style="background:#eac1da; color:white"|#d680b3
+
|style="background:#eac1da; color:white"|#eac1da
−
|#d680b3
+
|#eac1da
 
|-
 
|-
 
|7
 
|7
 
|Series 8
 
|Series 8
−
|style="background:#cccccc; color:white"|#737373
+
|style="background:#cccccc; color:white"|#cccccc
−
|#737373
+
|#cccccc
 
|-
 
|-
 
|}
 
|}
  
−
==Green Sequential Lookup table==
+
 
 +
 
 +
==Lookup Table with equal steps in Hue==
 +
 
 +
This color table uses approximately equal steps in hue to define a color palette that allows each color to be distinguish and visually pleasing. Based on the papers by Maureen Stone "Expert Color Choices for Presenting Data" and "Choosing Colors for Data Visualization". This palette is good for categorical data.
 +
 
 +
This lookup table is no longer used in Slicer4 (GenericChartColors.txt). The default lookup table for charts is now [[#Dark_Bright_Lookup_Table|DARK BRIGHT LOOKUP TABLE]].
  
 
{| class="wikitable sortable labelpage labelpagetable" border="1"
 
{| class="wikitable sortable labelpage labelpagetable" border="1"
Line 231: Line 201:
 
|0
 
|0
 
|Series 1
 
|Series 1
−
|style="background: #085a32; color:white"|#085a32
+
|style="background: #d4252b; color:white"|#d4252b
−
|#085a32
+
|#d4252b
 
|-
 
|-
 
|1
 
|1
 
|Series 2
 
|Series 2
−
|style="background: #118649; color:white"|#118649
+
|style="background: #0065af; color:white"|#0065af
−
|#118649
+
|#0065af
 
|-
 
|-
 
|2
 
|2
 
|Series 3
 
|Series 3
−
|style="background:#18a85a; color:white"|#18a85a
+
|style="background:#e6dc46"|#e6dc46
−
|#18a85a
+
|#e6dc46
 
|-
 
|-
 
|3
 
|3
 
|Series 4
 
|Series 4
−
|style="background:#52b974; color:white"|#52b974
+
|style="background:#8c3186; color:white"|#8c3186
−
|#52b974
+
|#8c3186
 
|-
 
|-
 
|4
 
|4
 
|Series 5
 
|Series 5
−
|style="background:#9ecf8a; color:white"|#9ecf8a
+
|style="background:#339e33; color:white"|#339e33
−
|#9ecf8a
+
|#339e33
 
|-
 
|-
 
|5
 
|5
 
|Series 6
 
|Series 6
−
|style="background:#d2e3a2; color:white"|#d2e3a2
+
|style="background:#fe7d20; color:white"|#fe7d20
−
|#d2e3a2
+
|#fe7d20
 
|-
 
|-
 
|6
 
|6
 
|Series 7
 
|Series 7
−
|style="background:#f0f1ba; color:white"|#f0f1ba
+
|style="background:#27b7b2; color:white"|#27b7b2
−
|#f0f1ba
+
|#27b7b2
 
|-
 
|-
 
|7
 
|7
 
|Series 8
 
|Series 8
 +
|style="background:#3a3a8c; color:white"|#3a3a8c
 +
|#3a3a8c
 +
|-
 +
|}
 +
 +
=Quantitative Data=
 +
The following color tables are suitable for quantitative or '''sequential data''' where you want the colors to convey an order.
 +
 +
==Green Sequential Lookup Table==
 +
 +
A palette from Stephen Few that follows Cynthia Brewer's (of [http://colorbrewer2,org Color Brew]) recommendations for sequential data. This palette is used to encoding quantitative differences with pale colors for low values and darker and brighter colors for high values.
 +
 +
{| class="wikitable sortable labelpage labelpagetable" border="1"
 +
! integer_label
 +
! text_label
 +
! color
 +
! notes
 +
|-
 +
|0
 +
|Low
 
|style="background:#f7f8e5; color:white"|#f7f8e5
 
|style="background:#f7f8e5; color:white"|#f7f8e5
 
|#f7f8e5
 
|#f7f8e5
 +
|-
 +
|1
 +
|
 +
|style="background:#f0f1ba; color:white"|#f0f1ba
 +
|#f0f1ba
 +
|-
 +
|2
 +
|
 +
|style="background:#d2e3a2; color:white"|#d2e3a2
 +
|#d2e3a2
 +
|-
 +
|3
 +
|
 +
|style="background:#9ecf8a; color:white"|#9ecf8a
 +
|#9ecf8a
 +
|-
 +
|4
 +
|
 +
|style="background:#52b974; color:white"|#52b974
 +
|#52b974
 +
|-
 +
|5
 +
|
 +
|style="background:#18a85a; color:white"|#18a85a
 +
|#18a85a
 +
|-
 +
|6
 +
|
 +
|style="background: #118649; color:white"|#118649
 +
|#118649
 +
|-
 +
|7
 +
|High
 +
|style="background: #085a32; color:white"|#085a32
 +
|#085a32
 
|-
 
|-
 
|}
 
|}
  
−
==Red Sequential Lookup table==
+
==Red Sequential Lookup Table==
 +
 
 +
Another sequential palette. This palette is used to encoding quantitative differences with pale colors for low values and darker and brighter colors for high values.
  
 
{| class="wikitable sortable labelpage labelpagetable" border="1"
 
{| class="wikitable sortable labelpage labelpagetable" border="1"
Line 280: Line 307:
 
|-
 
|-
 
|0
 
|0
−
|Series 1
+
|Low
−
|style="background: #a02b24; color:white"|#a02b24
+
|style="background:#f7fbe5; color:white"|#f7fbe5
−
|#a02b24
+
|#f7fbe5
 
|-
 
|-
 
|1
 
|1
−
|Series 2
+
|
−
|style="background: #e64b2a; color:white"|#e64b2a
+
|style="background:#f6f4be; color:white"|#f6f4be
−
|#e64b2a
+
|#f6f4be
 
|-
 
|-
 
|2
 
|2
−
|Series 3
+
|
−
|style="background:#f26f2b; color:white"|#f26f2b
+
|style="background:#ffe191; color:white"|#ffe191
−
|#f26f2b
+
|#ffe191
 
|-
 
|-
 
|3
 
|3
−
|Series 4
+
|
 +
|style="background:#fec04f; color:white"|#fec04f
 +
|#fec04f
 +
|-
 +
|4
 +
|
 
|style="background:#f79533; color:white"|#f79533
 
|style="background:#f79533; color:white"|#f79533
 
|#f79533
 
|#f79533
−
|-
 
−
|4
 
−
|Series 5
 
−
|style="background:#fec04f; color:white"|#fec04f
 
−
|#fec04f
 
 
|-
 
|-
 
|5
 
|5
−
|Series 6
+
|
−
|style="background:#ffe191; color:white"|#ffe191
+
|style="background:#f26f2b; color:white"|#f26f2b
−
|#ffe191
+
|#f26f2b
 
|-
 
|-
 
|6
 
|6
−
|Series 7
+
|
−
|style="background:#f6f4be; color:white"|#f6f4be
+
|style="background: #e64b2a; color:white"|#e64b2a
−
|#f6f4be
+
|#e64b2a
 
|-
 
|-
 
|7
 
|7
−
|Series 8
+
|High
−
|style="background:#f7fbe5; color:white"|#f7fbe5
+
|style="background: #a02b24; color:white"|#a02b24
−
|#f7fbe5
+
|#a02b24
 
|-
 
|-
 
|}
 
|}
  
−
==Divergent Lookup table==
+
==Divergent Lookup Table==
 +
 
 +
Another palette from Stephen Few that is based on Cynthia Brewer's divergent palette. This palette is used to encoding quantitative differences.
  
 
{| class="wikitable sortable labelpage labelpagetable" border="1"
 
{| class="wikitable sortable labelpage labelpagetable" border="1"
Line 330: Line 359:
 
|-
 
|-
 
|0
 
|0
−
|Series 1
+
|Low
 
|style="background: #d61d2a; color:white"|#a02b24
 
|style="background: #d61d2a; color:white"|#a02b24
 
|#a02b24
 
|#a02b24
 
|-
 
|-
 
|1
 
|1
−
|Series 2
+
|
 
|style="background: #f05c53; color:white"|#e64b2a
 
|style="background: #f05c53; color:white"|#e64b2a
 
|#e64b2a
 
|#e64b2a
 
|-
 
|-
 
|2
 
|2
−
|Series 3
+
|
 
|style="background:#f6a297; color:white"|#f26f2b
 
|style="background:#f6a297; color:white"|#f26f2b
 
|#f26f2b
 
|#f26f2b
 
|-
 
|-
 
|3
 
|3
−
|Series 4
+
|
 
|style="background:#fde2db; color:white"|#f79533
 
|style="background:#fde2db; color:white"|#f79533
 
|#f79533
 
|#f79533
 
|-
 
|-
 
|4
 
|4
−
|Series 5
+
|
 
|style="background:#dde9ec; color:white"|#fec04f
 
|style="background:#dde9ec; color:white"|#fec04f
 
|#fec04f
 
|#fec04f
 
|-
 
|-
 
|5
 
|5
−
|Series 6
+
|
 
|style="background:#89cbdc; color:white"|#ffe191
 
|style="background:#89cbdc; color:white"|#ffe191
 
|#ffe191
 
|#ffe191
 
|-
 
|-
 
|6
 
|6
−
|Series 7
+
|
 
|style="background:#0894c1; color:white"|#f6f4be
 
|style="background:#0894c1; color:white"|#f6f4be
 
|#f6f4be
 
|#f6f4be
 
|-
 
|-
 
|7
 
|7
−
|Series 8
+
|High
 
|style="background:#124d8e; color:white"|#f7fbe5
 
|style="background:#124d8e; color:white"|#f7fbe5
 
|#f7fbe5
 
|#f7fbe5
 
|-
 
|-
 
|}
 
|}

Latest revision as of 16:30, 18 February 2012

Home < Slicer4:2012 GenericChartColors

Back to LUT and ontologies page

Charting was introduced to Slicer 4 in February of 2012

Introduction

Color can be a powerful tool in conveying information in a chart. There are several papers on choosing colors for displaying data by Maureen Stone and by Stephen Few as well as the excellent site by Cynthia Brewer (Color Brewer) which convey a few guidelines.

  • For categorical data, where color can be used to convey grouping, colors should be of uniform intensity and distributed in hue.
  • For quantitative data, where color can be used to convey ordering or magnitude, colors should be from a single hue while ranging in intensity with light colors depicting low values and dark bright colors depicting high values.
  • Don't use color indiscriminately. Use color to convey information.

Slicer4 introduced general Charting capabilities in 2012. Slicer4 Charting supports line, bar, and scatter charts. Chart colors can be assigned in a variety of manners.

  1. Colors can be assigned automatically to each series in a chart using a default lookup table which varies in hue.
  2. Colors can be assigned to each series by providing a custom selection for the lookup table.
  3. Colors can be assigned to each series by specifying a color to use for the series.
  4. Colors can be assigned to individual bars in a bar chart by assigning a lookup table to a specific series. While this contradicts some of the recommendations from above, it allows measures derived from specific tissues or pathologies to be visually associated with the label maps used to color those tissues or pathologies in Slicer's 2D Viewers and 3D Viewers. For instance, this approach is used in the Label Statistics Module.

Notes

2010 Generic Anatomy Colors for use with the Slicer3 Editor Module as a default color table for editing medical image data with no prior knowledge of the condition, modality, or specific anatomical region being displayed. When additional protocol knowledge is available (i.e. angiography of the brain) a different color table with more specific labels may be chosen.

Authors: Michael Halle, Florin Talos, Ron Kikinis, Steve Pieper, Nicole Aucoin.


Categorical Data

The following lookup tables are useful for categorical data where you want the color to convey the grouping of the data.

Dark Bright Lookup Table

This LUT is now the default lookup table for charts. Palette designed by Stephen Few in "Practical Rules for Using Colors in Charts". Similar to the Maureen Stone palette. Stephen Few recommends this palette for highlighting data. This palette is useful when display small points or thin lines. Again, this palette is good for categorical data.

integer_label text_label color notes
0 Series 1 #ec2c33 #ec2c33
1 Series 2 #128b4a #128b4a
2 Series 3 #165da7 #165da7
3 Series 4 #f37b2d #f37b2d
4 Series 5 #65328f #65328f
5 Series 6 #a11c23 #a11c23
6 Series 7 #b23c93 #b23c93
7 Series 8 #010202 #010202

Medium Lookup Table

Another Stephen Few palette. Similar to the Dark Bright color but in the medium range of intensity. May be a better choice for bar charts.

integer_label text_label color notes
0 Series 1 #ef5962 #ef5962
1 Series 2 #7dc16d #7dc16d
2 Series 3 #5a9dd2 #5a9dd2
3 Series 4 #f9a560 #f9a560
4 Series 5 #9d69aa #9d69aa
5 Series 6 #cd6f5a #cd6f5a
6 Series 7 #d680b3 #d680b3
7 Series 8 #737373 #737373

Light Pale Lookup Table

A light pale palette from Stephen Few.

integer_label text_label color notes
0 Series 1 #f1afae #f1afae
1 Series 2 #dae3ac #dae3ac
2 Series 3 #b8d3eb #b8d3eb
3 Series 4 #f3d0b1 #f3d0b1
4 Series 5 #d4b3d3 #d4b3d3
5 Series 6 #ddb9aa #ddb9aa
6 Series 7 #eac1da #eac1da
7 Series 8 #cccccc #cccccc


Lookup Table with equal steps in Hue

This color table uses approximately equal steps in hue to define a color palette that allows each color to be distinguish and visually pleasing. Based on the papers by Maureen Stone "Expert Color Choices for Presenting Data" and "Choosing Colors for Data Visualization". This palette is good for categorical data.

This lookup table is no longer used in Slicer4 (GenericChartColors.txt). The default lookup table for charts is now DARK BRIGHT LOOKUP TABLE.

integer_label text_label color notes
0 Series 1 #d4252b #d4252b
1 Series 2 #0065af #0065af
2 Series 3 #e6dc46 #e6dc46
3 Series 4 #8c3186 #8c3186
4 Series 5 #339e33 #339e33
5 Series 6 #fe7d20 #fe7d20
6 Series 7 #27b7b2 #27b7b2
7 Series 8 #3a3a8c #3a3a8c

Quantitative Data

The following color tables are suitable for quantitative or sequential data where you want the colors to convey an order.

Green Sequential Lookup Table

A palette from Stephen Few that follows Cynthia Brewer's (of Color Brew) recommendations for sequential data. This palette is used to encoding quantitative differences with pale colors for low values and darker and brighter colors for high values.

integer_label text_label color notes
0 Low #f7f8e5 #f7f8e5
1 #f0f1ba #f0f1ba
2 #d2e3a2 #d2e3a2
3 #9ecf8a #9ecf8a
4 #52b974 #52b974
5 #18a85a #18a85a
6 #118649 #118649
7 High #085a32 #085a32

Red Sequential Lookup Table

Another sequential palette. This palette is used to encoding quantitative differences with pale colors for low values and darker and brighter colors for high values.

integer_label text_label color notes
0 Low #f7fbe5 #f7fbe5
1 #f6f4be #f6f4be
2 #ffe191 #ffe191
3 #fec04f #fec04f
4 #f79533 #f79533
5 #f26f2b #f26f2b
6 #e64b2a #e64b2a
7 High #a02b24 #a02b24

Divergent Lookup Table

Another palette from Stephen Few that is based on Cynthia Brewer's divergent palette. This palette is used to encoding quantitative differences.

integer_label text_label color notes
0 Low #a02b24 #a02b24
1 #e64b2a #e64b2a
2 #f26f2b #f26f2b
3 #f79533 #f79533
4 #fec04f #fec04f
5 #ffe191 #ffe191
6 #f6f4be #f6f4be
7 High #f7fbe5 #f7fbe5
Retrieved from "https://www.slicer.org/w/index.php?title=Slicer4:2012_GenericChartColors&oldid=24677"