Advanced Power BI Custom Visuals with d3.js

Learn how to create custom visuals in Power BI

Introduction

• Intro to Microsoft Power BI
• Who this course is for
• What is Power BI?
• What is a custom visual?

1. Set Up Your Environment

• Understand the target set up
• Licensing, software, and version requirements
• Create your first (demo) custom visual

2. Understand the File Setup

• Understand the folder structure of your new project
• Understand key files and Identify the ones to change

3. Build a KPI Box Visual Using "Single" Data

• See the target visual, data, and formatting
• Edit capabilities.json and inspect the resulting data
• Edit visual.ts to display a KPI value in Power BI
• Edit visual.ts to access the user's formatting choices
• Add a responsive SVG using D3
• Add rectangles and text to your KPI visual
• Use formatting utils API to set text size dynamically
• Use font size and fill color from the formatting pane
• Challenge: Add fill opacity to the formatting pane
• Solution: Add fill opacity to the formatting pane
• Challenge: Change the font color the KPI and label
• Solution: Change the font color the KPI and label
• Challenge: Place label at top or bottom
• Solution: Place label at top or bottom

4. Build a Scatter Chart Using "Categorical" Data

• Tell Power BI to accept categorical data
• Create D3 linear scales and axes in your custom visual
• Add some dots to make a scatterplot
• Add some dots to make a scatterplot
• Challenge: Make the dots responsive
• Solution: Make the dots responsive

5. Convert to a Bubble Chart with Group by Data

• Grouping your data to help make a bubble chart
• Create grouped scatter plot data, to allow different colors per category
• Update your D3 code to reflect your new grouped data
• Add a size dimension to create a bubble chart
• Distributing your visual
• Challenge: Change the hard coding of colors into dynamic coloring based on an array
• Solution: Change the hard coding of colors into dynamic coloring based on an array

Conclusion

• Goodbye