Venue/Indoor Map using D3.js and Geojson

Question

I have created geojson file which contains all the features of 1st floor of a shopping mall. I got that venue map projected using d3.js with different colors but only some p

Answer 1

It looks like the d3 mapping tools really fall apart if you try to use coordinates other than longitude and latitude.

I tried creating a "null" projection that just returns the input values, but the negative numbers and numbers greater than 360 were still getting wrapped by d3 before passing to the projection function. That avoids the trig errors from the Mercator projection, and it creates interesting art, but not the floor plan you were hoping for:

var projection = d3.geo.projection(function(λ, φ) {
  return [ λ, φ ];
});

http://fiddle.jshell.net/rR2hG/1/

However, all is not lost. The second image in that example is created by just passing the array of coordinates as the points of elements. I think that's closer to what you wanted. So you'll need to do a little more work to grab the points from the data file but you can definitely visualize them just as an array of coordinates.

    svg2.selectAll("polygon")
        .data(jsonData.features)
        .enter()
        .append("polygon")
        .attr("points", function(d){ return d3.merge(d.geometry.coordinates);})
        .attr("fill", function (d, i) {
            return color1(i);
        });

The only other suggestion is to write a script to convert your geoJSON file to geographic units. They don't have to be actual latitude and longitude of a particular place (you could still have the map centered on a reference point of your choice), but the scale has to be in degrees not feet or meters or whatever you are using.