My scatterplot circles appear to be behind the graph, and I can't figure out how to bring them to the front. Can anyone help me with this issue?
Even though the inspection shows that the circles are there, they are not visible on the plot.
scatterplot.js
d3.csv('NetflixOriginals.csv').then(function(data) {
var csvg = d3.select("body").append("div").attr("id", "circles")
.append("svg");
var circles = csvg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d) {
var date = new Date(d["Premiere"]);
var cx = scaleDate(date);
var cy = scaleIMDB(d["IMDB Score"]) - 300;
return "translate(" + cx + " " + cy + ")";
})
.append("circle")
.attr("cx", 1)
.attr("cy", 1)
// .attr("cx", function(d) {
// var date = new Date(d["Premiere"]);
// return scaleDate(date);
// })
// .attr("cy", function(d) {
// return scaleIMDB(d["IMDB Score"]);
// })
.attr("r", 3.5)
.style("fill",function(d) {
if (d["IMDB Score"] > 7.5) {
return "orange";
} else {
return "blue";
}
});
});
function scaleDate(date) {
return dateScale(date);
}
function scaleIMDB(imdb) {
return imdbScale(imdb);
}
var dateScale = d3.scaleTime()
.domain([new Date(2015, 0, 1), new Date(2022, 0, 1)]).range([60,700]);
var imdbScale = d3.scaleLinear()
.domain([1,10]).range([340,20]);