D3.js Visual - create your own custom visual


AppSource 评分(18 AppSource 评分)

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


  • 可以访问外部服务或资源


DataScenarios 中的其他应用程序

Power BI 认证
评分(266 评分)
Create a hierarchy of different fields and use it as a slicer with Power BI.
NaN out of 2
Power BI 认证
评分(84 评分)
Box and Whisker chartDataScenarios
Visualize a dataset in an effective way as a five-number summary (mean, median, quartiles, min/max)
NaN out of 2