i am trying to port a D3 code on powerbi but it keeps giving me a blank display without showing any error:
this is my original D3 code tested working on html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Histogram with D3.js</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
/* Add any CSS styles here */
.bar {
fill: steelblue;
}
</style>
</head>
<body>
<div id="histogram"></div>
<script>
// Load the CSV file
d3.csv("unemployment-x.csv").then(function(data) {
// Convert data values to numbers if necessary
data.forEach(function(d) {
d.rate = +d.rate; // Assuming "rate" is the column name containing numerical values
});
// Set up dimensions for the histogram
var margin = {top: 20, right: 30, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// Create SVG element for the histogram
var svg = d3.select("#histogram")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Create histogram scale
var x = d3.scaleLinear()
.domain([0, d3.max(data, function(d) { return d.rate; })])
.range([0, width]);
// Generate histogram bins
var bins = d3.histogram()
.value(function(d) { return d.rate; })
.domain(x.domain())
.thresholds(20) // Adjust the number of bins as needed
(data);
// Create y scale
var y = d3.scaleLinear()
.domain([0, d3.max(bins, function(d) { return d.length; })])
.range([height, 0]);
// Create bars for the histogram
svg.selectAll(".bar")
.data(bins)
.enter().append("rect")
.attr("class", "bar")
.attr("x", 1)
.attr("transform", function(d) { return "translate(" + x(d.x0) + "," + y(d.length) + ")"; })
.attr("width", function(d) { return x(d.x1) - x(d.x0) - 1; })
.attr("height", function(d) { return height - y(d.length); });
// Add x axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add y axis
svg.append("g")
.call(d3.axisLeft(y));
});
</script>
</body>
</html>
my data is like this and i am trying to plot an histogram of unemployement rates frequency:
id,state,county,rate
1001,Alabama,Autauga County,5.1
1003,Alabama,Baldwin County,4.9
1005,Alabama,Barbour County,8.6
1007,Alabama,Bibb County,6.2
1009,Alabama,Blount County,5.1
To integrate this code with power bi i had to install D3js extension version 3.5 and had to get rid of the html part:
var margin = {top: 20, right: 30, bottom: 30, left: 40},
width = pbi.width - margin.left - margin.right,
height = pbi.height - margin.top - margin.bottom;
// Create SVG element for the histogram
var svg = d3.select("#histogram")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Create histogram scale
var x = d3.scale.linear()
.range([0, width]);
// Generate histogram bins
var bins = d3.layout.histogram()
.thresholds(20);
// Create y scale
var y = d3.scale.linear()
.range([height, 0]);
// Load the CSV file
pbi.csv(type,function(data) {
x.domain([0, d3.max(data, function(d) { return d.rate; })])
bins.value(function(d) { return d.rate; })
.domain(x.domain())
(data);
y.domain([0, d3.max(bins, function(d) { return d.length; })])
// Create bars for the histogram
svg.selectAll(".bar")
.data(bins)
.enter().append("rect")
.attr("class", "bar")
.attr("x", 1)
.attr("transform", function(d) { return "translate(" + x(d.x0) + "," + y(d.length) + ")"; })
.attr("width", function(d) { return x(d.x1) - x(d.x0) - 1; })
.attr("height", function(d) { return height - y(d.length); });
// Add x axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.svg.axis().scale(x).orient("bottom"));
// Add y axis
svg.append("g")
.call(d3.svg.axis().scale(y).orient("left"));
});
function type(d) {
d.rate = +d.rate;
return d;}
Anyone can help me on this ? or suggest a better way for debugging?