2

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

MMH
  • 21
  • 1
  • You might update the question to give an indication of how many `dots` you are rendering/ animating? This article suggest using d3 with `` will handle 10x as many datapoints as with `` then expands on more complex alternatives: https://blog.scottlogic.com/2020/05/01/rendering-one-million-points-with-d3.html – Robin Mackenzie Jun 27 '21 at 04:55

0 Answers0