AppSource
Skip to main content

D3.js Visual - create your own custom visual

Jan Pieter Posthuma

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://az158878.vo.msecnd.net/marketing/Partner_21474846986/Product_42949681604/Asset_179ae0e6-c489-4961-b695-6b48365aa2dc/screenshot.gif
    https://az158878.vo.msecnd.net/marketing/Partner_21474846986/Product_42949681604/Asset_179ae0e6-c489-4961-b695-6b48365aa2dc/screenshot.gif
    https://az158878.vo.msecnd.net/marketing/Partner_21474846986/Product_42949681604/Asset_661294ce-99dc-4136-b6c4-7d11046f87ee/image005.jpg
    https://az158878.vo.msecnd.net/marketing/Partner_21474846986/Product_42949681604/Asset_1145e18c-653e-4ff8-ac23-9ca786bb54e2/image009.jpg
    https://az158878.vo.msecnd.net/marketing/Partner_21474846986/Product_42949681604/Asset_68492dc0-afbc-40f8-bf62-dd4245890add/image015.jpg
    https://az158878.vo.msecnd.net/marketing/Partner_21474846986/Product_42949681604/Asset_9aa74a31-6b29-4a2f-b54a-ad3bac77a145/image001.jpg