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

āđ‚āļ”āļĒ DataScenarios

îœĩ(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

āļ„āļ§āļēāļĄāļŠāļēāļĄāļēāļĢāļ–āđƒāļ™āļāļēāļĢāļĄāļ­āļ‡āđ€āļŦāđ‡āļ™

āđ€āļĄāļ·āđˆāļ­āđƒāļŠāđ‰āļ āļēāļžāļ™āļĩāđ‰ āļˆāļ°
  • āļŠāļēāļĄāļēāļĢāļ–āđ€āļ‚āđ‰āļēāļ–āļķāļ‡āļšāļĢāļīāļāļēāļĢāļŦāļĢāļ·āļ­āļ—āļĢāļąāļžāļĒāļēāļāļĢāļ āļēāļĒāļ™āļ­āļāđ„āļ”āđ‰

āļŠāļĢāļļāļ›āļĒāđˆāļ­

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