Maps and geoJSON ;)

[daniele galiffa]

Hello all,
I'm posting here because it seems that something is wrong with the following things.

I got a zip archive containing the shape files from here:

http://www.istat.it/ambiente/cartografia/generalizzati/2011/reg2011_g.zip

then I tried to export it to a geoJSON file using the following tool:

http://mygeodata.eu/apps/converter/main_EN.html?dataType=vector

Unfortunally the file size is very huge, so I needed to reduce the quality of the file.

For this I:

* I unzipped the shape file to get the .shp file ( reg2011_g.shp)

* I uploaded it to http://mapshaper.com/test/demo.html

* I exported (at 90% of scaling) the shapefiles (both .shp and .shx files) into a folder ("resamples_geodata")

Then:

* created the "resampled_geodata.zip" archive

* I went back to http://mygeodata.eu/apps/converter/main_EN.html?dataType=vector

* I uploaded the resampled_geodata.zip"

* I converted it to geoJSON using the Google Mercator Projection

I used the geoJSON result file into a simple D3 visualization as the following:

var xy = d3.geo.mercator(),
    path = d3.geo.path().projection(xy);

d3.select("body")
  .append("svg:svg")
  .append("svg:g")
    .attr("id", "regions");

d3.json("data/myGeoFile.json", function(p_data)
{
  d3.select("#regions")
    .selectAll("path")
      .data(p_data.features)
    .enter().append("svg:path")
      .attr("d", path);
});

Unfortunally I got strange errors into Javascript (captured by the firebug console).

I attach the geoJSON file to this message.

Thanks,
daniele

[Bixente]

Hi Daniele,

It looks like your coordinates are not correct. For example, the first
ones are [475819.524467, 5015688.653012] but they should be
[47.5819524467, 50.15688653012].

Bixente

On Jun 15, 8:47 pm, daniele galiffa <daniele.mentegraf...@gmail.com>
wrote:

> Hello all,
> I'm posting here because it seems that something is wrong with the following
> things.
>
> I got a zip archive containing the shape files from here:
>

> http://www.istat.it/ambiente/cartografia/generalizzati/2011/reg2011_g...

>
> then I tried to export it to a geoJSON file using the following tool:
>
> http://mygeodata.eu/apps/converter/main_EN.html?dataType=vector
>
> Unfortunally the file size is very huge, so I needed to reduce the quality
> of the file.
>
> For this I:
>
> * I unzipped the shape file to get the .shp file ( reg2011_g.shp)
>

> * I uploaded it tohttp://mapshaper.com/test/demo.html

>
> * I exported (at 90% of scaling) the shapefiles (both .shp and .shx files)
> into a folder ("resamples_geodata")
>
> Then:
>
> * created the "resampled_geodata.zip" archive
>

> * I went back tohttp://mygeodata.eu/apps/converter/main_EN.html?dataType=vector

>
> * I uploaded the resampled_geodata.zip"
>
> * I converted it to geoJSON using the Google Mercator Projection
>
> I used the geoJSON result file into a simple D3 visualization as the
> following:
>
> var xy = d3.geo.mercator(),
>     path = d3.geo.path().projection(xy);
>
> d3.select("body")
>   .append("svg:svg")
>   .append("svg:g")
>     .attr("id", "regions");
>
> d3.json("data/myGeoFile.json", function(p_data)
> {
>   d3.select("#regions")
>     .selectAll("path")
>       .data(p_data.features)
>     .enter().append("svg:path")
>       .attr("d", path);
>
> });
>
> Unfortunally I got strange errors into Javascript (captured by the firebug
> console).
>
> I attach the geoJSON file to this message.
>
> Thanks,
> daniele
>

>  myGeoFile.json
> 40KViewDownload

[daniele galiffa]

Ok...so it seems that the problem could be into the geoJSON exporter.

Ok,
I'll investigate further and I'll post back it here

Thanks,
d.

[daniele galiffa]

Ciao Bixente,
I tried to convert the coordinates X and Y dividing them for 10.000
by using the following:


