14 JavaScript-библиотек для создания визуализации, графиков и диаграмм

JavaScript библиотеки
В про­дол­же­ние нашей пер­вой под­бор­ки мы пуб­ли­ку­ем еще 14 биб­лио­тек для созда­ния раз­лич­ных фор­ма­тов визу­а­ли­за­ции с исполь­зо­ва­ни­ем про­грамм­но­го язы­ка Javascript.

Визу­а­ли­за­ция дан­ных сего­дня зани­ма­ет одно из важ­ных мест в рабо­те любой орга­ни­за­ции, так как с помо­щью гра­фи­ков и диа­грамм мож­но намно­го быст­рее доне­сти инфор­ма­цию сво­ей ауди­то­рии, а так­же натолк­нуть людей на нуж­ные выво­ды, кото­рые они смо­гут сде­лать само­сто­я­тель­но.

С помо­щью JavaScript-биб­лио­тек раз­ра­бот­чи­ки и про­дви­ну­тые поль­зо­ва­те­ли смо­гут визу­а­ли­зи­ро­вать дан­ные для сво­их веб-при­ло­же­ний и онлайн-про­ек­тов.

1. Chartlist.js

Chartist.js явля­ет­ся про­стой биб­лио­те­кой гра­фи­ков на осно­ве век­тор­но­го фор­ма­та SVG, кото­рая пред­на­зна­че­на для лег­ко мас­шта­би­ру­е­мых сай­тов. Гра­фи­ки все­гда будут в хоро­шем каче­стве неза­ви­си­мо от того, про­смат­ри­ва­ет ли поль­зо­ва­тель их на ком­пью­те­ре или мобиль­ном устрой­стве.

Сайт: Chartlist.js.

2. Timesheet.js

Фрагмент сайта Timesheet.
Фраг­мент сай­та Timesheet.js.

Timesheet.js – это JavaScript-биб­лио­те­ка для про­стых HTML5 и CSS3 тай­ма­лай­нов, кото­рые созда­ют­ся бук­валь­но с помо­щью несколь­ких строк кода.

Сайт: Timesheet.js.

3. Vis.js

Фрагмент сайта Visjs.
Фраг­мент сай­та Visjs.

Vis.js – дина­ми­че­ская биб­лио­те­ка визу­а­ли­за­ции в вашем бра­у­зе­ре. Биб­лио­те­ка пред­на­зна­че­на для про­стой обра­бот­ки боль­ших объ­е­мов дина­ми­че­ских дан­ных и поз­во­ля­ют ими управ­лять. Vis.js состо­ит из сле­ду­ю­щих ком­по­нен­тов: DataSet и DataView.

Сайт: Vis.js.

4. Plottable.js

Фрагмент сайта Plottablejs
Фраг­мент сай­та Plottablejs.

Plottable.js явля­ет­ся биб­лио­те­кой для про­сто­го созда­ния интер­ак­тив­ных гра­фи­ков для Интер­не­та, кото­рая содер­жит набор осей и линий.

Сайт: Plottable.js.

5. Epoch

Фрагмент сайта Еpoch.
Фраг­мент сай­та Еpoch.

Epoch поз­во­ля­ет созда­вать гра­фи­ки с хоро­шей визу­а­ли­за­ци­ей в реаль­ном вре­ме­ни. Биб­лио­те­ка наце­ле­на на созда­ние тайм­лай­нов и исто­ри­че­ских отче­тов, а так­же на пред­став­ле­ние часто обнов­ля­е­мых дан­ных в виде гра­фи­ков.

Сайт: Epoch.

6. D3.js

Фрагмент сайта D3js.
Фраг­мент сай­та D3js.

D3.js явля­ет­ся JavaScript-биб­лио­те­кой со встро­ен­ной под­держ­кой crossfilter, основ­ная цель кото­рой – визу­а­ли­за­ция и ана­лиз дан­ных в бра­у­зе­ре, а так­же на мобиль­ном устрой­стве.

