본문 바로가기
프론트엔드

chart color palette

by 느바 2022. 1. 7.
반응형

chart color palette

categorical color

How to Choose Colors for Data Visualizations

데이터 시각화를 위해 어떤 색상을 선택할 것인가

 

이에 대해 세 가지 major 타입이 존재한다.

 

① Qualitative(Categorical)

독립적인 데이터를 시각화 하는데 쓰인다. 이 팔레트의 색상을 주로 categorical color 라고 부른다.

qualitative palette

 

② Sequential

연속적인 데이터를 시각화 하는데 쓰인다.

sequential palette

 

③ Diverging

중심값이 있는 데이터를 시각화 하는데 쓰인다.

diverging palette

 

출처 : https://chartio.com/learn/charts/how-to-choose-colors-data-visualization/#leverage-meaningfulness-of-color

 

How to Choose Colors for Data Visualizations

Color is a major factor in creating effective data visualizations. Read this article to learn how color is used to depict data and tools to create color pale…

chartio.com

출처: https://www.omnisci.com/blog/12-color-palettes-for-telling-better-stories-with-your-data

 

12 Color Palettes for Telling Better Stories with Your Data

This post highlights 12 color palettes that can improve your maps, charts, and stories, when each of the palette types should be applied, and how to add them to your dashboards.

www.omnisci.com

 

대표적인 categorical color

d3와 google에서 사용하는 categorical color

출처 : http://bl.ocks.org/aaizemberg/78bd3dade9593896a59d

참고 : https://github.com/d3/d3-3.x-api-reference/blob/master/Ordinal-Scales.md#categorical-colors

 

GitHub - d3/d3-3.x-api-reference: An archive of the D3 3.x API Reference.

An archive of the D3 3.x API Reference. Contribute to d3/d3-3.x-api-reference development by creating an account on GitHub.

github.com

대부분의 chart 라이브러리들은 자신들만의 categorical color를 갖고 있다.

아래는 toast ui chart의 예이다.

 

 

color palette 제작 도구

Qualitative(Categorical) ,Sequential ,Diverging  이 세 가지 타입을 선택해서 색상 팔레트를 만들어주는 사이트이다.

Color Brewer

https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3

 

ColorBrewer: Color Advice for Maps

 

colorbrewer2.org

Data Color Picker

https://learnui.design/tools/data-color-picker.html

 

Data Viz Color Palette Generator (for Charts & Dashboards)

How to Use The Single Hue Scale generator is most useful for visualizations where you’re showing the value of a single variable. Typically, the darker variation will represent a higher value, and a neutral color (even white) will represent a value closer

learnui.design

 

반응형

'프론트엔드' 카테고리의 다른 글

테이블 헤더 고정 sticky  (0) 2022.01.21
FontAwesome CSS Pseudo-elements  (0) 2022.01.19
datagrid Toast UI Grid & DataTables  (0) 2022.01.10
TOAST UI Chart 설치 사용법  (0) 2022.01.06
VSCode Live Sass Compiler  (0) 2022.01.05