d3.json("myGeoFile.json", function(p_data)
{
    p_data.features.forEach(function (d,p_i)
    {
        console.log("FEATURES " + p_i) ;
        var coordinates = d.geometry.coordinates ;
        coordinates.forEach(function (c, p_index)
        {
            var oldC = c.toString() ;
            var vars = oldC.split(",") ;
            var str = "" ;
            vars.forEach(function (v, p_indexC)
            {
                newV = v / 10000 ;
                str += newV  + "," ;
            });
           
            if(str.length > 0)
                str = str.substring(0,str.length-2) ;
               
            p_data.features[p_i].geometry.coordinates[p_index] = str ;
        });
    });
    console.log(p_data.features) ;
   

  d3.select("#states")

    .selectAll("path")
      .data(p_data.features)
    .enter().append("svg:path")
      .attr("d", path);
});

Unfortunally I get the same error into firebug :(

Do you know what could be?

Thanks,
d.



collection.features.forEach(function (d,p_i)
    {
        console.log("FEATURES " + p_i) ;
        var coordinates = d.geometry.coordinates ;
        coordinates.forEach(function (c, p_index)
        {
            var oldC = c.toString() ;
            var vars = oldC.split(",") ;
            var str = "" ;
            vars.forEach(function (v, p_indexC)
            {
                newV = v / 10000 ;
                str += newV  + "," ;
            });
           
            if(str.length > 0)
                str = str.substring(0,str.length-2) ;
               
            collection.features[p_i].geometry.coordinates[p_index] = str ;
        });
    });

--
dott. Daniele Galiffa | VISup srl
via Archimede 45
20129 Milano

www.visup.it

mobile    +39 335 57 53 078
phone      +39 02 91 43 30 86
fax    +39 02 91 43 30 93

[daniele galiffa]

Actually I'm able to render something,
simply correcting a bad error into my aglorithm:

d3.json("myGEOFile.json", function(p_data)
{
    p_data.features.forEach(function (d,p_i)
    {

        var coordinates = d.geometry.coordinates ;
        coordinates.forEach(function (c, p_index)
        {

            c.forEach(function (v, p_indexC)
            {
                newX = v[0] / 10000 ;
                newY = v[1] / 10000 ;
               
                p_data.features[p_i].geometry.coordinates[p_index][p_indexC][0] = newX ;
                p_data.features[p_i].geometry.coordinates[p_index][p_indexC][1] = newY ;
            });
        });
    });
    //  console.log(p_data.features) ;

   

  d3.select("#states")
    .selectAll("path")
      .data(p_data.features)
    .enter().append("svg:path")
      .attr("d", path);
});

Now the point is how to configure the represention beeing centerd on my coordinates?

Thanks,
d.

[Mike Bostock]

> Now the point is how to configure the represention beeing centerd on my
> coordinates?

You can use d3.geo.path, which has a centroid method, to compute the
centroid of a particular GeoJSON shape. You can also use d3.geo.bounds
to compute the bounding box of the shape and zoom to that.

Mike

[Mike Bostock]

Also, I recommend editing the albers (or mercator, or azimuthal)
example in the git repository, replacing the world countries file with
your own GeoJSON file. Then you can use the sliders in the example to
figure out the appropriate projection settings to zoom in on the
feature of interest.

Mike

[daniele galiffa]

Ciao Mike,
thanks for your replies.

Actually we figured out that the problem was the exporter.

So we used GDAL using the following:

ogr2ogr -f "GeoJSON" myGeoFile.json myGeoFile-polygons-ms1.shp --debug on

On the other hand we also started from the example,
but we are getting errors like:

xy.parallels is not a function

We are investigating why :)

If I don't find nothing,
I'll ask to the list...otherwise I'll post the solution here ;)

Thanks,
d.

[daniele galiffa]

Ok,
everything seems fine now that I edited the geo.js.

