Создание визуализаций с помощью D3, Dimple и SharePoint

Что такое D3 и Dimple? 

D3 и Dimple – два простых инструмента для удобной визуализации диаграмм, графиков и панели мониторинга в приложениях. 

D3 Bubble Visualization, созданный Майком Бостоком https://bl.ocks.org

D3 – библиотека JavaScript для создания динамических и интерактивных визуализаций данных в веб-браузерах с помощью стандартов SVG, HTML5 и CSS. 

D3 предоставляет движок для использования базовой масштабируемой векторной графики (SVG), которая рисует визуализацию . D3 не является графическим уровнем, но предоставляет интерфейс прикладных программ (API) для обработки XML-разметки, предоставляемой SVG. 

Пример. Галерея Кристофера Виуа. 

Dimple упрощает D3, предоставляя минимальный код для достижения результата.  

Возможности D3 для SharePoint Development: 

  1. Бесплатный 
  2. Простой в использовании, имеет большое разнообразие визуализаций 
  3. Библиотека D3 из jQuery, наличие команд HTML и Document Object Model (DOM), позволяющие структурировать выпадающие списки, таблицы и сложные структуры div
  4. Возможность создавать подсказки

Как использовать D3 в SharePoint 

Разархивируем файл: 

Первый уровень: 

Визуализации могут запускаться из двух отображаемых файлов HTML. Основная визуализация D3 / Dimple выводится из извлеченного HTML, просто открываясь в браузере. 

Файлы, заканчивающиеся на «WebPart.txt», предназначены для вставки в страницы SharePoint с веб-частью редактора сценариев. 

Второй уровень: 

Файлы предназначены для размещения в библиотеке документов SharePoint. Файлы пользовательского кода d3RampUpBurnDownChart.js и d3ProdCycleCompare.js содержат код извлечения и вызовы SharePoint REST и AJAX для обработки данных из списка SharePoint. 

На странице сайта SharePoint или ASPX часть HTML требует загрузки в Редакторы части скриптов. Ниже приведен пример одного из файлов d3RampUpBurnDownWebpart.txt с исключением CSS для ясности: 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s