Custom visual in Power Bi using D3.js

[Keerti Jain]

Hello,

i want to create a custom marimekko chart in power BI using D3 js but i am not able to create in power BI.

But on my local with sample data it is working.

on adding script in D3jsVisual control in power BI using Dataset it is not showing any chart in visual

please help

[Keerti Jain]

here is the script tag which i had used

var width = 960,

            height = 500,

            margin = 20;

        var x = d3.scale.linear()

            .range([0, width - 3 * margin]);

        var y = d3.scale.linear()

            .range([0, height - 2 * margin]);

        var z = d3.scale.category10();

        var n = d3.format(",d"),

            p = d3.format("%");

        var svg = d3.select("#chart").append("svg")

            .attr("width", width)

            .attr("height", height)

            .append("g")

            .attr("transform", "translate(" + 2 * margin + "," + margin + ")");

        pbi.dsv(function (error, data) {

            var offset = 0;

            // Nest values by segment. We assume each segment+market is unique.

            var segments = d3.nest()

                .key(function (d) { return d.segment; })

                .entries(data);

            // Compute the total sum, the per-segment sum, and the per-market offset.

            // You can use reduce rather than reduceRight to reverse the ordering.

            // We also record a reference to the parent segment for each market.

            var sum = segments.reduce(function (v, p) {

                return (p.offset = v) + (p.sum = p.values.reduceRight(function (v, d) {

                    d.parent = p;

                    return (d.offset = v) + d.value;

                }, 0));

            }, 0);

            // Add x-axis ticks.

           /* var xtick = svg.selectAll(".x")

                .data(x.ticks(10))

                .enter().append("g")

                .attr("class", "x")

                .attr("transform", function (d) { return "translate(" + x(d) + "," + y(1) + ")"; });

            xtick.append("line")

                .attr("y2", 6)

                .style("stroke", "#000");

            xtick.append("text")

                .attr("y", 8)

                .attr("text-anchor", "middle")

                .attr("dy", ".71em")

                .text(p);

            // Add y-axis ticks.

            var ytick = svg.selectAll(".y")

                .data(y.ticks(10))

                .enter().append("g")

                .attr("class", "y")

                .attr("transform", function (d) { return "translate(0," + y(1 - d) + ")"; });

            ytick.append("line")

                .attr("x1", -6)

                .style("stroke", "#000");

            ytick.append("text")

                .attr("x", -8)

                .attr("text-anchor", "end")

                .attr("dy", ".35em")

                .text(p);*/

            // Add a group for each segment.

            var segments = svg.selectAll(".segment")

                .data(segments)

                .enter().append("g")

                .attr("class", "segment")

                .attr("xlink:title", function (d) { return d.key; })

                .attr("transform", function (d) { return "translate(" + x(d.offset / sum) + ")"; });

            // Add a rect for each market.

            var markets = segments.selectAll(".market")

                .data(function (d) { 

return d.values; 

})

                .enter().append("a")

                .attr("class", "market")

                .attr("xlink:title", function (d) { return d.market + " " + d.parent.key + ": " + n(d.value); })

                .append("rect")

                .attr("y", function (d) { 

return y(d.offset / d.parent.sum); 

})

                .attr("height", function (d) { 

return y(d.value / d.parent.sum); })

                .attr("width", function (d) { 

if(d.market == "Auburn, AL")

return 360;

else

return x(d.parent.sum / sum);

})

                .style("fill", function (d) {

if(d.value == "1920")

return "#eeeeee";

else

return z(d.market); 

});

        });