Skip to main content
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Compete to become Power BI Data Viz World Champion! First round ends August 18th. Get started.

Reply
smpa01
Super User
Super User

How to render d3 charts in Power BI currently

‎02-16-2022 12:11 PM

@dm-p @v-viig 

 

I am trying to find out how can I render a d3.js scripted chart in Power BI

 

Sample HTML which works fine in the browser.

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D3 Page Template</title>
    <svg preserveAspectRatio="xMidYMid meet" viewbox="0 0 1280 720"></svg>
    <script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
</head>

<body>
    <script>
        const dummyData = [{
            x: 32,
            r: 10
        }, {
            x: 87,
            r: 20
        }, {
            x: 293,
            r: 30
        }];

        var svg = d3.select("svg");

        var circle = svg.selectAll("circle")
            .data(dummyData, function(d) {
                return d;
            });

        circle.enter().append("circle")
            .attr("cy", 60)
            .attr("cx", function(d) {
                return d["x"];
            })
            .attr("r", function(d) {
                return d["r"];
            });

        circle.exit().remove();
    </script>

</body>

</html>

 

 

@dm-p  can I use HTML Content to render this? I tried and failed when I used the above as the following measure. if it is possible and I wrote the measure wrongly, would be great if you can please help me out.

 

Measure = 
"<!DOCTYPE html>
<html lang=""en"">

<head>
    <meta charset=""UTF-8"">
    <meta http-equiv=""X-UA-Compatible"" content=""IE=edge"">
    <meta name=""viewport"" content=""width=device-width, initial-scale=1.0"">
    <title>D3 Page Template</title>
    <svg preserveAspectRatio=""xMidYMid meet"" viewbox=""0 0 1280 720""></svg>
    <script type=""text/javascript"" src=""https://d3js.org/d3.v7.min.js""></script>
</head>

<body>
    <script>
        // Your beautiful D3 code will go here
        const dummyData = [{
            x: 32,
            r: 10
        }, {
            x: 87,
            r: 20
        }, {
            x: 293,
            r: 30
        }];

        var svg = d3.select(""svg"");

        var circle = svg.selectAll(""circle"")
            .data(dummyData, function(d) {
                return d;
            });

        circle.enter().append(""circle"")
            .attr(""cy"", 60)
            .attr(""cx"", function(d) {
                return d[""x""];
            })
            .attr(""r"", function(d) {
                return d[""r""];
            });

        circle.exit().remove();
    </script>

</body>

</html>"

 

 

I know the other alternative is to create d3 powered custom visual which I don't want to do as I can't possibly convert all possible d3 codes into a custom viz.

 

The other alternative is to use d3PowerBIApp from the app store and I could not make the above measure to render out there as well.

@dm-p my real preference is to use the HTML content for this purpose if possible.

 

Thank you in advance. 

Did I answer your question? Mark my post as a solution!
Proud to be a Super User!
My custom visualization projects
Plotting Live Sound: Viz1
Beautiful News:Viz1, Viz2, Viz3
Visual Capitalist: Working Hrs
Message 1 of 5
5,998 Views
0
1 ACCEPTED SOLUTION
dm-p
Super User
Super User

‎02-16-2022 01:22 PM

Hi @smpa01,

As noted on the website, HTML Content doesn't support JavaScript. If you want to use D3 to its full potential, I'd suggest creating a custom visual. I have a blog post here (pt2) which may help with converting over existing code to a custom visual.

For your example, I notice you're only really using the DOM manipulation capabilities of D3 rather than things such as scaling, so you could do your example in HTML Content by writing a measure that creates the SVG elements and binds the data. Assuming your data is in a table called Test with the same columns as your example:

SVG Circles = 
VAR Circles =
    CONCATENATEX(
        'Test',
        "<circle cy='60' cx='" & 'Test'[x] & "' r='" & 'Test'[r]
            & "'/>"
    )
RETURN
    "<svg width='350'>" & Circles & "</svg>"

...which would result in the following output in the visual:

dmp_0-1645046229747.png

Alternatively, you can use Charticulator or Deneb to produce richer visual content without the overhead of writing a custom visual from scratch. Neither are D3, but they expose a reasonably broad grammar of graphics, which can be more convenient than coding. Deneb exposes the Vega and Vega-Lite languages (which can do a lot of common D3 use cases with much less code) and has the additional benefit of being certified.

