1

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

Shapefile 1

Shapefile 2

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:

Shapefile

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

I uploaded the whole project here: Data

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.-

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.