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.
D3 Bubble Visualization created by Mike Bostock https://bl.ocks.org
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.
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
How to use D3 in SharePoint
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: