Check your eligibility for this 50% exam voucher offer and join us for free live learning sessions to get prepared for Exam DP-700.
Get StartedDon't miss out! 2025 Microsoft Fabric Community Conference, March 31 - April 2, Las Vegas, Nevada. Use code MSCUST for a $150 discount. Prices go up February 11th. Register now.
I wanted to build a custom visual using D3.js.
How to integrate power BI visuals ( power BI dataset) with D3.js.
Can anyone please help me out .I don't know how to start that complex visual using D3.js
Much thanks! in advance.
Hi @Anonymous,
If you're looking to learn D3 and/or have little experience with web development before embarking on developing a Power BI custom visual, then you are probably better starting with resources elsewhere that are more focused on this, such as the Learn D3 publication on Observable, or Codecademy's free course.
If you want an example that illustrates how to integrate D3 with Power BI, it's probably best to start with the developer documentation, but you can also look at the sample bar chart repo that MS provides. This contains the necessary integrations with the dataset including tooltips, properties and cross-filtering. I also have a repository here that supports a course I have written for Power BI that uses D3 (in my signature if you are interested), but the providers have allowed me to open-source it, and this may give you some further context.
Note that custom visuals do require a lot of overhead to wire things up and you may also need to write additional logic to make your D3-based code handle scenarios like dynamic property binding and responsiveness, as these are typically not used when folks build static D3 visuals elsewhere (so it can be straigthforward to get a basic D3 example up and running, but most of your time goes into making a visual fit in to Power BI). If you want a simple example without all the bells and whistles, I have a simple two part series here on how you may approach this with an existing D3 example you might find elsewhere.
Alternatively, if this seems like too large a task for what you are doing, you could try Deneb, which allows you to use Vega or Vega-Lite inside Power BI to design visuals more quickly. This has the benefit of being certified (which is a process you need to go through if you are developing your own custom visual and want this as an outcome). Similarly, you can look at visuals like Charticulator or PlotlyJS, which are more UI-driven.
Regards,
Daniel
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)
Hi Bindu_tamidla, I'm also interested in that topic. I'm not an expert and so far I've used R and Python with third-party code and made some basic customizations. I'd like to take advantage of the D3 graphics library and use it in my reports. From my limited experience, for R and Python, I've needed to install libraries (the program itself tells you if you don't have them installed). Unfortunately, I didn't progress further because my clients didn't approve its use with their security protocols. I mention this so you are aware of it. I think with D3 you could try inserting the code of a D3 visualization that you're interested in into the component that Power BI provides. Sorry that I can't be of more help at the moment. I hope someone can provide more guidance. I'm really interested in the topic.
Ryan.
Power BI on Mac
March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount!
Check out the January 2025 Power BI update to learn about new features in Reporting, Modeling, and Data Connectivity.