Regards,

Daniel





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

Proud to be a Super User!


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




View solution in original post

Message 2 of 5
5,931 Views
4 REPLIES 4
dm-p
Super User
Super User

‎02-16-2022 01:22 PM

Hi @smpa01,

As noted on the website, HTML Content doesn't support JavaScript. If you want to use D3 to its full potential, I'd suggest creating a custom visual. I have a blog post here (pt2) which may help with converting over existing code to a custom visual.

For your example, I notice you're only really using the DOM manipulation capabilities of D3 rather than things such as scaling, so you could do your example in HTML Content by writing a measure that creates the SVG elements and binds the data. Assuming your data is in a table called Test with the same columns as your example:

SVG Circles = 
VAR Circles =
    CONCATENATEX(
        'Test',
        "<circle cy='60' cx='" & 'Test'[x] & "' r='" & 'Test'[r]
            & "'/>"
    )
RETURN
    "<svg width='350'>" & Circles & "</svg>"

...which would result in the following output in the visual:

dmp_0-1645046229747.png

Alternatively, you can use Charticulator or Deneb to produce richer visual content without the overhead of writing a custom visual from scratch. Neither are D3, but they expose a reasonably broad grammar of graphics, which can be more convenient than coding. Deneb exposes the Vega and Vega-Lite languages (which can do a lot of common D3 use cases with much less code) and has the additional benefit of being certified.

Regards,

Daniel





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

Proud to be a Super User!


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




Message 2 of 5
5,932 Views
smpa01
Super User
Super User
In response to dm-p

‎02-16-2022 01:36 PM

@dm-p  thank you very much for your detailed response.

 

I created a minimally reproducible example to seek your help that could have been rendered with HTML content differently. But that would not always be possible and there is literally no way to avoid javascript/d3 for this kind of advanced visual.

 

Again, thanks for posting the link as to how to develop custom viz if I choose to convert all my D3 creation (a lot of them currently) to power bi custom viz (not my preferred route; it means creating n X d3 custom viz). I assumed initially that rendering in Power BI would not be an issue before creating them.

 

I do have one follow up Q for you - I am trying to understand why HTML Content does not have the javascript capability? Does building an app currently prevents a developer to add the js engine to its app? I am simply trying to understand why? Or should I be hopeful of a future where you can add that capability? 

 

Looking forward to hearing from you.

 

Did I answer your question? Mark my post as a solution!
Proud to be a Super User!
My custom visualization projects
Plotting Live Sound: Viz1
Beautiful News:Viz1, Viz2, Viz3
Visual Capitalist: Working Hrs
Message 3 of 5
5,928 Views
0
dm-p
Super User
Super User
In response to smpa01

‎02-16-2022 01:46 PM

Hi @smpa01,

The HTML Content visual could potentially support JS but I don't feel that there would be an easy way to support features that can help creators with debugging code without a significant amount of work. The custom visual sandbox also has a lot of limitations so it would be very hard to identify, support and document all the known issues with JS.

As I develop my visuals in my free time and support them free of charge, this is something I don't have the bandwidth for so I will not be looking at adding this. You may be better approaching one of the other HTML visual vendors (Nova Silva or K-Team) to see if they have capacity to add support for JS in their versions.

You're of course welcome to fork HTML Content and add your own support for JS. You'd just need to change the visual GUID so that Power BI doesn't load my version from AppSource when you add your version to your reports.

Regards,

Daniel





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

Proud to be a Super User!


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




Message 4 of 5
5,924 Views
smpa01
Super User
Super User
In response to dm-p

‎02-16-2022 01:50 PM

@dm-p  many thanks !!!

Did I answer your question? Mark my post as a solution!
Proud to be a Super User!
My custom visualization projects
Plotting Live Sound: Viz1
Beautiful News:Viz1, Viz2, Viz3
Visual Capitalist: Working Hrs
Message 5 of 5
5,923 Views
0

Helpful resources

Announcements
August Power BI Update Carousel

Power BI Monthly Update - August 2025

Check out the August 2025 Power BI update to learn about new features.

August 2025 community update carousel

Fabric Community Update - August 2025

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

View All
Top Solution Authors
View All