Creating great visualizations with D3, Dimple, and SharePoint

  • Article

Whatare D3 andDimple ?

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

D3 BubbleVisualizationcreatedbyMikeBostock**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.

Example of gallery Christopher Viau.

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

UsefulCharacteristicsof D3 forSharePointDevelopment :

  1. It’s free
  2. It’s easy to use and has a variety of visualizations
  3. 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
  4. It allows creating the tooltips

Howtouse D3 inSharePoint

Extract zip file:

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 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: