developer maker musician

Thursday, September 29, 2016

How to Create a Power BI Custom Visual Based on an Existing d3 Visual - Part 2 - Capabilities, dataRoles and dataViewMappings

This is a continuation of my attempt at creating a Power BI Custom Visual from an OSS d3 visual I found on GitHub.  In this post I'm going to focus on the "capabilities" of the visual.  Here's the previous post: How to Create a Power BI Custom Visual Based on an Existing d3 Visual. It's a liquidFillGauge that was originally created by Curtis Bratton.

You can install this visual from the GitHub releases page here. I'll put in the Power BI Visual Gallery once the visual is complete.

I found this page helpful when looking into Power BI Custom Visual Data Roles.


In the root of your project you have a capabilities.json file. This is where you define how the user can assign data to your visual. Each "dataRole" that you define in this file can be a "Grouping", "Measure" or "GroupingOrMeasure" data role.  I think about it like this: Grouping is like categories of data, sets of data, whereas Measure is a single value…and I'm not quite sure what "GroupingOrMeasure" is used for yet - it's not used very much, so I'm not going to worry about it until I need it.

In the case of the liquidFillGauge, we really only need to assign one value at this point - the fill percentage.  The first version of the visual used the default capabilities.json file that comes with the template when created via "pbiviz new visualName".  The default capabilities comes with two dataRoles "Grouping" and "Measure" like so:


Since we only need a single value (at the moment, but we might need more in the future). We can remove the Grouping field and change the name, like so:

And if you just use that you'll see this:


What you need to do is define a dataViewMappings object that tells the visual how to represent the dataRoles in the dataView. Again, this is a super simple visual right now, so all we need to do is map the single value.  I've seen examples where "role" is equal to "Values", but removing it doesn't seem to impact anything, so I'm leaving it as an empty string.

Your visualization pane should now look like this:


The resulting visual is the same as the original. We just now have a cleaner data pane….and less code.

More to come soon…


Solution: Power BI - "Can't contact visual server. Please make sure the visual server is running and configured correctly."

You might see this error message when trying to load the Power BI Custom Visual “Development Visual”


“Can’t contact visual server. Please make sure the visual server is running and configured correctly”.

1. Make sure local server is started by running “pbiviz start” from the project root.

2. Make sure the certificate is installed by running “pbiviz --install-cert" and follow these instructions.

If the above doesn't work, try installing the cert using the following settings.

"Local Machine"


"Automatically Select…"


If it still doesn't work, then file an issue here:


Sunday, September 25, 2016

How to Create a Power BI Custom Visual Based on an Existing d3 Visual

I’ve been digging into the new Power BI Custom Visual SDK and just pushed my first visual called Liquid Fill Gauge.  It’s a circle gauge that represents a percentage value. All it does at the moment is display the value and nothing is configurable. I will continue to push new features as I finish them. It is based off of Curtis Bratton’s Liquid Fill Gauge. The premise of this post is to take an existing open source d3 visual and see how easy it is to create a Power BI Custom Visual out of it. 

You can download the visual and use within your reports here:

Setup Power BI Custom Visual Dev Environment

Follow the instructions here to get your dev env setup:

Clone Repo

Open Code

I use VS Code, but feel free to use any editor.

I walk through each step below – feel free to skim through it, use it as a reference or follow along step-by-step.

Create Custom Visual

This uses the new SDK to create a custom visual template.


Reference d3 Typings

You create Custom Visuals using TypeScript and d3, but d3 isn’t referenced by default in the new Custom Visual SDK. Here’s how to get it installed and referenced so TypeScript can see it.

1. Add a new file to the root of the project named typings.json and copy the following code to it.

2. Open tsconfig.json and add the following to the “files” array:

3. Open package.json and replace the content of that file with the following

4. Open a command prompt at the root of the visual folder and run:

This will install the typings needed for d3.

You should now see a typings folder with the following files


Verify d3 Reference

Let’s make sure d3 is wired up correctly.

1. Open up /src/visual.ts and add the following line right above the constructor

If you see a red line under d3, that means you don’t have it referenced correctly.  The above steps worked for me, so try again.

2. Update visual.ts