This is the editing I did for the mercator projection,
but maybe most of them are not needed (I'm not GIS expert):


var d3_radians = Math.PI / 180;
d3.geo.mercator = function()
    var origin = [0, 0],
      parallels = [29.5, 45.5],
      scale = 1000,
      translate = [480, 250],
      lng0, // d3_radians * origin[0]
      n,
      C,
      p0;

  function mercator(coordinates) {
    var x = (coordinates[0]) / 360,
        y = (-180 / Math.PI * Math.log(Math.tan(Math.PI / 4 + coordinates[1] * Math.PI / 360))) / 360;
    return [
      scale * x + translate[0],
      scale * Math.max(-.5, Math.min(.5, y)) + translate[1]
    ];
  }
 
 
  function reload() {
    var phi1 = d3_radians * parallels[0],
        phi2 = d3_radians * parallels[1],
        lat0 = d3_radians * origin[1],
        s = Math.sin(phi1),
        c = Math.cos(phi1);
    lng0 = d3_radians * origin[0];
    n = .5 * (s + Math.sin(phi2));
    C = c * c + 2 * n * s;
    p0 = Math.sqrt(C - 2 * n * Math.sin(lat0)) / n;
    return mercator;
  }
 
  mercator.origin = function(x)
    {
    if (!arguments.length) return origin;
    origin = [+x[0], +x[1]];
    return reload();
  };
 
 
  mercator.parallels = function(x) {
    if (!arguments.length) return parallels;
    parallels = [+x[0], +x[1]];
    return reload();
  };

 

  mercator.scale = function(x) {
    if (!arguments.length) return scale;
    scale = +x;
    return mercator;
  };

  mercator.translate = function(x) {
    if (!arguments.length) return translate;
    translate = [+x[0], +x[1]];
    return mercator;
  };

  return mercator;
};

Is there anyother on the list that already contributed with a proper mercator projection?

Thanks,
d.

[Bixente]

Ciao Daniele,

I am trying to use Mercator and Albers. If you want to centre Albers
on Europe for example, you can modify d3.geo.js:

d3.geo.albers = function() {
var origin = [10, 50],

parallels = [29.5, 45.5],

scale = 1500,

translate = [480, 250],

That's all you need to change. By the way, if you manage to use
d3.geo.bounds to compute the bounding box of your shape, I'd be very
happy to see your code.

Bixente


On Jun 15, 10:49 pm, daniele galiffa <daniele.mentegraf...@gmail.com>
wrote:

> Ok,
> everything seems fine now that I edited the geo.js.
>
> This is the editing I did for the mercator projection,
> but maybe most of them are not needed (I'm not GIS expert):
>

> *var d3_radians = Math.PI / 180;

> *

> Is there anyother on the list that already contributed with a proper
> mercator projection?
>
> Thanks,
> d.
>
> On Wed, Jun 15, 2011 at 11:36 PM, daniele galiffa <
>
>
>
>
>
>
>
>
>
> daniele.mentegraf...@gmail.com> wrote:
> > Ciao Mike,
> > thanks for your replies.
>
> > Actually we figured out that the problem was the exporter.
>
> > So we used GDAL using the following:
>
> > ogr2ogr -f "GeoJSON" myGeoFile.json myGeoFile-polygons-ms1.shp --debug on
>
> > On the other hand we also started from the example,
> > but we are getting errors like:

> > *
> > xy.parallels is not a function*

>
> > We are investigating why :)
>
> > If I don't find nothing,
> > I'll ask to the list...otherwise I'll post the solution here ;)
>
> > Thanks,
> > d.
>

[daniele galiffa]

Hello all,
just to update you how we used the GEOJson:

http://www.visup.it/misc/workshop/index.htm

Thanks for feedbacks.

Thanks @mbostock for D3 ;)

[Mike Bostock]

> http://www.visup.it/misc/workshop/index.htm

Beautiful! Thank you for sharing.

Mike

[Curran Kelleher]

Hi all,

This tool from VISup is the first tool I have seen that lets you effortlessly navigate three dimensions of a data cube just by hovering. Very impressive work! This beautiful interaction technique of defining OLAP slices by hovering (and pinning them by clicking) could be generalized and applied to other publicly available data sets which follow the same general structure (of time X region X industry). Any comments on how hard it might be to generalize that D3 code to work with other data sets?

We are facing similar issues in the development of Weave.

Best regards,

Curran

[Bixente]

Grazie mille Daniele,
Bixente

On Jun 20, 4:15 pm, daniele galiffa <daniele.mentegraf...@gmail.com>
wrote:

[daniele galiffa]

Thanks guys for your comments.

Hope to create more and more nice things  with D3 ;)

Thanks,
d