Showing results for 
Search instead for 
Did you mean: 
Not applicable

How can we build a custom visual using D3.js(Wt r prerequisites to build a custom visual using D3.js

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.

Super User
Super User

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.



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)

Frequent Visitor

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.
Power BI on Mac


Helpful resources

May 2023 update

Power BI May 2023 Update

Find out more about the May 2023 update.

Submit your Data Story

Data Stories Gallery

Share your Data Story with the Community in the Data Stories Gallery.

Top Solution Authors
Top Kudoed Authors