How to make drawing data on a d3 map more efficient JavaScript

Viewed 72

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 :)

0 Answers
Related