만들고 있는 솔루션이 기본 Highcharts를 사용하고 있다. 다른 Javascript Chart & Data Visualization Framwork에는 어떤 것들이 있는지 찾고 정리해 본다
1. Chart
- Chart를 표현하는 다양한 Javascript가 존재한다
+ 11-javascript-toolkit-for-creating-charts-and-graphs/
- jqWidgets : http://www.jqwidgets.com/
+ 다양한 차트와 컴포넌트를 제공한다 with jquery
- jQuery Top 5 chart component
- Morris.js : http://www.oesmith.co.uk/morris.js/
+ 깔끔한 UI가 인상적이다
+ SVG 사용
- xChart.js : http://tenxer.github.io/xcharts/
+ Morris.js 와 유사하지만 좀 더 dynamic 차트
+ SVG 사용
- Envision.js : http://humblesoftware.com/envision/
+ 모바일에서 보여주기 좋다
+ 실시간 라인차트 존재
+ Canvas 사용
- flotr2 : http://humblesoftware.com/flotr2/
+ 다양한 차트 종류 제공
+ CSS 디자인을 다시 손봐야 highchart 수준이 될듯하다
+ Canvas 사용
- Dygraphs : http://dygraphs.com/
+ 다양한 라인차트 제공
+ Canvas 사용
- smoothie : http://smoothiecharts.org/
+ envision.js 와 유사함
+ 나름의 옵션을 가지고 있음. option ui builder 제공
+ 실시간 라인차트 제공
+ Canvas 사용
- Rickshaw : http://code.shutterstock.com/rickshaw/
+ d3.js 프레임워크를 기반으로 chart를 제공
+ 예제가 안보임 (버그가 있는듯...)
+ SVG 사용
- NVD3.js : http://nvd3.org/
+ rickshaw와 같은 d3.js 를 사용한 chart를 제공
+ SVG 사용
- CanvasXpress : http://www.canvasxpress.org/
+ Canvas 사용
- g.Raphaeljs : http://g.raphaeljs.com/
+ Raphael.js 프레임워크를 이용한 차트
+ SVG & VML 사용
- jQuery Sparkline : http://omnipotent.net/jquery.sparkline/#s-about
+ Canvas 사용
2. Javascript Data Visualization Framework
- Framework 선택시 가장 중요한 것은 Canvas 로 할 것인가? SVG로 할 것인가이다
| A Comparison of Canvas and SVG | |
|---|---|
Canvas | SVG |
| Pixel-based (canvas is essentially an image element with a drawing API) | Object Model-based (SVG elements are similar to HTML elements) |
| Single HTML element similar to <img> in behavior | Multiple graphical elements which become part of the Document Object Model (DOM) |
| Visual presentation created and modified programmatically through script | Visual presentation created with markup and modified by CSS or programmatically through script |
| Event model/user interaction is coarse—at the canvas element only; interactions must be manually programmed from mouse coordinates | Event model/user interaction is object-based at the level of primitive graphic elements—lines, rectangles, path s |
| API does not support accessibility; markup-based techniques must be used in addition to canvas | SVG markup and object model directly supports accessibility |
- Raphael, Pager, Processing 기능 및 성능 비교
+ 많은 양의 데이터를 실시간으로 표현하고자 한다면 Canvas,
데이터량이 적고 분석이나 상호작용하는 차트를 원하면 SVG를 선택한다
+ Raphael.js : http://raphaeljs.com/
> SVG & VML 사용
+ Pager.js : http://paperjs.org
> Canvas 사용
> Data Visualiztion 전용 프레임워크
> 게임제작 또는 동적 차트를 만들기 좋음
+ Processingjs : http://processingjs.org/
> Canvas 사용
- D3.js : http://d3js.org/
+ SVG 사용
+ Data Driven Document = D3
+ D3로 구현된 다양한 Chart와 Visualization 사이트
- DC.js : http://nickqizhu.github.io/dc.js/
+ D3.js 와 Square의 Crossfilter를 이용
+ Dimensional Charting Framework
+ 차트끼리의 Interactive를 통하여 빠른 조회를 제공
+ 통계 조회화면 만드는데 적합
- InfoVis : http://philogb.github.io/jit/index.html
+ Interactive Data Visualization Toolkit
+ Canvas 사용
- Protovis : http://mbostock.github.io/protovis/
+ Graphical Visualization Toolkit
+ SVG 사용
3. Dashboard & UI Builder
- 차트를 통하여 나오는 결과물은 대시보드!
+ Javascript Dashboard Framework
- JointJS : Diagram을 그리는 Javascript framework
- Draw.io : SVG를 이용한 draw builder
- Tiggzi.com : https://appery.io/
+ 모바일 웹화면을 만드는 SaaS 기반 UI Builder
- ZingChart : http://www.zingchart.com/builder/
+ Web 기반 Chart Builder
- 01.org : https://01.org/rib/
+ Rapid Interface Builder
+ 모바일 웹화면 만들기 : https://01.org/rib/online/ (크롬만 가능)
- Froont : http://froont.com/
+ 웹사이트를 만들어 주는 UI Builder<참조>
- 10-javascript-canvas-frameworks
- 20-popular-javascript-charts-graphics-library
- 13-useful-javascript-solutions-for-charts-and-graphs
- 10-awesome-data-visualization-tools-for-the-web
'Data Visualization > D3.js' 카테고리의 다른 글
| [D3.js] Bar Chart 만들기 (0) | 2015.08.20 |
|---|---|
| [D3.js] 배우는 방법 (1) | 2013.08.06 |
| [D3.js] DashingD3js.com 실습 - 4 (0) | 2013.08.06 |
| [D3.js] DashingD3js.com 실습 - 2 (0) | 2013.08.05 |
| [D3.js] DashingD3js.com 실습 - 1 (0) | 2013.08.05 |