D3.js Visual - create your own custom visual
āđāļāļĒ DataScenarios
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
āļāļ§āļēāļĄāļŠāļēāļĄāļēāļĢāļāđāļāļāļēāļĢāļĄāļāļāđāļŦāđāļ
- āļŠāļēāļĄāļēāļĢāļāđāļāđāļēāļāļķāļāļāļĢāļīāļāļēāļĢāļŦāļĢāļ·āļāļāļĢāļąāļāļĒāļēāļāļĢāļ āļēāļĒāļāļāļāđāļāđ