D3.js Visual – create your own custom visual

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.


***** Related Blog Posts *****
Creating Multi Threaded Dynamic Visuals – Advanced Power BI TechniqueMobile Reporting Tips and Techniques For Power BICustom Icons For Your Power BI Reports – Visualization TechniquesCustom Dynamic Segmentation Using DAX In Power BI

***** Related Video Tutorials *****
Create Dynamic Visuals Based On Ranking in Power BI w/DAX

Outlier Detection & Visualization in Power BI – Advanced DAX
How To Use Virtual Tables With COUNTROWS in Power BI – DAX Formula Technique
RANKX Considerations – Power BI & DAX Formula Concepts
Manufacturing Operations – Power BI Showcase

***** Related Course Modules *****
Ultimate Beginners Guide to Power BI
Power BI Super Users Workshop
Solving Analytical Scenarios w/ Power BI & DAX
Advanced Analytics in Power BI
Financial Reporting w/ Power BI
Power BI Showcases

***** Related Support Forum Posts*****
Custom Visual AppStoreHow To Use Custom VisualsCustom Visuals vs Standard VisualsPower BI – Creativity