GeoJSON and D3.js multipolygon

Question

I have this geometric shapefile, so no map of a city.

I store the two Shapefiles in a GIS database as a geometric form. Now, I want to visualize the GeoJSON data. I created the GeoJSON data first with QGIS and exported it as Coordinate Reference System WGS 84 EPSG:4326. This is an example data of Shapefile one:

{
   "type":"FeatureCollection",
   "crs":{
      "type":"name",
      "properties":{
         "name":"urn:ogc:def:crs:OGC:1.3:CRS84"
      }
   },
   "features":[
      {
         "type":"Feature",
         "properties":{
            "Membership":0.000000,
            "Membership_1":0.000000,
            "Membership_2":0.000000,
            "Membership_3":0.000000,
            "Membership_4":0.000000,
            "Membership_5":0.000000,
            "Membership_6":0.000000,
            "Membership_7":0.000000,
            "Membership_8":0.000000,
            "Membership_9":0.997638,
            "Asymmetry":0.622090,
            "Elliptic_F":0.368607,
            "Density":1.720265,
            "Radius_of_":2.122269,
            "Rectangula":0.701797,
            "Radius_of__1":0.341230,
            "Main_direc":63.913780,
            "Mean_red":251.683422,
            "Mean_green":253.246326,
            "Mean_blue":251.654027,
            "Shape_inde":1.663047,
            "Compactnes":2.373016,
            "Roundness":1.781040,
            "Border_ind":1.603306
         },
         "geometry":{
            "type":"MultiPolygon",
            "coordinates":[
               [
                  [
                     [
                        0.0,
                        293.0
                     ],
                     [
                        116.0,
                        293.0
                     ],
                     [
                        116.0,
                        288.0
                     ],
                     [
                        117.0,
                        288.0
                     ],
                     [
                        117.0,
                        287.0
                     ],

GeoJSON Shapefile two the geometry is at the end:

{
   "type":"FeatureCollection",
   "crs":{
      "type":"name",
      "properties":{
         "name":"urn:ogc:def:crs:OGC:1.3:CRS84"
      }
   },
   "features":[
      {
         "type":"Feature",
         "properties":{
            "Ratio_red":0.337287,
            "Ratio_gree":0.324566,
            "Ratio_blue":0.338147,
            "Asymmetry":0.233023,
            "Elliptic_F":0.835821,
            "Density":2.111246,
            "Radius_of_":1.191572,
            "Max_diff":0.040743,
            "Rectangula":0.958607,
            "Ratio_DSM_":1.001866,
            "Diff_DSM_w":0.604676,
            "LengthWidt":1.266667,
            "Radius_of__1":0.894812,
            "Main_direc":0.507535,
            "Standard_d":4.209384,
            "Standard_d_1":13.755727,
            "Standard_d_2":12.358206,
            "Standard_d_3":16.194083,
            "Standard_d_4":21.437695,
            "Standard_d_5":0.486436,
            "Mean_slope":195.593284,
            "Mean_slope_1":34.988806,
            "Mean_red":143.451493,
            "Mean_green":138.041045,
            "Mean_blue":143.817164,
            "Mean_DSM":324.615672,
            "Shape_inde":1.038440,
            "Mean_Diff_":0.604676,
            "Compactnes":1.063433,
            "Brightness":141.769900,
            "Roundness":0.296759,
            "Area_m2":1.715200,
            "Border_ind":1.000000
         },
         "geometry":{
            "type":"MultiPolygon",
            "coordinates":[
               [
                  [
                     [
                        -1.796831198293312,
                        46.775409744271464
                     ],
                     [
                        -1.796815938387422,
                        46.775411620389058
                     ],

The geometry is at the end of the file. I already tried things from this post but this works only for polygons and not multipolygons:

D3

Then I tried it with the projections with the following code:

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

    //Width and height
    var w = 800;
    var h = 800;
var colors = d3.scale.category20();
    var projection = d3.geo.mercator()
                       .translate([w/2, h/2]);

    var path = d3.geo.path()
                 .projection(projection);

    //Define path generator
    var path = d3.geo.path();

    //Create SVG element
    var svg = d3.select("body").append("svg").attr({width: w, height: h});

    //Load in GeoJSON data
    d3.json("imageOne.json", function(json) {

        //Bind data and create one path per GeoJSON feature
        svg.selectAll("path")
           .data(json.features)
           .enter()
           .append("path")
           .attr("d", path)
           .style("fill", function(d,i){return colors(i)});
   });
</script>

After running the script I get for the first data the following result:

Trying the script for the second image I get a white page.

I uploaded the whole project here: Data

Answer 1

First to first. Except you "must" use GeoJson, use it. Otherwise, convert it to TopoJson. Use http://geojson.io its simple, clean, free and its works.

Open -> File: load your "mylayer.geojson" (Check if everything it's ok with your map)

Save -> TopoJson: map.topojson

GeoJson Size: 1.08 Mb

TopoJson Size: 0.16 Mb

And here a working code from your data:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
path {
  fill: none;
  stroke-width:2;
  stroke: #000;
}
svg {
  font: 10px sans-serif;
  overflow:hidden;
}
</style>
</head>
<body>
<div id="graph"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script> <!--  need add this to read topojson format -->

<script>

var width = 960,  <!-- your svg size  -->
    height = 500;

var projection = d3.geo.mercator()     <!-- Proyection type -->
    .scale((1 << 22) / 2 / Math.PI)
    .translate([width / 2, height / 2]);

var center = projection([-1.79636106388265,46.7740619963089]); <!-- center of proyection -->

var path = d3.geo.path().projection(projection);

var zoom = d3.behavior.zoom()               <!-- add zoom function :)  -->
    .scale(projection.scale() * 2 * Math.PI)
    .scaleExtent([1 << 22, 1 << 28])
    .translate([width - center[0], height - center[1]])
    .on("zoom", zoomed);

var svg = d3.select("body").append("svg")   <!-- create svg -->
    .attr("width", width)
    .attr("height", height);

var vector = svg;

d3.json("map.topojson", function(error, us) {     <!-- ajax data  -->

  svg.call(zoom);
  var plane = topojson.feature(us, us.objects.collection);  <!-- read data -->

    var b, s, t;                           <!--  found center and box limits -->
    projection.scale(1).translate([0, 0]);
    var b = path.bounds(plane);
    console.log(b);
    var s = .9 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height);
    var t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
    projection.scale(s).translate(t);

    vector= svg.selectAll("path")         <!-- attach path to svg -->
        .data(plane.features)
      .enter()
        .append("path")
        .attr("class", "county")
        .attr("d", path);

    zoomed();
});

function zoomed() {              <!-- update path proyection on mouse wheel ->
  projection
      .scale(zoom.scale() / 2 / Math.PI)
      .translate(zoom.translate());
  vector.attr("d", path);
}

</script>
</body>
</html>

About a blank page, sometime its just wrong projection's center and your path its draw outsite de svg.

Hope this help.-