Skip to main content

D3.js Visual - create your own custom visual

Jan Pieter Posthuma

3.6 out of 5 stars
3.6 (19)

Bring your data to life by using HTML, SVG, CSS via the D3.js framework and create your own visual.

The D3.js Visual for Power BI provides a D3.js skeleton visual that everybody can use to create custom visuals with D3.js. Either the visual can be created from scratch or an existing D3.js visual can be used via a seamless 'lift-and-shift' procedure.

Some alterations are need to get the correct dimensions and the data retrieval. Optional it is possible to alter the color assignment based on the provided color array. A short tutorial can be found at:

All D3.js visuals run in a frame with the following elements/variables:

SVG element:

  • svg xmlns="" class="chart" id="chart"

pbi object:

  • dsv : function that retrieves the data via the provided callback: pbi.dsv(callback) e.g. pbi.csv(function(data) { //Process data function });
  • height : height of the sandbox frame
  • width : width of the sandbox frame
  • colors : color array with 8 colors; changable via options


  • D3.js version is v3.5.17
  • Maximum amount of datapoints is: 30,000

Release Notes


  • Added several confirmation prompts
  • Fixed that the editor is incorrect set to 'readonly'


  • First release to the Office Store

This is an open source visual. Code is available at my GitHub:

- Jan Pieter Posthuma, DataScenarios

Add-in capabilities
When this add-in is used, it
  • Can read and make changes to your document
  • Can send data over the Internet