I am creating a project at the moment where I need to draw large amounts of data on a d3 map. My current solution operates but is quite sluggish at times especially on less powerful CPU's. I am looking for a way to make my generated data points more efficient. I attempted to simulate a fire on a map.
Do y'all have any suggestions on how to make this generation more efficient and reduce lag?
function drawPlot(data) {
//draw the plot again
var locations = svg.selectAll(".location")
.data(data);
//Add placeholder image in tooltip
var string = "<img src= "+ yourImagePath +" />";
// if filtered dataset has more circles than already existing, transition new ones in
var dots = locations.enter()
.append("circle")
.attr("class", "location orange flame")
.attr("cx", function(d){ return projection([parseFloat(d.longitude) + ((Math.random() > 0.5) ? ((-1) * Math.random()) / 2 : Math.random() / 2),parseFloat(d.latitude)+0.5])[0] })
.attr("cy", function(d){ return projection([d.longitude,parseFloat(d.latitude) + 0.5 + ((Math.random() > 0.5) ? ((-1) * Math.random()) / 2 : Math.random() / 2)])[1] })
.style("fill", function(d) { return myScale2(d.incident_date_created)})
.style("stroke", function(d) { return myScale2(d.incident_date_created)})
.style("opacity", function(d) {return 2*myScale1(d.fire_duration)})
dots.attr("r", function(d){if(formatDate(d.incident_date_created)==handle.attr("text")){return myScale(20*d.incident_acres_burned)} else{return 0}})
.transition()
.duration(function (d) {
if (d.fire_duration < 200) {
d.fire_duration = 200
} else if (d.fire_duration > 1000) {
d.fire_duration = 1000
}
return d.fire_duration* SPEED_CONSTANT / MULTI
})
.attr("r", 25)
.transition()
.attr("r", 0)
Thanks :)