Data-Driven Color Choices
for Charts
Can color improve the usability of my
charts?
Data-driven color choices for charts2
Data-driven color choices for charts3
Categorical or Qualitative
Sequential
Diverging (Two sequentials)
Palettes by Stephen Few
Qualitative Color Palette
Data-driven color choices for charts4
In a qualitative
color palette,
each color is
used to identify
a specific type
of data.
Dribbble user Radium
Sequential Color Palette
Data-driven color choices for charts5
In sequential
color palettes, a
single hue
intensifies to
represent fixed
incremental
changes.
Dribbble user Vladesign
Diverging Color Palette
Data-driven color choices for charts6
Diverging color
palettes feature
two colors that
grow in intensity,
away from each
other.
Dribbble user Ben Garratt
Perceptual Uniformity
Data-driven color choices for charts7
Color palettes have fixed ratios which
add a layer of analogy to your data,
something your viewers value.
Proof by Kenneth Moreland @Sandia
Color Palette Tools for Making Charts
Data-driven color choices for charts8
Color Brewer
Generate and evaluate palette effectiveness
Color Gradient
Finding saturation level values to use
Adobe Kuler
Try, create, and save various color schemes
Color with Interactive Charts
Data-driven color choices for charts9
Line: #96FEEF
Node: #A5B6B1
Bars: #6597A2
Tooltip: #54ced4
Consider the saturation of
your palette with hover
effects.
Consider the alpha (opacity)
level of your tooltips when
they are large.
Important Questions to Ask When
Implementing Colors
Data-driven color choices for charts10
• Which palette type best fits your data’s dimensions?
• Which colors will you use within the palette?
• Can saturation be used without disrupting
concentration?
• Will alpha or transparency help show off chart
elements?
More on Color
Data-driven color choices for charts11
Read More
http://www.zingchart.com/blog/2014/08/25/color-
charts/
Try it out your colors
http://www.zingchart.com/try

Using Color to Convey Data in Charts

  • 1.
  • 2.
    Can color improvethe usability of my charts? Data-driven color choices for charts2
  • 3.
    Data-driven color choicesfor charts3 Categorical or Qualitative Sequential Diverging (Two sequentials) Palettes by Stephen Few
  • 4.
    Qualitative Color Palette Data-drivencolor choices for charts4 In a qualitative color palette, each color is used to identify a specific type of data. Dribbble user Radium
  • 5.
    Sequential Color Palette Data-drivencolor choices for charts5 In sequential color palettes, a single hue intensifies to represent fixed incremental changes. Dribbble user Vladesign
  • 6.
    Diverging Color Palette Data-drivencolor choices for charts6 Diverging color palettes feature two colors that grow in intensity, away from each other. Dribbble user Ben Garratt
  • 7.
    Perceptual Uniformity Data-driven colorchoices for charts7 Color palettes have fixed ratios which add a layer of analogy to your data, something your viewers value. Proof by Kenneth Moreland @Sandia
  • 8.
    Color Palette Toolsfor Making Charts Data-driven color choices for charts8 Color Brewer Generate and evaluate palette effectiveness Color Gradient Finding saturation level values to use Adobe Kuler Try, create, and save various color schemes
  • 9.
    Color with InteractiveCharts Data-driven color choices for charts9 Line: #96FEEF Node: #A5B6B1 Bars: #6597A2 Tooltip: #54ced4 Consider the saturation of your palette with hover effects. Consider the alpha (opacity) level of your tooltips when they are large.
  • 10.
    Important Questions toAsk When Implementing Colors Data-driven color choices for charts10 • Which palette type best fits your data’s dimensions? • Which colors will you use within the palette? • Can saturation be used without disrupting concentration? • Will alpha or transparency help show off chart elements?
  • 11.
    More on Color Data-drivencolor choices for charts11 Read More http://www.zingchart.com/blog/2014/08/25/color- charts/ Try it out your colors http://www.zingchart.com/try