Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.

Reply
BrentonC
Helper I
Helper I

Learning material for custom visual.

Hello, I have created a custom visual and it works! Although I have just been stubling along to get it working, I am firmilular with python, java, a little bit of C# and some other languages. I have got 0 experience with Typescript or javascript/node js. Could someone tell me know what I should be focus on learning to understand the fundamentals of what is going on, for example the svg elements and everything else that goes along with it. Should I be learning javascript, d3, typescript or whatever else?

 

Thank you

Brenton Collins

1 ACCEPTED SOLUTION
dm-p
Super User
Super User

Hi @BrentonC,

Glad to see you're having success! The biggest challenge w/custom visuals (apart from the sheer patience in developing) is the number of possibilities out there in terms of frameworks and design decisions you can take to achieve the same result, so there's no 100% correct answer.

I come from a mixed background and had some experience with D3 prior to learning custom visuals, so I have naturally tended towards that. Some of the Power BI tools provided by the custom visuals team have a D3-leaning as well, but it ultimately comes down to what your visual is needing to do. For instance, I'm looking at building something right now using React and very little reliance on D3.

Anyway... for me the biggest challenge was taking JS code and applying to TS, as TS is (rightly) much stricter with typing. TBH I'm trying to use TS for most projects now where I would have used JS previously as I like it so much.

In terms of custom visual-specific learning, there isn't much, so for me, upskilling has been a matter of using the following as best I can:

  • Right here in the Power BI community - although there aren't many of us here answering custom visual questions, there are quite a lot of posts dotted about, and one of the ways I learn is to try and find solutions to others' questions.
  • The new MS doc for visuals development (if you haven't seen it) is better than the older stuff but still light on examples. I have made a lot of what's there work though.
  • This YouTube playlist uses and older version of the visuals SDK so some work might be required to port code, but it's an incredible resource if you want to see things working.
  • A lot of authors open-source their visuals and you can use these to see some of the concepts played out. Here's a post with some of the MS ones. Also feel free to have a look through my GitHub repos for anything you might find handy.

I have a blog that I try to contribute some custom visual-specific content to, but most of the time I put most content on posts in this forum. I'm also currently working on a Power BI visuals development course for RADACAD, which is expected to be out... soon. Probably next month if everything lines up properly.

For general web dev and custom visuals, I've found the following essential:

  • TypeScript's reference manual, to understand how the ecosystem hangs together and when to use TS-specifics rather than JS.
  • W3Schools for re-educating me about pretty much anything fundamental WRT web development. Also contains some good guides for common frameworks such as Bootstrap and Angular (which you absolutely can use in custom visuals).
  • Observable (of which Mike Bostock, creator of D3 has a huge hand in) is great for lots of live examples using popular frameworks, and can be used as a jumping-off point for prototyping and finding loads of great modern D3 examples, including tutorials, if D3 is what you're backing.
  • What NPM is and how you should manage your packages. I personally have switched-over to yarn for my bigger projects but was using NPM quite happily for a long time (and still do in some places).
  • If you want to get really into things under the hood, you can have a look into webpack, which is the bundling system used to testing and packaging custom visuals. you can then use the webpack plugin to override the defaults and make even more libraries and frameworks available to your visual.
  • Google and Stack Overflow 😛 You can find good quality answers to pretty much any web dev-based question I've ever had.

This is all I have off the top of my head and I hope that you might find some use in it. I'd love to know if anyone else has other resources they've learned from too 🙂

Cheers,

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




View solution in original post

2 REPLIES 2
dm-p
Super User
Super User

Hi @BrentonC,

Glad to see you're having success! The biggest challenge w/custom visuals (apart from the sheer patience in developing) is the number of possibilities out there in terms of frameworks and design decisions you can take to achieve the same result, so there's no 100% correct answer.

I come from a mixed background and had some experience with D3 prior to learning custom visuals, so I have naturally tended towards that. Some of the Power BI tools provided by the custom visuals team have a D3-leaning as well, but it ultimately comes down to what your visual is needing to do. For instance, I'm looking at building something right now using React and very little reliance on D3.

Anyway... for me the biggest challenge was taking JS code and applying to TS, as TS is (rightly) much stricter with typing. TBH I'm trying to use TS for most projects now where I would have used JS previously as I like it so much.

In terms of custom visual-specific learning, there isn't much, so for me, upskilling has been a matter of using the following as best I can:

  • Right here in the Power BI community - although there aren't many of us here answering custom visual questions, there are quite a lot of posts dotted about, and one of the ways I learn is to try and find solutions to others' questions.
  • The new MS doc for visuals development (if you haven't seen it) is better than the older stuff but still light on examples. I have made a lot of what's there work though.
  • This YouTube playlist uses and older version of the visuals SDK so some work might be required to port code, but it's an incredible resource if you want to see things working.
  • A lot of authors open-source their visuals and you can use these to see some of the concepts played out. Here's a post with some of the MS ones. Also feel free to have a look through my GitHub repos for anything you might find handy.

I have a blog that I try to contribute some custom visual-specific content to, but most of the time I put most content on posts in this forum. I'm also currently working on a Power BI visuals development course for RADACAD, which is expected to be out... soon. Probably next month if everything lines up properly.

For general web dev and custom visuals, I've found the following essential:

  • TypeScript's reference manual, to understand how the ecosystem hangs together and when to use TS-specifics rather than JS.
  • W3Schools for re-educating me about pretty much anything fundamental WRT web development. Also contains some good guides for common frameworks such as Bootstrap and Angular (which you absolutely can use in custom visuals).
  • Observable (of which Mike Bostock, creator of D3 has a huge hand in) is great for lots of live examples using popular frameworks, and can be used as a jumping-off point for prototyping and finding loads of great modern D3 examples, including tutorials, if D3 is what you're backing.
  • What NPM is and how you should manage your packages. I personally have switched-over to yarn for my bigger projects but was using NPM quite happily for a long time (and still do in some places).
  • If you want to get really into things under the hood, you can have a look into webpack, which is the bundling system used to testing and packaging custom visuals. you can then use the webpack plugin to override the defaults and make even more libraries and frameworks available to your visual.
  • Google and Stack Overflow 😛 You can find good quality answers to pretty much any web dev-based question I've ever had.

This is all I have off the top of my head and I hope that you might find some use in it. I'd love to know if anyone else has other resources they've learned from too 🙂

Cheers,

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




Thank you for the detailed reply, this information definitely gives me somewhere to start. Yes, I agree I have had trouble finding some answers specific to custom visuals, although this community has definitely helped me across the line when I get stuck.

 

I will spend some time going over the content and keep improving my current visual, once I get a little more knowledge I will be able to pay back the favour by answering questions, the business I am working for at the moment has a huge drive with Power BI reporting at the moment, I think the next 6 months at least will be focused on that and throwing in a custom visual every now and then.

Thanks again, I'm sure this post will help many others on the same journey as myself.

 

Brenton Collins

Helpful resources

Announcements
Microsoft Fabric Learn Together

Microsoft Fabric Learn Together

Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City

PBI_APRIL_CAROUSEL1

Power BI Monthly Update - April 2024

Check out the April 2024 Power BI update to learn about new features.

April Fabric Community Update

Fabric Community Update - April 2024

Find out what's new and trending in the Fabric Community.