topic Re: How to render d3 charts in Power BI currently in Custom Visuals Development Discussion

How to render d3 charts in Power BI currently

smpa01 — Wed, 16 Feb 2022 20:14:10 GMT

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.

Re: How to render d3 charts in Power BI currently

dm-p — Wed, 16 Feb 2022 21:22:11 GMT

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:

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

Re: How to render d3 charts in Power BI currently

smpa01 — Wed, 16 Feb 2022 21:36:42 GMT

@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.

Re: How to render d3 charts in Power BI currently

dm-p — Wed, 16 Feb 2022 21:46:47 GMT

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

Re: How to render d3 charts in Power BI currently

smpa01 — Wed, 16 Feb 2022 21:50:45 GMT

@dm-p many thanks !!!