Сайт: D3.js.

7. Cytoscape

Фрагмент сайта Cytoscape.
Фраг­мент сай­та Cytoscape.

Cytoscape – биб­лио­те­ка с откры­тым исход­ным кодом, с помо­щью кото­рой мож­но ана­ли­зи­ро­вать и визу­а­ли­зи­ро­вать дан­ные.

Сайт: Cytoscape.

8. EmberCharts.js

Фрагмент сайта Еmber-charts.
Фраг­мент сай­та Еmber-charts.

Ember Charts – это биб­лио­те­ка диа­грамм, создан­ная на осно­ве Ember.js и d3.js, кото­рая вклю­ча­ет в себя раз­но­го вида гра­фи­ки, кото­рые с лег­ко­стью мож­но моди­фи­ци­ро­вать. Так­же биб­лио­те­ка ста­нет хоро­шим помощ­ни­ком в под­го­тов­ке пре­зен­та­ций и созда­нии интер­ак­тив­ных гра­фи­ков.

Сайт: EmberCharts.js.

9. JointJS

Фрагмент сайта Jointjs
Фраг­мент сай­та Jointjs

JointJS явля­ет­ся совре­мен­ный HTML-биб­лио­те­кой для визу­а­ли­за­ции и вза­и­мо­дей­ствия с диа­грам­ма­ми и гра­фи­ка­ми. Она может быть исполь­зо­ва­на для созда­ния как ста­ти­че­ских, так и пол­но­стью интер­ак­тив­ных диа­грамм для ваших при­ло­же­ний.

Сайт: JointJS.

10. AmCharts.js

Фрагмент сайта Amcharts.
Фраг­мент сай­та Amcharts.

AmCharts явля­ет­ся рас­ши­рен­ной биб­лио­те­кой для созда­ния диа­грамм, кото­рая вклю­ча­ет в себя раз­лич­ные типы гра­фи­ков.

Сайт: AmCharts.js.

11. Polymaps

Фрагмент сайта Polymaps.
Фраг­мент сай­та Polymaps.

Polymaps явля­ет­ся бес­плат­ной биб­лио­те­кой для созда­ния дина­мич­ных интер­ак­тив­ных карт в совре­мен­ных веб-бра­у­зе­рах, кото­рая под­дер­жи­ва­ет OpenStreetMap, CloudMade, Bing и дру­гих постав­щи­ков веб-карт.

Сайт: Polymaps.

12. Zing Chart

Фрагмент сайта Zingchart.
Фраг­мент сай­та Zingchart.

ZingChart – это мощ­ная биб­лио­те­ка, кото­рая дает воз­мож­ность быст­ро созда­вать кра­си­вые диа­грам­мы и инфо­гра­фи­ку с помо­щью сотен типов диа­грамм и настрой­ки пара­мет­ров.

Сайт: Zing Chart.

13. Canvasjs

Фрагмент сайта Canvasjs.
Фраг­мент сай­та Canvasjs.

CanvasJS явля­ет­ся про­стой в исполь­зо­ва­нии биб­лио­те­кой для постро­е­ния гра­фи­ков, кото­рые будут пра­виль­но отоб­ра­жать­ся на всех устрой­ствах, вклю­чая iPhone, iPad, Android, Windows Phone, Microsoft Surface, настоль­ные ком­пью­те­ры и т.д. Это поз­во­ля­ет созда­вать мно­го­функ­ци­о­наль­ные инфор­ма­ци­он­ные пане­ли, кото­рые рабо­та­ют на всех устрой­ствах без ущер­ба для функ­ци­о­наль­но­сти ваше­го веб-при­ло­же­ния.

Сайт: Canvasjs.

14. Grafico

Фрагмент сайта Grafico.
Фраг­мент сай­та Grafico.

Grafico предо­став­ля­ет широ­кий спектр гра­фи­ков, при этом биб­лио­те­ка осно­ва­на на Raphaël and Prototype.js.

Сайт: Grafico.