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.

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.

Example of gallery Christopher Viau.

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

Useful Characteristics of D3 for SharePoint Development:

  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

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:

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