0

I am trying to load the NY map using Taxi data JSON file, but i am not able to view the correct output. It outputs a very weird map. I tried to search for some more online reference, but could not find.

Currently the code is trying to load the taxi data using taxi_zone.json.

here is my code: Image with current output 

<script src="../lib/d3.v3.min.js"></script>
<script src="../lib/d3-queue.v3.min.js"></script>
<script src="../lib/topojson.v1.min.js"></script>
<script src="../lib/d3.tip.v0.6.3.js"></script> 
<script>



var margin = {top:100, right:100, bottom: 10, left: 100}

var width = 1200-margin.left-margin.right,
    height = 800-margin.bottom-margin.top;;




//var path = d3.geo.path();
var  nameById = d3.map();

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

svg.append("text")
        .attr("x", (width / 2))             
        .attr("y", (margin.top / 2))
        .attr("text-anchor", "middle")  
        .style("font-size", "30px")  
        .style("font-weight","Bold");

    tip = d3.tip()
  .attr('class', 'd3-tip')
  .style('opacity', 0.5)
  .offset([-10, 0])
  .direction('n')
  .html(function(d) {

    return "City: "+ nameById.get(d.properties.zone)
 });

svg.call(tip);


d3.queue()
    .defer(d3.json, "taxi_zones.json")
    .await(ready);



function ready(error, taxi_zones) {
  if (error) throw error;
    console.log(taxi_zones);

  svg.append("g")
      .attr("class", "counties")
     .attr("transform","translate(20,50)")
     .attr("stroke","#f2f2f2")
    .selectAll("path")
      .data(topojson.feature(taxi_zones, taxi_zones.objects.taxi_zones).features)
    .enter().append("path")
      .attr("d", d3.geo.path())
      .style("fill", "grey")
      .on('mouseover',tip.show)
      .on('mouseout', tip.hide);

  svg.append("path")
      .datum(topojson.mesh(taxi_zones, taxi_zones.objects.taxi_zones, function(a, b) { {console.log(a)} return a.LocationID !== b.LocationID; }))
      .attr("class", "states")
      .attr("d", d3.geo.path().projection(d3.geo.mercator().scale(50000)));
}

</script>

Can you please help me with what i am doing wrong here.

I have uploaded the JSON file here: https://jsonblob.com/97dc4332-ecf4-11e8-bcc5-511f7ee4aaef

testAccount
  • 15
  • 7
  • Most likely your geographic data is already projected - can you share some of the coordinates once the topojson is coverted to geojson, ie, if you log `topojson.mesh(taxi_zones, taxi_zones.objects.taxi_zones, function(a, b) { return a.LocationID !== b.LocationID; })` – Andrew Reid Nov 20 '18 at 17:28
  • a few days ago there was a similar question (EU Nuts) with a similar image and they where already projected. https://stackoverflow.com/q/53338800/9938317 – rioV8 Nov 20 '18 at 17:53
  • @AndrewReid: Here is one of the samples: arcs: Array(1)0: (17) [-2857, 3706, 3707, 3708, -2749, 3709, -2747, 3710, -2745, 3711, -3446, 3712, 3713, 3714, 3715, 3716, -1990]length: 1__proto__: Array(0)properties: LocationID: 197OBJECTID: 197Shape_Area: 0.000504689160432Shape_Leng: 0.108568532229borough: "Queens"zone: "Richmond Hill" – testAccount Nov 20 '18 at 18:37
  • @rioV8: I am new to D3, can you please help me how can i get this fixed? – testAccount Nov 20 '18 at 18:48
  • That's the arc from the topojson (which has integer delta encoded coordinates), the geojson produced by topojson.mesh/.feature contains raw coordinates, so I can't be sure from this your data is projected. But the issue of projecting already projected data has come up many times, here's an [answer](https://stackoverflow.com/a/42430876/7106086) of mine on options that are available in this situation. Given it looks like you have a shapefile as your source, you could reproject easily to WGS84 as a geographic coordinate system and then create the topojson and use a projection as you are trying. – Andrew Reid Nov 20 '18 at 19:48

0 Answers0