I’d been interested in developing a Power BI custom visual for a while before actually getting round to producing something. The usual constraints on time were one reason but also the rather limited documentation and the number of components required which I have at best a surface knowledge of: Typescript and D3 in particular. Having finally found the time I found that the process was not too painful even starting from a pretty low base. The documentation however was sparse and so before detailing how I got on I thought I’d outline the resources I found useful.
The official Microsoft documentation on custom visuals is much better than it was 18 months ago but the main tutorial is quite limited. It will however guide you through setting up the necessary development tools without much trouble. Though quite out of date now I would recommend Ben Kimmel’s – Power BI Visualisation Development Tutorial which covers a lot more ground. I found the sections on data binding and extraction particularly helpful.
The rest of the Microsoft Documentation is fine but feels a little disorganised. A lot of the material here has been moved from the Microsoft Git Hub site and could do with a bit of reorganising. Here you can also access the source for several sample visuals which, if you’re up for wading through the code, can provide some useful patterns. Finally there is a Community Custom Visuals Discussion forum where I’ve gleaned some useful info though it is rather cluttered with mis-posted questions.
OK, as there’s a fair bit to cover I’ve broken down this into a few sections. First off drawing the visual using D3. In order to keep things as simple as possible I developed the chart rendering code before looking at how to get this into a Power BI visual. I also cover a minor SVG issue I came across while doing this in a separate section. Then replicating the D3 chart in the custom visual. Next binding the visual to actual data and adding in the formatting options which turned out to be the most difficult bit. Finally I’ll wrap up with a few outstanding bugs and options for further functionality.
Part 1 – Introduction
Part 2 – Developing a Tree Funnel Chart in D3
Part 2a – Resolving blend lines between adjacent SVG elements
Part 3 – Creating a Tree Funnel Chart Power BI Custom Visual
Part 4 – Accessing the Power BI Custom Visual Dataview
Part 5 – Formatting the Power BI Custom Visual
Part 6 – Bugs and Next Steps
In general I’ve avoided covering anything that’s well documented already referring instead to the appropriate resources. I’ve also assumed a basic knowledge of Power BI, JavaScript and D3.
All the code can be found in the repositories on GitHub.