Leaflet.js+animated Circles

[pere roca ristol]

I am trying to plot circles in Leaflet.js (a webmapping app), following http://bost.ocks.org/mike/leaflet/ seems not to be dificult, but I'm having strange problems :.( that you can see here: http://bl.ocks.org/3047025

In fact here you can see simple circles and works fine if zooming (double click on map) and so on. But I want these features to be circles instead of paths. I think it is not possible (?)

I would like to have circles so I can apply transitions (from radius 0 to X, change color, gravities), events and so on.

Are these transitions in Circles+Leaflet.js possible?? as far as I tested, with paths it is not.

thanks in advance,

Pere

[Scott Murray]

There's no reason you shouldn't be able to use circles instead of paths. Right now, it looks like you're loading in GeoJSON data as points with lat/lon values. The "point" features are being interpreted from GeoJSON and expressed as paths.

You might want to try something even simpler: Load your data not as GeoJSON features, but just a simple CSV file with this data in each row:

lat lon value

Then use D3 to generate a <circle> for each row, place it at the given lat/lon, and scale the radius proportionally with the value.

Scott

[pere roca ristol]

 hi there, thanks Scott

 in fact if its possible i would prefer very much using GeoJSON.

 I am not able to do what feature.attr("d", path) does for Paths but for circles. That is, correctly positioning the generated Circles. 

 In fact this bl.ocks (http://bl.ocks.org/3058935)  may seems to work, but if you zoom in/out a little you see that points are not correctly placed. It should look like this block (http://bl.ocks.org/3047025), that correctly works but for Paths.

  Any ideas? i am stucked :.(

[Ziggy Jonsson]

Just forked your code to use the leaflet native SVG layer, instead of the custom one.  Also let circles retain their absolute size by diving radius by 2^zoom

Seems to work:  http://bl.ocks.org/3087431 

[pere roca ristol]

 yeah, this is great! now I can do cool transitions over circles.

 thank you!!

 Pere

2012/7/11 Ziggy Jonsson <ziggy.jo...@gmail.com>

[hezron]

Hi,

I can't seem to perform any animations on the circles. Any luck? I've bound the circles to a mouseover and mouseout event handlers and a console log within the handlers fires successfully but the attribute changes don't appear. Disclaimer, I'm fairly new to d3 so forgive me if I'm missing something basic.

   d3.json("taxa_json.json", function(collection) {
      // Other code here
      var feature = g.selectAll("circle")
          .data(collection.features)
           // Other code here
          .style("stroke", "white")
          .on("mouseover", mouseover)
          .on("mouseout", mouseout);
          // Other code here
      update();
    });
    function mouseover(d, i) {
      console.log("Mouse over ", d, i);
      d3.select(this)
          .attr("fill", "brown")
          .attr("stroke", "grey");
    }
   
    function mouseout(d, i) {
      //console.log("Mouse out ", d, i);
      d3.select(this)
          .attr("fill", "orange");
    }

The handlers were taken off the hello event example.

hezron

[pere roca ristol]

 see an example in action here: http://bl.ocks.org/3058935

 the problem is that you did not initially attach using d3.js the attributes to the circles that you want to change later (when mouseovering).

 hope it helps,

 Pere

[hezron]

thanks, works perfectly now.. you gave me a fundamental lesson that would have caused more problems later on had I not known of it now.

cheers!
hezron