Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

Channel 9: Creating Custom Visualizations for Power BI with Sachin Patney and Nico Cristache

0 (0 Likes / 0 Dislikes)
Hey, there, this is Seth Juarez. Here from Channel 9, I got two special guests today, Sachin and Nico. Tell us about who you are and what you do? Uh, I'm Sachin from the Power BI Visualization team and I'm a developer. I'm Nico Cristache for Power BI Visualization team and engineer manager. In fact, I'm a fan of visualization. So, tell us what you got today for us? So, today we're going to teach you how to build a custom visualization that you can use in Power BI and at the end of this all, we have a little surprise for you. So, try not to forward to the end. Uh, okay, so, yeah, please stay. All right, go ahead, show us what you got. But, Sachin, before we jump into writing some codes, I would like to take a bit of time to introduce the team and our goals. - Oh, great. - Yeah. So the new Power BI web experience started almost nine months to one year ago and we made a huge path at that point on client site visualization technologies. Our goals were simple. So first we wanted to build something that would allow us to all the modern technologies, web technologies like D3js, WebGL, you name it. Yeah. Yes, very interesting and cool. And second, we wanted to build a visualization stack that will allow developers like you, maybe, to-- at, one day, to go and build new visuals and integrate them into the system, in to our service. - Oh, wow, that's awesome. - Yes. - And that day is today. - Oh, fantastic. And Sachin will gonna to show us how to do that. So, what you're telling me is that not only with Power BI can you use whatever visualizations you already have, but you're going to show us how to make your own custom one. - That's correct. - Oh, fantastic. Let's see it. So, the first thing you need to do is to head over to Power BIs GitHub page and follow the getting started instructions that are on the Wiki. This will land you up and into the playground app. And the playground app is like a nice way for you to play around via visualizations, you can resize it, you can turn on animations and interactions and see how things animate and when you click around. So, that's basically what the playground is about. So to be clear, this is, this is something that you can fork from GitHub to start in the playground to make your own visualizations. Correct. That's right. So let's create a new one. Let's head in to Visual Studios, you just have to right click and add a new item. And this is after we fork, correct? That's correct. Yes, once you've follow all the instructions, cloned your repository and this is what you get. You can open up the solution and you end up and you add a new visualization. So I'm just going to create an aster plot today. So I'm just going to call this file aster plot. And that's cool. It looks like you have your own templates for creating visualizations in TypeScript. Yes, so it can be quite confusing when you're starting off in your framework, you need some sort of boilerplate code just to know what APIs to comment on and things like that. So the first thing you'll notice here is capabilities, capabilities is kind of your visualizations way of telling the Power BI system what you're capable of doing. So what kind of fields do you take, how do these fields relate to each other, what sort of formatting options you provide and how you want it to deal with large volumes of data. So this is where you would talk about what sort of data reduction algorithms to use. - Oh, that's interesting. - Yes. And capabilities is also a way for you to provide hints to our national language system, which helps it better answer users questions and probably show your visualization as a result. That's awesome. So the visualization capabilities is the way for the developer to say this is what this can do. Correct. And now it doesn't have to do with, for example, what kind of data points you can take, but also natural language stuff, like you said, and then large data, because people don't realize it, if this stuff is happening on the client... And you're sending gigabits of data down using JavaScript, there might be a problem. So you got a way to-- you got to have a way to compress it. Yes. And often, you can't really visualize all the data as well. So it might as well not waste time fetching all the data and just specify. Like, for example, I have someone once tell me I want to plot 20 million points on the X-axis and I say, hey, you realize that there's not 20 million... Pixels... Pixels on your screen, this is going to be a problem. That's true. Yeah. So, and the rest of the interface is pretty simple. There is a converter which isn't really an API option, but it's some place where you would convert data view into a ViewModel that your visuals is going to represent. DataView is the format that Power BI gives you data and it comes in a few canonical forms such as categorical, matrix, table, tree. Got it. And you will often convert this data into something that is closer to what your visual is going to represent. I see. And then there's init and init is when Power BI DOM is ready, it actually provides you with the element that you're going to draw into and also gives you some of the host services that you can call, like text measurement and formatting and this is, this is only called once, like when the visualization starts up, when you're ready, we call you for this. And for the rest of your lifecycle of a visualization you will be calling update. An update essentially gives you DataView and its view port. So, every time data changes you get update, a view port size changes, you get update. I see. And every time a formatting option is changed by user, you also get an update. That's awesome. And so, the init is the one time setup and then this thing is going to cycle through depending on any number of actions that happen on the client's side. Correct. And this is also to kind of simplify flow, so that, like, if you, like, usually, your visuals tend to have a ton of interfaces and this kind of simplifies, like, everything just goes through an update. Through One. Nice. And once your visual's about to be removed from the screen, we call destroy and this is really for you to do any cleanup that you might need. - I see. - Okay. So I'm going to just copy and paste some code in here and then I'll explain it a little more. So... what I'm pasting into here is an aster plot... essentially, as you can see, it does roughly the same thing, so it has some capabilities, it has the converter which converts DataView into its ViewModel. It also has a init where it does one time setup. In this case, it just depends on SVG node too. And I'm looking here, it looks like you're actually using D3 for this particular aster plot. Yes. So, most of our visualizations use D3, because D3 provides some nice APIs and interfaces for creating quick visualizations, but within our limit here. So if you want to go ahead and use canvas or WebGL for your visualizations, you could very well do that. That's awesome. And, so one other thing you need to do is you need to declare a plugin for your aster plot and finally, just add it to your references and you can see, as I'm doing this changes, Gulp is building this incrementally for me and it builds within like five seconds and it's pretty good, quick. So, the plugin, I just want to talk a little bit about it before I show you this in action, is essentially a way for you to tell Power BI that your visual is in the system. So Power BI, when it loads, it looks for all these plugins and says oh, okay, I can create these visualization types. And this is so, and this is just a few lines of code where you might want to declare, like, how would you create it, like, if you want to pass in some constructive arguments and the reason we have this is, for example, like, if this was in a separate house, you might want to sort of initialize your visual in a slightly different way. I see. Okay, so I'm, just gong to go ahead and launch this. And in this list you'll see your new visualization has now appeared and you can turn off animations and interactions, you can kind of resize it, see how it resizes. You can randomize data to see the different movements, you can also click around to see how it works. So this is pretty cool. It's like a little sand box for you to create any kind of visualization that your organization might need and host it inside of Power BI. - Correct. - Got it. And so the thing is, that's cool. So you can test the visualization in isolation. Now often what you want to do is how this actually fits into the Power BI ecosystem. And today, we're previewing some of the tools that you can use just for that. I'll just correct that. So if you turn on the dev tools enables feature switch you'll be able to operate your Power BI in this new, with these new developer tools. So you just go onto the settings, you open up dev tools and you get a live coding environment. Interesting, and this is the same interface from before, correct, from the visualizations? Correct. And this is also, this editor is not just some text editor, this is actually using Visual Studios code. So you can actually, you actually get things like if I were to type in, for example, D3 and I would intelligence on these item. So you could actually, you wouldn't even need Visual Studios, you could actually write your visualizations right in this thing. And once you're ready, we can just compile and you can see the same code appear. Wow. Right, and now I just switch back over to Power BI, click back in and I edit my report, and over here you'll notice, I didn't specify an icon but I could have, but this is default icon for it. And if I click on it, I can switch it to my new visualization. And this is a fully interactive visualization. You can cross filter into the visualization, you can get this one to update and you get tool tips and animation and everything is working right. That's fantastic. Because usually people complain about the visualization tools because they feel like, well, I don't have the one exactly that I want and we used the one from... but you can actually go in and make your own visualization that actually interacts with all of the other visualizations in Power BI. Correct. And the other thing you could do now if you go in here, you see a bunch of formatting options we have, right, like you can turn on and off axis and things like this and you might want to include this in your own visualization. So we'll teach you how to do that. Nice. And you're going to come in and you'll need a few things. So the first thing you'll need to do is, let's go back to our dev tools, right, and the first thing you need to is go back to your capabilities, like I talked about. And that's where you described what your visualizations can do. Correct, and so over here I'm saying that I'll have a label like this label in the center and it has a bunch of properties, it just has fields. I can change its color and this is its type and all I'm doing here is describing, I'm not actually creating a UI for it and same thing, there's an outline that I would like to draw and I would like to either show it or hide it and control its thickness. So that's the first thing and one other required function of this is... you need to be able to enumerate these properties. So the property paint, in this instance, is going to go through your capabilities and it's going to ask you now, it is going to ask you so what is the value for my label, is it like red, green or what is the thickness and this is sort of like a feedback system where it will, whenever it changes the user input, it's going to provide you this new entry into the data and then it's going to ask you what value to show. So the reason it has a sort of feedback loop mechanism is you might want to do sort of validation. So, for example, if someone enters 1,000 for the thickness, you might not want this. So you'll get 1,000 through the DataView, you'll say, no, maximum is 10 and then you send that back to the property paint. So the property paint doesn't have to do any validation on its own. So the visual doesn't have to any UI and the property paint doesn't have to do any data validation and both of them are completely independent. Nice, so Power BI is going to ask what are the things that can be changed. You'll enumerate it with that function and then it will push back the values as well and you do validation in your own visualization. Okay. So I'm going to reload this so that we can see the effects. So right now you saw there was nothing in the property paint, right, and then I just switch back to this guy and we need to cut this, sorry. I think I forget to run it. Oh, that happens to me all the time, don't worry. Yeah. Right, and we go back in, and here I go. So just like that, I have the ability to change the label color and look, I didn't have to implement any UI for this, right? This was just out of the box and the same thing with the outer line, I can easily control its thickness, I can make it, let's say, if I want... You can make it ugly as you like. Exactly. That's the beauty of these tools, I love it. You know, because I've seen some visualizations that people have made pretty ugly and they want them to be in that way. So if you want them to be ugly... Customize. Oh, they call it customize there, yeah. I call it ugly. You can make it as customized as you like. That's true. And you can also debug this in your browsers. And you can use the browsers built-in debug tools. So, here I could just go in and type in aster plot, right and I get all this. And this is just TypeScript translated to JavaScript and say I'm-- just want to see what my data points looks like and I'm trying to solve an issue. So the breakpoint steps in and I can, all right, here you go. This is my translated objects, these are the values and I can play around with it. That's fantastic. Like, I kind of want to go in there and draw my own stuff, you know, like, you can show a cat if things are good and a dog if things are bad or vice versa if you like dogs or like cats. And as a final thing, obviously, with any Power BI visualization you can now pin it to your dashboard. Let's now save that and here you have it. So, that's custom visualizations. That's was pretty fast. So how much of knowledge of D3 or the underlying drawing technologies do you need to have in order to make this work? Oh, I would say that you need a drawing technology, it doesn't really matter what it is and I think that's, that's about all you need. So the IVisual interface doesn't actually enforce anything special. I see. It just tells you that this is what I'm going to do and the various actions, like, if I get new data I'm going to call update. When I initialize, I'm going to call initialize. But everything else, so, you can literally take a visualization which you've already made and it quite easily transform it into one that will work in Power BI. And so when it comes in, it's just giving you the element wherein you inject stuff. Exactly. And the way custom visualizations would work would be how any of our visualizations works. So, it's not some third party sandbox that we put herein. We give you exactly, we're giving you the same tools we use to develop, we've giving you the same code, we're giving you exactly what we used to make our own visualization. So that way there's no difference between first party versus third party. So if you feel like, hey, I liked the bar chart that you already have but I want to extend it, what you can do is you can see the code you've already written, make a new custom bar chart and whatever you want in that. Sure. You can do that or if you really want to improve an effects box you can send us a pool request and we'll accept it. Everyone can get this in the bar chart... Nice. That's fantastic. So when you're making these things, where do they live? Like, for example, where do these dashboards live? Where do these dashboards live? Yeah, are they are on your local premises, is there, is this, I see it's at, is this the website, it is a service? - How does that work? - Correct. So Power BI is a service and all your dashboards live in the cloud and right now, these custom visualizations with these developer tools which you've release, and for the purpose we'll announce at the end of this, is only on your local storage. So right now, we save everything locally and so if you were to share this dashboard, for instance, some, the person would not be able to see the aster plot. But in the coming weeks, we'll be able to release more tooling and how you'll be able to publish this visualizations, possibly to yourself or to your own organization for that matter. Fantastic. So what else do you for us today? Nico, will... Okay, I will do the honors for the contest. So, starting today, we'll start, we wanted to announce that the Power BI Visual Contest will start September 3, and for a duration of four weeks. So we'll kick off the contest for four weeks and that will allow people from all over the world to come and build visuals for use in Power BI. Yes, not only that, the top visuals are going to be included in Power BI, but we'll also be giving to this, or some person that whoever creates that visual, a prize, $5,000. - Oh, my goodness. - Yes. So if you're gonna make your dog and cat visualization, now is the time. - Win some money. - Yeah. So the first place prize, it's actually $5,000. For the second place we have $2,500 and for the third place we have $1,500. Oh, my goodness. That's fantastic. But more than that, there's also People Choice Awards. Oh, okay. So there will be three of them and every one of it will be $1,000 and they will award them in for the second, third and four week of the contest and it's actually based on the number of tweets, their re-tweets. - I see. - So don't try to duplicate it. Yeah. We have computers here, at my job. We can tell when things happen. Yes. So all the information will be available on our website, at So you can find all the roles and all the prizes that will be, that are up there for grab. So, the main, the judges will use creativity and technical excellence and applicability as a way to judge actually the submissions. Okay. You're going to find on the website that all that go needs to be under MIT license, and available into a public GitHub repository. So we're looking forward to start the contest. Yeah. And we'll be here available, you know, along the contest, along the way to answer any questions and provide information to help unleash the creativity of people all over the world and we hope to, we're looking forward to seeing what people will create. That's awesome and the things that's neat is that you start off by telling us you're not just limited by D3, you can draw stuff into the canvas, you can use WebGL or something else. I don't know what else there is, but you can use whatever you like to make whatever kind of visualizations you want. - Correct. - That's fantastic. Well, thanks so much for spending some time with us. Thank you for having us. Again, the contest and to learn more, you just to, microsoft/powerbi-visuals and go to I think you can start your own free account. Yes. Tell us about that for a second. So for the free account for Power BI? - Uh, uh. - Yes. So, you can find on the actually how to create your account and how to get your subscriptions to Power BI service and for GitHub it's just, you know, usually GitHub repositories that practically you need to have an account there and you just ideally fork our repository and get started there and we look forward to see everyone's creations. Well, you have everything you need to get started and win some money. So, thanks so much for spending some time with us. Thanks so much for watching and we'll see you next time. - Take care. - Thank you.

Video Details

Duration: 20 minutes and 11 seconds
Language: English
License: Dotsub - Standard License
Genre: None
Views: 1
Posted by: csintl on Sep 25, 2015

We are excited to introduce the preview of the Power BI Developer Tools! This video introduces the goals and tools you can use to create your own custom visual.

We are hosting a contest for the best custom visuals. Visit to learn more.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.