D3 and Power BI Visuals

https://github.com/Microsoft/PowerBI-visuals

It was definitely an initial release, but it has gained some traction since.  They are really pushing an open source agenda lately and this project is no different.  Power BI Visuals open sources all their controls used in Power BI to the community for contributions.  This is awesome.  

In this post we are going to create a bullet chart that was created by Steven Few in his excellent book Information Dashboard Design - http://www.analyticspress.com/infodashdesign.html.  

We are going to replicate the excellent example that was created by Mike Bostock, the creator of D3. His example can be found here http://bl.ocks.org/mbostock/4061961.   

When I was going through the code for the Power BI Visuals project and scouring the web for examples, I came across a contest that Microsoft is hosting for creating your own Power BI Visuals. This contest is new and runs until October 1, 2015.  There are a few entries so far and unfortunately, someone beat me to the bullet chart.

The entry for the bullet chart was submitted by Daniel Perilli who works for SQLBI and his code can be found here.  He did an excellent job and followed the example create by Mike Bostock cited early in this post.  Here is what his looks like compared to the D3 version:

Mike Bostock - D3 There are a few differences between the two, styling which is easy to solve using CSS along with lack of a subtitle and the comparative indicator shown by the light blue line in the D3 version. Since these are omitted in the Power BI version, we are going to add them in this post.   Power BI Dev Tools The first thing you will need to do is login to Power BI with your work or school account. Personal accounts are not supported yet in Power BI. Once you login, go the the address bar in your browser and append the following to the url. ?devToolsEnabled=true - this will enable the dev tools option in Power BI Verify this is successful by going to the gear icon on the upper toolbar and look for the this: Click on the Dev Tools menu item and you will be presented with a new tab that launches the Dev Tools development environment.  It will look like the following: The Dev Tools environment consists of 3 panes - the editor on the left to write your Power BI code in TypeScript and the preview window on the right to visualize what you created.  There is also a third pane below the editor on the right for CSS where you can style your visualization for the preview window. I am not going to go through the code in this post.  I will put it up on Github and if the original author wants to add these features, I will send a pull request.  Here is a screenshot of my development environment to get an idea: Once you hit the Compile + Run command on the toolbar you will have this visualization available in Power BI for your testing.  The visualization will show up on the designer palette and you can interact with it like an other visualization that is standard in Power BI. Here is how it looks in Power BI designer: Here is my updated version in comparison to the one created in D3: Mike Bostock - D3 Edward Bunt - Power BI Extension Looks pretty good and it shows how leveraging open source can lead to better visualizations and an overall better UX. Microsoft, I am impressed. Ed