performance tuning: canvas map instead of svg

[mef]

Looks like the svg map quickly gets heavy on the browser. canvas to be used instead.

Read also: d3-geo doc.

Related issue: #81

[mef]

Looks like all points are redrawn whenever a new tweet appears, fixing the .enter selection maybe solve the performance problem, without requiring a switch to canvas...

test with:

        pointsLayer.data(pointsData)
            .enter()
            .append('circle')
            .attr('cx', function(d) {
                return projection(d)[0]
            })
            .attr('cy', function(d) {
                return projection(d)[1]
            })
            .attr('fill', '#008000')
            .attr('r', '0')
            .attr('class', 'tweet')
            .attr('opacity', 0)
            .transition()
            .ease(d3.easeElasticInOut)
            .attr('r', '5')
            .attr('opacity', 1)
            .transition()
            .attr('r', '1.5')
            .attr('opacity', .2)

[mef]

perf problem looks to be solved by the correction committed, no need to switch to canvas, closing the issue.

[PanosSynetos]

Hey @mef . I've created a new branch for this . No matter what I try, I cannot make it draw anything. I believe that it is related to the topojson.feature at line 73 of map.js

Do you see something I don't see?

[mef]

It gives me this error:

Error: Cannot find module 'topojson' from '/home/c-user/development/twitto_be/view'

[mef]

Forget previous msg, I'll do npm install

[PanosSynetos]

There was some progress

• Converted GeoJSON to TopoJson with http://mapstarter.com/
• One of the reasons that it was not rendering was that I already had the canvas in the ejs file. Once I appended a canvas with d3, then the rendering started

@mef if you want have a look at the sizes and resizes. Had enough for today, but I loved it :)

[mef]

Converted GeoJSON to TopoJson with http://mapstarter.com/

This was un-necessary overhead, I removed it. What topojson.feature(orlando, orlando.objects.collection) was doing was actually converting from topoJSON to geoJSON.

One of the reasons that it was not rendering was that I already had the canvas in the ejs file. Once I appended a canvas with d3, then the rendering started

Nice catch :)

P.S. I renamed the branch with -wip suffix, sorry I couldn't help ;)

[mef]

@11digitlabs There is a risk that map dots get sent to client before the download of belgian-provinces.json. In such case, would the map background be drawn on top of the dots?

You may want to bundle the Belgian provinces data inside by requiring it inside map.js, instead of using d3.json (as it was done before), otherwise incorporate a logic ensuring that map never gets wrong, whichever order the data is received. By the way, it would be more homogeneous to use io.emit the map data, rather than pulling it via d3.json ajax call...

[mef]

Hey @11digitlabs I think we're getting there.

Have a look inside branch issue-84...-wip and let me know what you think.

I haven't had the occasion to test on a large dataset yet.

[mef]

Results from the comparison of various configurations, using 13000 dots on the map:

svg:

• drawing dots in svg is CPU-intensive, and after the rendering is done, CPU consumption remains constantly high, even if no update is performed, and no listenerat all is set.
• converting the inline styling inside css file does has no effect on the problem above
• disabling the animated transition for entering dots selection has no effect on the problem above
• whenever a new dot is displayed, only the dot's area is repainted, not the full svg.

canvas:

• drawing the map dots as canvas instead of svg does not generate the constant 100% CPU consumption problem
• adding a dot to the canvas causes a repaint of the whole map, causing 100% cpu consumption for too many seconds.
• simplifying the animation by removing the delay effect, and animating only the opacity change, still is too heavy on CPU
• canvas map behaves correctly when the animation is disabled. However, it does not allow the visitors to easily spot the new dots.

[mef]

Going for the solution of switching to canvas without animations for the moment.

[mef]

@11digitlabs FYI I've disabled the animations and leave as is for the moment. Merged into 2.2.0-wip. We'll open another issue is we have a better solution in the future...