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 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)
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
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.
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.