Let’s get some code in visual.ts to test if d3 is working or not. You need to remove all the other template code that is generated and ONLY add the following (the template code overwrites all of the html of the visual and will remove your test code). This will add an svg element with a circle to our canvas.

3. Run the following command to start the local dev server that serves your visual to the “development visual” on

You should see the following output:


4. Go to, create a report, add the “development visual”. Drag a data field to the Measure Data field and it should render this circle.


I used the Month column in the Dates table in the Customer Profitability Sample dataset.


If you do not see the circle, then d3 isn’t configured properly. Repeat the steps above and if after verifying that you followed every step, you can send me your code and I’ll help you debug it.

Add liquidFillGauge.js File

Create a file in the “src” folder called “liquidFillGauge.js” and copy the code from this file into it. If you cloned the repo, you will have this file locally as well.

The liquidFillGauge was originally pushed to GitHub as a stand alone d3 visual.  I only had to change a few things about it for it to work with Power BI.

  • PowerBI puts all Custom Visuals in IFRAMEs so the clip-path needs to reference the absolute url of the page like so:

  • Once I deployed my visual to I ran into another IFRAME issue that required me to pass in the d3 selection instance, versus doing the inside the visual. Instead of passing in elementId, I pass in a reference to the svg element

Add TypeScript Definition File

The premise of this exercise is to take an existing d3 visual and easily turn it into a custom visual without having to rewrite the entire thing in TypeScript. What I would like to do is clone the existing visual and reference it from my visual.ts file. In order to do that, I need to make the visual file visual in TypeScript. You could define all of the methods and come up with a more sophisticated definition file, but I’ve found that the following works great.

Create a new file in the “src” folder called “liquidFillGauge.d.ts” and add the following code to it.

Add liquidFillGauge files to tsconfig.json

Open tsconfig.json and add references to the liquidFillGauge.js and liquidFillGauge.d.ts files.

Add liquidFillGauge to visual.ts

The final step is to add code to the visual.ts file that will call the liquidFillGauge methods and create the visual.

  • Notice the amd-dependency line at the top.  This maps the TypeScript type definition to the visual.ts file so we can call loadLiquidFileGage that is in the liquidFillGauge file.
  • I added another local variable to hold a reference to the gauge and then either call loadLiquidFillGauge for the first load or call this.gauge.update for subsequent calls.

Test on

1. Start your local server

2. Go to

3. Create a report that uses your visual

4. Map a data value to the “Measure Data” field. I’m using the Month column in the Dates table in the Customer Profitability Sample dataset.


5. You should then see your custom visual rendered.


If you do not see it, then compare your code to the code in this GitHub repo and fix anything that is different.


Hope this gets you on your way to creating your own visuals.


Tuesday, September 20, 2016

Power BI Custom Visual Dev Environment Setup Quickstart

Power BI recently released their new Custom Visual SDK. If you were exposed to the old SDK you will quickly realize how much better this one is.  Here's a quickstart guide that should have your Custom Visual dev environment up and running in a few minutes.

Related Links

0. Install Node.js

1. Install SDK

2. Install Local Cert

Allows you to surface your visual to PowerBI as you develop it. Full instructions here.

  • Current User --> Trusted Root Certification Authorities

3. Enable Developer Visual

Go here:

Check "Enable developer visual for testing"


4. Create Test Visual



5. Start Local Visual Dev Server


6. Test on

Go to

Open any Dataset and click on the new Developer Visual icon in the Visualizations pane


You should then see the custom visual render


Troubleshooting/debugging tips are here and here if you don't see your visual.

More Power BI dev posts to come soon.


Friday, September 16, 2016

Explore the Azure IoT Certified Devices with Power BI

What do you do when you find a static table online that you want to quickly slice and dice? Enter Power BI.  Here’s the resulting Power BI report…details on how I created it below…

How this report was created…

The Azure IoT Certified Device list is published by the Azure IoT team here:

I used Power BI Desktop - Get Data -> Web Connector.  Entered that URL and it presented me with all the tables on that page.




Clicked Edit Queries


Did some scrubbing for similar values



Clicked Close and Apply


Created a OS and Language slicer


Clicked Publish, which pushes the report to Power BI Web


Went to Web, Clicked “File -> Publish to Web”


Copied the Embed code and pasted it into this page