https://store-images.s-microsoft.com/image/apps.52941.1402df73-0558-44a6-af91-958ec7ed12db.f40e368e-47af-4d2e-901d-dd4736a3c2d0.acaf016f-5f90-493a-b648-4f57a26c5de5

D3.js Visual - create your own custom visual

by DataScenarios

(14 ratings)
Download SampleInstructions

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

Visual capabilities

When this visual is used, it
  • Can access external services or resources

At a glance

https://store-images.s-microsoft.com/image/apps.23400.1402df73-0558-44a6-af91-958ec7ed12db.f40e368e-47af-4d2e-901d-dd4736a3c2d0.46e6280f-2f65-49cc-848e-ab50bc6698a9
https://store-images.s-microsoft.com/image/apps.50607.1402df73-0558-44a6-af91-958ec7ed12db.f40e368e-47af-4d2e-901d-dd4736a3c2d0.b9284c0e-7480-4ca5-9b21-5ec365dd0b7e
https://store-images.s-microsoft.com/image/apps.62277.1402df73-0558-44a6-af91-958ec7ed12db.f40e368e-47af-4d2e-901d-dd4736a3c2d0.b5331b39-8644-4363-ba5b-8bc766cfc16d
https://store-images.s-microsoft.com/image/apps.64343.1402df73-0558-44a6-af91-958ec7ed12db.f40e368e-47af-4d2e-901d-dd4736a3c2d0.b6c4ca43-55b9-4401-bbb2-28140d9e8356
https://store-images.s-microsoft.com/image/apps.28946.1402df73-0558-44a6-af91-958ec7ed12db.f40e368e-47af-4d2e-901d-dd4736a3c2d0.6b2aa4c2-dc2a-4343-aec1-f0ce2cc54832