How to Add [email protected] Reference to a Power BI Custom Visual (SDK v1.2)

The Power BI team just released v1.2 of the Custom Visuals SDK. With this version you now need to reference d3 v3.5.5 yourself. d3 v4 does not work yet. I’m working with the team to get a v4 compat and sample together, but for now you can only use v3.5.5.

You can follow along with the steps below or follow along on this video:

1. Setup your Custom Viz dev env: Power BI Documentation: Use developer tools to create custom visuals

2. Create a new visual

3. Install typings https://github.com/typings/typings

4. Add d3 v3.5.5

5. Add d3 typing

6. Add files to tsconfig.json

Add "typings/index.d.ts" to tsconfig.json

7. Add d3 reference to pbiviz.json to externalJS array

Add "node_modules/d3/d3.min.js" to pbiviz.json

8. Copy this code to src/visual.ts

9. Start pbiviz dev server

10. Go to http://app.powerbi.com.

11. Enable Developer Settings

See this page for instructions on enabling the Developer visual in Power BI.

Power BI Documentation: Use developer tools to create custom visuals

12. Create a Report

13. Click the Custom Visual Icon.

14. You should now see your d3 visual.