0

I'm a bit of a newb with D3 and I'm trying to work on a project for the organization I work for. I need to draw a choropleth map of Kenya with some data we collected. I'm working off Scott Murray's book Interactive Data Visualization for the Web. In his book he uses the following to generate paths from a json file of US States:

//Width and height
        var w = 500;
        var h = 300;

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

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

        //Load in GeoJSON data
        d3.json("us-states.json", function(json) {

            //Bind data and create one path per GeoJSON feature
            svg.selectAll("path")
               .data(json.features)
               .enter()
               .append("path")
               .attr("d", path);

        });

I tried adapting this code to draw Kenyan counties from a json file I created from the Kenya shapefile I downloaded. The structure of the json file looks just like that of the US states file but when I look at the HTML in a browser I don't see any lines. I check the console and the path placeholders are there there is no data. If I swap in the US-states.json file I see the paths with data and the map in the browser.

Can someone help me please.

Thanks

joker
  • 982
  • 9
  • 23
Siya
  • 829
  • 4
  • 17
  • 29
  • 1
    It looks like you haven't assigned a projection to your path. – Lars Kotthoff May 09 '14 at 09:27
  • Which projection would be best to use? – Siya May 09 '14 at 09:42
  • Any should be suitable, except albers US. – Lars Kotthoff May 09 '14 at 09:43
  • Ok, I added a projection and the paths are now drawn but I don't see them in the browser. I added a style element and still nothing. Sorry for all the questions. – Siya May 09 '14 at 09:57
  • 1
    You may find [this question](http://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object) helpful. – Lars Kotthoff May 09 '14 at 10:00
  • 1
    The problem might be that D3 is expecting latitude and longitude, while the shape file uses a different coordinate system. A quick way to check this is to look at a few points in the GeoJSON file: do they have longitude around 38-ish and latitude close to zero? [Mike Bostock's Let's Make a Map tutorial](http://bost.ocks.org/mike/map/#converting-data) might be useful, especially where it mentions using `-t_srs EPSG:4326` in ogr2ogr. – James Trimble May 09 '14 at 12:36

1 Answers1

1

I am doing something similar for Nairobi. As Lars has said in the comments it looks like you haven't set a projection for the map. The code below uses a mercator projection and the map is centered on Nairobi.

(Note that the scale is very zoomed and you would have to decrease this to get the whole of Kenya in).

var margin = {top: 50, right: 20, bottom: 20, left: 60},
    dynwidth = $("#nairobistock").width(),
    rowheight = 460;
    width = dynwidth - margin.left - margin.right,
    height = rowheight - margin.top - margin.bottom;

var projection = d3.geo.mercator()
    .center([36.8, -1.3])
    .scale([90000])
    .translate([width/2, height/2]);

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

var svg = d3.select("#nairobistock").append("svg")
    .attr("width", (width + margin.left + margin.right) )
    .attr("height", (height + margin.top + margin.bottom) );

d3.json("topojson/KEN-3topo.json", function(error, nairobi){
    if (error) return console.error(error);
    console.log(nairobi);
    console.log("topojson added");

    svg.selectAll("path")
        .data(topojson.feature(nairobi, nairobi.objects.suburbs).features)
        .enter()
        .append("path")
        .attr("class", function(d) {return d.ID;})
        .attr("d", nairobipathing );

});

Hope this helps.

Mkoll
  • 11
  • 2