|Daniel Perilli - SQLBI|
|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.
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.