Question

I'm plotting points on a US Map with TopoJSON. I think my data is formatted correctly, everything is loading, the states are showing... but I have no points. The console has no errors. Here is my script:

var width = 800,
height = 500;

var projection = d3.geo.albersUsa()
    .scale(1070)
    .translate([420, height / 2]);

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

var svg = d3.select("#map").append("svg")
    .attr("width", width)
    .attr("height", height);

queue()
    .defer(d3.json, "../us.json")
    .defer(d3.json, "../users.json")
    .await(ready);

function ready(error, us, users) {
  svg.append("path")
      .datum(topojson.feature(us, us.objects.land))
      .attr("class", "land")
      .attr("d", path);

     svg.append("path")
          .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b;    }))
          .attr("class", "states")
          .attr("d", path);


    svg.append("path")
          .datum(topojson.feature(users, users.objects.users))
          .attr("class", "points")
          .attr("d", path);
};

And my data looks like:

{
    "type": "Topology",
    "transform": {
        "scale": [
            0.032229964456445645,
            0.006392461796179619
        ],
        "translate": [
            -176.6460306,
            7.367222
        ]
    },
    "objects": {
        "users": {
            "type": "MultiPoint",
            "coordinates": [[-121.3806, 38.0213], 
                            [-69.726226, 44.275051],
                            ...long JSON file...
                           ]
                 }
         },
    "arcs" : []
}

Again, I get no errors.. it just doesn't work.

Was it helpful?

Solution

I'd like to answer this question so that others like me can figure this out.

Per user1614080's suggestion, I was going about the problem wrong. Since I just wanted to plot lat and long coordinates on a map, I needed to use Geojson and overlay that over a TopoJSON map. Like, so:

var width = 900,
    height = 500;

var projection = d3.geo.albersUsa()
    .scale(1070)
    .translate([460, height / 2]);

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

var svg = d3.select("#map").append("svg")
    .attr("width", width)
    .attr("height", height);

queue()
    .defer(d3.json, "../us.json")
    .defer(d3.tsv, "../long_lat.tsv")
    .await(ready);

function ready(error, us, long_lat) {
    if (error){
        console.log(error);
    }

  svg.append("path")
      .datum(topojson.feature(us, us.objects.land))
      .attr("class", "land")
      .attr("d", path);

     svg.append("path")
          .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
          .attr("class", "states")
          .attr("d", path);


     svg.append("path")
          .datum({type: "MultiPoint", coordinates: long_lat})
          .attr("class", "points")
          .attr("d", path)
          .style('fill', 'rgb(247, 150, 29)');
};

Notice in the last block I append my lat long coordinates with geoJson, not TopoJson. However, my graph still wouldn't work. And even more frustrating, it wasn't throwing me any errors. I looked and looked online, until I found this thread with Bostock: https://groups.google.com/forum/#!topic/d3-js/rxs-g6ezPwY

He mentions something very important, "...the points come from a CSV file with columns 0 and 1 (longitude and latitude)..."

I hadn't realized that the 0 1 at the top of the tsv file mapped to long and lat. Once I realized I had my coordinates backwards, I fixed and prezto. It worked.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top