Creating Great Visualizations With D3, Dimple, And SharePoint

What are D3 and Dimple?

D3 and Dimple are simply two tools that can help to display charts, graphs, and dashboards in applications for unique visualizations.

SharePoint

SharePoint

D3 Bubble Visualization created by Mike Bostock https://bl.ocks.org

D3 is a JavaScript library for producing dynamic, interactive data visualizations in web browsers using SVG, HTML5, and CSS standards.

D3 provides the engine to utilize underlying Scalable Vector Graphics (SVG) which draws the visualizations. D3 is not the graphics layer but provides the Application Program Interface (API) to handle the XML Markup provided by SVG.

For example, have a look at the gallery by Christopher Viau (http://christopheviau.com/d3list/gallery.html)

SharePoint

Dimple simplifies D3, providing a minimal code to achieve something productive.

Useful Characteristics of D3 for SharePoint Development

  • It's free
  • It's easy to use and has a variety of visualizations
  • D3's library derives from jQuery and has a command of HTML and Document Object Model (DOM), which allows structuring dropdowns, tables, and complex div structures
  • It allows creating the tooltips

    SharePoint

How to use D3 in SharePoint

Extract zip file

SharePoint

The first level

Visualizations can run from the two HTML files displayed by just opening in a browser. The files ending in “WebPart.txt” are for inserting into SharePoint Pages with the Script Editor Web Part.

The second level

Files are for placement in a SharePoint document library. Files d3RampUpBurnDownChart.js and d3ProdCycleCompare.js contain extraction code and SharePoint REST and "AJAX Calls" for processing the data from a SharePoint list.

In a SharePoint Site Page or ASPX page, the HTML portion requires loading into Script Part Editors. Below is an example of one of the d3RampUpBurnDownWebpart.txt with the CSS excluded for clarity.

SharePoint

The Source
X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now