Plot New York Nachbarschaften mit d3.js

Ich versuche, eine New York Nachbarschaften Karte mit d3.js zu erstellen.Plot New York Nachbarschaften mit d3.js

heruntergeladen ich die Datei von hier https://www1.nyc.gov/site/planning/data-maps/open-data/dwn-nynta.page

Dann lasse ich die Shape-Datei in http://mapshaper.org/ und vereinfachen es auf 1%. Schließlich exportiere ich es als Topojson.

Jetzt verwende ich den folgenden d3.js Code und ich bekomme zufällige Zeilen.

<!DOCTYPE html> 
<meta charset="utf-8"> 

<style type="text/css"> 
    body { 
    font-family: arial, sans; 
    font-size: 14px; 
    width: 960px; 
    margin: 40px auto; 
    } 
    .ny-neighborhoods { 
    stroke: #000; 
    stroke-width: .50; 
    fill: none; 
    } 
</style> 

<body> 
<div id="chart-container"></div> 
</body> 

<script src="https://d3js.org/d3.v4.min.js"></script> 
<script src="https://d3js.org/topojson.v1.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script> 

<script type="text/javascript"> 

var margin = {top: 5, right: 5, bottom: 5, left: 5}; 
var width = 900 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

queue() 
    //.defer(d3.csv, "sales.csv") 
    .defer(d3.json, "nynta.json") 
    .await(ready); 

function ready(error, data, ny) { 
    if (error) return console.warn(error); 
    console.log(ny) 
    //data.forEach(function(d) { 
     //d.val = +d.val; 
     //}); 
    var nyfeatures = topojson.feature(ny,ny.objects.nynta) 
    console.log(nyfeatures) 
    var svg = d3.select("#chart-container") 
    .append("svg") 
     .attr("class", "map") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
    var path = d3.geoPath() 
     .projection(d3.geoAlbersUsa() 
     .fitSize([width, height], nyfeatures)); 
    var nyPaths = svg.selectAll(".ny-neighborhoods") 
     .data(nyfeatures.features) 
    .enter().append("path") 
     .attr("class", "ny-neighborhoods") 
     .attr("d", function(d) { return path(d); }) 
} 
</script>

Quelle

2017-02-23 jeangelj

können Sie die sales.csv und nynta.json Dateien teilen, mit denen Sie arbeiten? – elias

Ich machte die gleichen Schritte, die Sie beschrieben haben, und es funktioniert reibungslos für mich, das Endergebnis ist in Ordnung, nicht wie auf dem Bild, das Sie eingefügt haben. Können Sie die von Ihnen vorgenommenen Schritte überprüfen? – elias

Wirklich? Erstaunlich - lassen Sie mich wieder versuchen – jeangelj

Dank der erstaunlichen Aufwand und Zeit Investitionen von @elias, dachten wir, dass die Shape-Datei aus nicht funktioniert hat. Stattdessen verwendeten wir den Geojson und vereinfachten diesen in mapshaper.org, um ihn als Topojson zu exportieren.

Ein Hinweis für die zukünftige Nutzung - wenn Sie das tun, werden Sie wahrscheinlich unter einem neuen Dateinamen speichern, so wird es Ihre Hierarchie Funktionen ändern

var nyfeatures = topojson.feature(ny,ny.objects.newyork)

Sie viel sehr danken, ist es nun wie folgt aussieht:

Quelle

2017-02-24 19:02:16 jeangelj

Plot New York Nachbarschaften mit d3.js

Antwort

Verwandte Themen