[nWagon] Web based graphics chart library

 

http://helloworld.naver.com/helloworld/651829

 

기존의 상용 차트 라이브러리와 오픈소스 차트 라이브러리는 다양한 종류의 차트를 구현할 수 있지만 데이터를 시각적으로 표현하는 데만 중점을 둡니다. 그렇기 때문에 스크린 리더 등의 보조 기기로 차트에 접근하면 스크린 리더가 차트 자체를 이미지로 판단해 전달하려는 실질적인 데이터는 읽을 수 없습니다.

네이버에서 차트 라이브러리를 개발하게 된 계기는 네이버 사이트의 접근성 현황을 효율적으로 표현할 방법이 필요했기 때문입니다. 지침별 수준을 수치화하는 폴리곤 모양의 레이더 차트가 필요하다고 판단하여 오픈소스 기반의 차트를 사용하려 했습니다. 그러나 원하는 정보를 표현할 수 있는 차트를 제공하는 라이브러리를 찾지 못해 내부에서 직접 차트 라이브러리를 개발하기로 결정했습니다.

개발 초기에는 폴리곤 형태를 표현할 수 있는 레이더 차트의 개발만 염두에 두었습니다. 이후 다른 형태의 정보를 효율적으로 표현할 수 있는 Polar Pie 차트, 비교 차트 등 기존의 라이브러리에서 찾아볼 수 없는 여러 형태의 차트를 추가해 종합 차트 라이브러리인 Nwagon(http://html.nhncorp.com/nwagon)을 개발했습니다. 그리고 여러 곳에 널리 사용되기를 바라는 마음으로 Nwagon을 NULI 사이트(http://html.nhncorp.com)에 오픈소스로 공개했습니다.

'Nwagon'이라는 이름은 접근성을 뜻하는 'web accessibility'와 라이브러리 개발의 계기가 된 'polygon'의 'gon'을 조합해 만든 이름입니다. 이름이 뜻하는 대로 추가 작업이 없어도 차트를 볼 수 없는 사용자들에게 동일한 정보를 제공할 수 있도록 접근성을 향상시킨 차트 라이브러리입니다.

 

http://html.nhncorp.com/nwagon

 

 

Introduce

네이버 서비스의 접근성 현황을 표현하기 위한 방법 모색 중, 지침별 수준을 수치화 하는 폴리곤 모양의 레이다 차트 구현의 필요성을 기반으로 nWagon 차트 개발은 시작되었습니다.

개발 전 고려된 무료기반의 라이브러리들은 저희가 필요로 하는 필수 기능들을 표현한 사례가 없었고, 이를 위해 간단하면서도 사용하기 쉬운 자체 차트 라이브러리를 개발하게 되었습니다. 차트의 이름은 차트 개발의 시발점이 된 Web Accessibility의 약자인 WA와 차트의 모티브가 된 폴리곤의 gon을 조합한 wagon으로 네이버의 N과 결합하여 최종 이름을 nWagon으로 명명하였습니다. 더불어, 마차(wagon)을 탄 것과 같이 편한하게 웹 서비스를 이용할 수 있도록 하기 위한 저희 접근성팀의 열정을 담고 있기도 합니다.

Key Points

• 

  손쉬운 사용

  JSON 형태로, 라이브러리 사용시 한번의 function call만으로 차트가 완성되는 용이성
• 

  간결한 디자인

  컬러와 크기 등 조절의 간편함
• 

  빠른 속도

  SVG를 이용하여 랜더링 속도가 빠르며 DOM을 이용한 event나 CSS Selector 적용 가능
• 

  크로스브라우징

  IE9를 포함한 주요 브라우저 지원 가능(Chrome, Firefox, Safari, IE since v.9)

 

View Example