Building an interactive map with D3 and Angular.js

[_pa...@anotherwebsite.org]

I'm building an interactive map with D3 and Angular.js:

http://lantern-ui.jit.su/app/index.html

This will be a real-time visualization of global activity on a peer-to-peer network, served by a local http server embedded in a desktop app. You and the peers you're connected to appear as points connected by great arcs. Countries are colored by the number and type of peers currently online there.

You can drag to rotate the globe and scroll to zoom.

Thanks to the power of D3 and Angular, this is all it took to make this:

https://github.com/getlantern/lantern-ui/blob/master/app/partials/vis.html

https://github.com/getlantern/lantern-ui/blob/master/app/js/vis.js

Angular is handling the creation and deletion of svg elements, and keeping the path data attributes up to date. And D3 is calculating all those paths.

The interactivity is terribly laggy. But if you comment out the <g id="countries">...</g> section, it's wonderfully responsive. Drag and zoom feel just like they do with Google Earth, except you can't see the countries anymore.

Is this just too much computation to expect these tools to be able to do in real time, i.e. is my only hope finding country boundary data at a much lower resolution, or would this be working better if I took a different approach?

Thanks for any suggestions.

[Peter Bacon Darwin]

What happens if you hard  code the countries in rather than getting AngularJS to generate them from the repeat?

I love the fact that you have lambda and phi in your code!

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[_pa...@anotherwebsite.org]

On Sun, Feb 24, 2013 at 2:44 PM, Peter Bacon Darwin <pe...@bacondarwin.com> wrote:

What happens if you hard  code the countries in rather than getting AngularJS to generate them from the repeat?

So rather than the ng-repeat="d in countryGeometries", something like this instead?

<path ng-fill="{{ fillByCountry['CA'] || countryBaseColor }}" class="CA" ng-d="{{ path(countryGeometries[38]) }}"/>

<path ng-fill="{{ fillByCountry['US'] || countryBaseColor }}" class="US" ng-d="{{ path(countryGeometries[226]) }}"/>

...

I tried this with just the US and responsiveness while dragging was good, but then I added Canada and already it got laggy. So I guess we can rule that out? Thanks so much for the idea though either way. If you have any more please let me know.

 

I love the fact that you have lambda and phi in your code!

Straight out of http://bl.ocks.org/mbostock/3795040. mbostock deserves all the credit!