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: https://azurebi.jppp.org/power-bi-d3js-visual/

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

SVG element:

  • svg xmlns="http://www.w3.org/2000/svg" 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

Limitations

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

Release Notes

[1.2.0.0]

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

[1.1.0.0]

  • First release to the Office Store

This is an open source visual. Code is available at my GitHub: https://github.com/liprec/powerbi-d3jsvisual

- 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
  • https://store-images.s-microsoft.com/image/apps.23400.d572d88d-e25a-4f33-95b6-a5ad3fc913c5.0e3f9a7b-8c21-4868-a96e-f9614fcc1549.e6042c89-3b77-4519-a1e9-76c8aae69893.gif
    https://store-images.s-microsoft.com/image/apps.23400.d572d88d-e25a-4f33-95b6-a5ad3fc913c5.0e3f9a7b-8c21-4868-a96e-f9614fcc1549.e6042c89-3b77-4519-a1e9-76c8aae69893.gif
    https://store-images.s-microsoft.com/image/apps.50607.d572d88d-e25a-4f33-95b6-a5ad3fc913c5.0e3f9a7b-8c21-4868-a96e-f9614fcc1549.c215f9b1-8b4c-4290-b492-7c27807328a2.jpeg
    https://store-images.s-microsoft.com/image/apps.62277.d572d88d-e25a-4f33-95b6-a5ad3fc913c5.0e3f9a7b-8c21-4868-a96e-f9614fcc1549.dfb83398-ff3a-4d6c-8c65-374cdbdee66b.jpeg
    https://store-images.s-microsoft.com/image/apps.64343.d572d88d-e25a-4f33-95b6-a5ad3fc913c5.0e3f9a7b-8c21-4868-a96e-f9614fcc1549.c136b65e-ecb4-4131-87f4-908423c52539.jpeg
    https://store-images.s-microsoft.com/image/apps.28946.d572d88d-e25a-4f33-95b6-a5ad3fc913c5.0e3f9a7b-8c21-4868-a96e-f9614fcc1549.27b97546-d597-486a-96ce-960abc9f68ec.jpeg