Chloropleth of US Zip Codes using D3 v5 and TopoJson2












0















I'm trying to render a US Zip Code map similar to the one in this blocks article http://bl.ocks.org/jefffriesen/6892860. However, we are using d3 v5 and topojson 2 to render our chloropleth. I've tried using the same json file in the article listed above and creating my own TopoJSON from the US Census shapefile as described in this article https://medium.com/@mbostock/command-line-cartography-part-1-897aa8f8ca2c
When my path elements render they all start with a negative number.

ex.



<path d="M-88.252618,32.92675L-88.249724,32.93242L-88.24927699999999,32.935445L-88.25165799999999,32.939561999999995L-88.244438,32.942834999999995L-88.241524,32.943475L-88.223208,32.943914L-88.220801,32.943674L-88.21701,32.942105999999995L-88.219386,32.944435999999996L-88.21664899999999,32.946624L-88.216779,32.947814L-88.213938,32.949691L-88.212525,32.947789L-88.209617,32.947812L-88.209345,32.945889L-88.207878,32.946484999999996L-88.206734,32.944995L-88.20436,32.946112L-88.203648,32.947345L-88.20190000000001,32.945577L-88.202092,32.938989L-88.200645,32.938452999999996L-88.198272,32.941612L-88.197619,32.944075999999995L-88.197609,32.953398L-88.197054,32.956958L-88.19703899999999,32.960555L-88.198129,32.966284L-88.19906499999999,32.969088L-88.19828199999999,32.968936L-88.196703,32.967236L-88.194583,32.967689L-88.19275999999999,32.96542L-88.18839799999999,32.961354L-88.189757,32.959086L-88.18948499999999,32.95597L-88.18731,32.951251L-88.18298999999999,32.945569L-88.181333,32.944722L-88.177638,32.943737L-88.17405099999999,32.943346999999996L-88.171933,32.941719L-88.17215,32.937964L-88.17489499999999,32.934253L-88.175275,32.933107L-88.17696,32.931939L-88.17799199999999,32.931709999999995L-88.18377799999999,32.931847999999995L-88.185707,32.932145999999996L-88.19130299999999,32.933794999999996L-88.197172,32.93636L-88.197093,32.935778L-88.19902499999999,32.935004L-88.20012899999999,32.929887L-88.200605,32.929224999999995L-88.20639299999999,32.92563L-88.20749699999999,32.924064L-88.207202,32.922716L-88.204803,32.918028L-88.2003,32.914769L-88.191058,32.911997L-88.19048599999999,32.911642L-88.189754,32.910731L-88.18319,32.893147L-88.182761,32.890824L-88.18301799999999,32.887755999999996L-88.183087,32.878425L-88.18166699999999,32.873931999999996L-88.179966,32.871674999999996L-88.173251,32.868770999999995L-88.17160299999999,32.867503L-88.166735,32.861618L-88.16566499999999,32.86069L-88.160356,32.861066L-88.15868999999999,32.860808999999996L-88.156962,32.860365L-88.15571399999999,32.858984L-88.154808,32.85582L-88.154973,32.852874L-88.158541,32.845793L-88.167082,32.83762L-88.171407,32.837187L-88.17805299999999,32.838135L-88.17909,32.837871L-88.18154,32.836090999999996L-88.181857,32.835262L-88.181795,32.834078999999996L-88.179732,32.830204L-88.178343,32.828534999999995L-88.18290499999999,32.826817L-88.183877,32.825393999999996L-88.183489,32.822454L-88.182699,32.821041L-88.182661,32.81944L-88.183483,32.817769L-88.18732899999999,32.815165L-88.188412,32.814828L-88.194653,32.815413L-88.196179,32.816097L-88.19623399999999,32.817411L-88.195144,32.818298L-88.19295,32.818764L-88.19120099999999,32.819854L-88.18997399999999,32.821951999999996L-88.189981,32.824044L-88.191406,32.826448L-88.192756,32.82716L-88.19525999999999,32.827464L-88.200411,32.829626999999995L-88.20471099999999,32.827861L-88.207366,32.827255L-88.21015299999999,32.829473L-88.211468,32.829682999999996L-88.215367,32.829326L-88.217457,32.830933L-88.21967,32.833683L-88.219207,32.834403L-88.216841,32.835541L-88.213628,32.838524L-88.21325499999999,32.840095999999996L-88.21547,32.842189999999995L-88.214934,32.847201999999996L-88.216079,32.848292L-88.217669,32.848816L-88.222061,32.847826999999995L-88.223996,32.848490999999996L-88.225645,32.850783L-88.22749499999999,32.851934L-88.229546,32.85181L-88.23008,32.854284L-88.230988,32.855423L-88.23395699999999,32.856491999999996L-88.236363,32.860262L-88.23566799999999,32.860873999999995L-88.23298,32.859994L-88.231612,32.860939L-88.230048,32.858373L-88.226203,32.857369999999996L-88.22416199999999,32.856403L-88.22027899999999,32.856775L-88.219279,32.859656L-88.22036899999999,32.861633999999995L-88.222899,32.86336L-88.224792,32.866174L-88.22616699999999,32.866673L-88.226458,32.869647L-88.227814,32.870878999999995L-88.223497,32.87269L-88.222126,32.875487L-88.222335,32.87699L-88.22402699999999,32.877916L-88.223743,32.880353L-88.224856,32.880925999999995L-88.221741,32.884943L-88.222796,32.886384L-88.224246,32.886776999999995L-88.22563,32.889120999999996L-88.22819,32.890071L-88.23069699999999,32.891719L-88.231425,32.893645L-88.22992599999999,32.894478L-88.23104599999999,32.899383L-88.232616,32.901367L-88.235406,32.901145L-88.23680999999999,32.903303L-88.241539,32.905958999999996L-88.242971,32.907424L-88.24347399999999,32.910334L-88.24654199999999,32.912438L-88.24688499999999,32.914113L-88.24930499999999,32.914018L-88.252084,32.919995L-88.25314999999999,32.924737ZM-88.34043199999999,32.991199L-88.330934,33.073125L-88.3195645760244,33.1645796939956L-88.31933040454409,33.1664633497658L-88.31749099999999,33.167985L-88.314467,33.16952L-88.309129,33.170139L-88.305533,33.171307L-88.30308199999999,33.173229L-88.30281,33.172199L-88.29787999999999,33.169976999999996L-88.295428,33.171946L-88.293249,33.172244L-88.288455,33.169379L-88.287148,33.167662L-88.284262,33.165577L-88.28080299999999,33.165599L-88.279795,33.165186999999996L-88.278516,33.163582999999996L-88.277917,33.160970999999996L-88.28068999999999,33.156985L-88.279803,33.154184L-88.276325,33.148539L-88.27718899999999,33.145505L-88.279219,33.143431L-88.281938,33.141683L-88.285871,33.139693L-88.291417,33.137355L-88.29141399999999,33.136499L-88.28872199999999,33.138081L-88.284223,33.14013L-88.27828199999999,33.143769999999996L-88.276073,33.146339999999995L-88.275933,33.147449L-88.27660399999999,33.152347L-88.275627,33.158054L-88.274236,33.161645L-88.272155,33.165895L-88.27213499999999,33.167476L-88.272984,33.169649L-88.274514,33.171507L-88.28216499999999,33.177462L-88.28224,33.178343999999996L-88.279626,33.179915L-88.27842799999999,33.180006999999996L-88.273988,33.179088L-88.271264,33.179271L-88.268594,33.180690999999996L-88.266768,33.182752L-88.266413,33.184377999999995L-88.267229,33.186669L-88.270333,33.188983L-88.270578,33.19084L-88.272784,33.190978L-88.271857,33.192352L-88.27278299999999,33.193658L-88.272183,33.196315L-88.27016599999999,33.198077999999995L-88.268231,33.198284L-88.26708599999999,33.19952L-88.265288,33.199565L-88.262044,33.203001L-88.258256,33.203502L-88.257874,33.20467L-88.256239,33.205472L-88.256509,33.208061L-88.25528299999999,33.208748L-88.256181,33.210969999999996L-88.253025,33.211503L-88.25224399999999,33.214335999999996L-88.24953,33.214279999999995L-88.24958699999999,33.216768L-88.248471,33.219738L-88.24547299999999,33.219991L-88.242612,33.220703L-88.239615,33.222217L-88.239398,33.223453L-88.236727,33.22334L-88.23539199999999,33.224831L-88.232286,33.225541L-88.23046,33.226894L-88.22748899999999,33.22827L-88.22806299999999,33.229780999999996L-88.229563,33.23104L-88.229264,33.233216999999996L-88.228065,33.23379L-88.22814799999999,33.235003999999996L-88.226539,33.236036L-88.224249,33.236036999999996L-88.22067899999999,33.237733L-88.21757199999999,33.237595999999996L-88.21757199999999,33.239337L-88.21552799999999,33.239109L-88.214083,33.240186L-88.21152099999999,33.239339L-88.20943799999999,33.237944999999996L-88.20328099999999,33.227525L-88.196902,33.215185999999996L-88.198813,33.213637999999996L-88.20055599999999,33.211255L-88.200665,33.209721L-88.199575,33.207934L-88.196822,33.208163L-88.193743,33.208965L-88.185683,33.193481L-88.183326,33.195883L-88.183447,33.192501L-88.18283799999999,33.191274L-88.184133,33.190421L-88.18181299999999,33.188932L-88.179999,33.188792L-88.179912,33.190216L-88.175011,33.189588L-88.160367,33.183603999999995L-88.16140299999999,33.181014999999995L-88.15974299999999,33.175837L-88.159825,33.173981999999995L-88.162223,33.170913L-88.161842,33.169239999999995L-88.15963599999999,33.167704L-88.16102699999999,33.163216L-88.164868,33.159459999999996L-88.165032,33.157053999999995L-88.166285,33.155473L-88.166286,33.152884L-88.167485,33.150022L-88.17042599999999,33.147822999999995L-88.172923,33.149350999999996L-88.167537,33.144813L-88.16432499999999,33.141542L-88.163117,33.140848L-88.161795,33.142185999999995L-88.161441,33.143813L-88.156048,33.148553L-88.154795,33.149996L-88.152642,33.151140999999996L-88.149237,33.151736L-88.149264,33.152858L-88.147211,33.155099L-88.145849,33.158363L-88.144882,33.159183999999996L-88.138329,33.159962L-88.138637,33.163753L-88.139263,33.165591L-88.14225499999999,33.168999L-88.142759,33.171661L-88.142281,33.1729L-88.139838,33.174498L-88.137481,33.178305L-88.137132,33.181773L-88.13852,33.185029L-88.141136,33.188232L-88.141776,33.189713999999995L-88.140942,33.191992L-88.13569,33.198485999999995L-88.13434,33.201127L-88.130403,33.200519L-88.129257,33.199061L-88.12123299999999,33.196242999999996L-88.11784899999999,33.192805L-88.114978,33.193422L-88.10863499999999,33.193959L-88.106437,33.193506L-88.106582,33.191728999999995L-88.105,33.188753L-88.105744,33.187523999999996L-88.10336,33.185879L-88.101479,33.190864999999995L-88.10139799999999,33.193565L-88.09245,33.193543L-88.08924499999999,33.194851L-88.090316,33.194231L-88.089525,33.191229L-88.088871,33.190244L-88.08521999999999,33.18965L-88.085737,33.188665L-88.083503,33.187635L-88.08243999999999,33.188345L-88.08053199999999,33.185963L-88.077772,33.186541L-88.07797699999999,33.190956L-88.076646,33.192448999999996L-88.071705,33.188437L-88.06892599999999,33.186904L-88.06486699999999,33.182390999999996L-88.061487,33.177189999999996L-88.061297,33.174121L-88.06034299999999,33.171303L-88.060114,33.167622L-88.05939699999999,33.166224L-88.06278499999999,33.162759L-88.056365,33.162275L-88.056378,33.159928L-88.053404,33.155794L-88.050298,33.152647L-88.048616,33.151682L-88.04751,33.148525L-88.04388999999999,33.144394L-88.038444,33.141413L-88.039947,33.140194L-88.040984,33.136479L-88.040187,33.135083L-88.041474,33.133021L-88.041094,33.131188L-88.038589,33.128873999999996L-88.04030499999999,33.128392999999996L-88.04542699999999,33.123965999999996L-88.047169,33.1233L-88.04746899999999,33.120712999999995L-88.049565,33.117323L-88.050981,33.116957L-88.054085,33.114573L-88.055364,33.109556999999995L-88.055256,33.103189L-88.057406,33.099958L-88.060183,33.097392L-88.060727,33.09485L-88.058849,33.092238L-88.05631799999999,33.090885L-88.050603,33.090817L-88.049786,33.090427999999996L-88.05112,33.087517999999996L-88.05269799999999,33.087036999999995L-88.05321599999999,33.085066999999995L-88.054576,33.084632L-88.05493,33.082364L-88.062028,33.079805L-88.03058899999999,33.065987L-88.02697099999999,33.063601999999996L-88.028976,33.06275L-88.02846,33.061147L-88.03148,33.061284L-88.030909,33.058420999999996L-88.029876,33.05755L-88.027591,33.057046L-88.02731899999999,33.055946L-88.02911499999999,33.053998L-88.032951,33.052968L-88.033005,33.054755L-88.033903,33.055763999999996L-88.036024,33.055948L-88.03577899999999,33.057848L-88.03871699999999,33.059018L-88.039587,33.058698L-88.039098,33.056222999999996L-88.039371,33.053635L-88.03725,33.049602L-88.034014,33.045981999999995L-88.03298,33.047356L-88.032029,33.04582L-88.031486,33.042429999999996L-88.03379799999999,33.042293L-88.033825,33.040895L-88.041468,33.041171999999996L-88.04179599999999,33.037529L-88.044978,33.037897L-88.04663699999999,33.036682L-88.046311,33.035925999999996L-88.042857,33.034115L-88.04302,33.033108L-88.04079,33.033108L-88.04133399999999,33.031894L-88.039322,33.030381L-88.03896999999999,33.029418L-88.036778,33.028559L-88.042875,33.027806999999996L-88.05258599999999,33.028523L-88.053716,33.027276L-88.052785,33.024060999999996L-88.053111,33.022663L-88.051453,33.019982999999996L-88.049196,33.018104L-88.052595,33.018378999999996L-88.06238499999999,33.018288L-88.063718,33.01728L-88.063881,33.014896L-88.066301,33.013751L-88.071603,33.013957999999995L-88.075409,33.012971L-88.07940699999999,33.013177999999996L-88.080434,33.01258L-88.088256,33.017888L-88.090853,33.018868999999995L-88.09099599999999,33.016450999999996L-88.092315,33.014809L-88.097465,33.012051L-88.102375,33.010022L-88.109624,33.007323L-88.11059399999999,33.006696999999996L-88.115988,33.000492L-88.116905,32.998596L-88.117423,32.989725L-88.120072,32.989998L-88.12105299999999,32.991372999999996L-88.12301,32.991921999999995L-88.12156999999999,32.993342999999996L-88.12146399999999,32.996046L-88.122063,32.997253L-88.124406,32.998261L-88.12612,32.999735L-88.127842,33.002426L-88.12915199999999,33.003461L-88.134785,33.005474L-88.13892899999999,33.007602L-88.143514,33.008978L-88.14900899999999,33.007996L-88.150877,33.004377999999996L-88.150666,33.002558L-88.154275,33.004540999999996L-88.155226,33.007084L-88.156748,33.009329L-88.156774,33.011046L-88.15505999999999,33.015788L-88.152367,33.016567L-88.14872299999999,33.019177L-88.145186,33.022337L-88.145213,33.024628L-88.146001,33.024628L-88.149456,33.022017999999996L-88.153644,33.020736L-88.15495,33.019591999999996L-88.158295,33.021150999999996L-88.158458,33.019180999999996L-88.159818,33.018859L-88.162292,33.019456L-88.16354299999999,33.019135999999996L-88.162864,33.015744999999995L-88.16474099999999,33.014874999999996L-88.167406,33.012538L-88.167569,33.011049L-88.17148499999999,33.009149L-88.169772,33.007292L-88.170507,33.004543999999996L-88.17222699999999,33.003225L-88.172527,33.000126L-88.171852,32.99586L-88.28878499999999,32.992919L-88.293836,32.992953L-88.329878,32.991544999999995L-88.33956099999999,32.991363Z"></path>


Does anyone know what steps to follow to be able to render the zip codes from this US Census Shape File into a D3 Chloropleth.
http://www2.census.gov/geo/tiger/GENZ2017/shp/cb_2017_us_zcta510_500k.zip



function Initialize(){

var promises = ;

promises.push(d3.json("https://d3js.org/us-10m.v1.json"))
promises.push(d3.json(".\data\cb_2017_us_zcta510_500k.json"))
Promise.all(promises).then(function(values){
drawTheMap(values[0], values[1]);
}); }

function drawTheMap(us,zip){

// allow zooming from 1x to 5x
var zooming = d3.zoom()
.scaleExtent([1, 5])
.on("zoom", function () {
svg.attr("transform", d3.event.transform)
})

var svg = d3.select("#map")
.append("svg")
.attr("width", 1200)
.attr("height", 800)
.call(zooming)
.append("g");

var path = d3.geoPath();

var countyFeatures = topojson.feature(us, us.objects.counties).features;
var stateFeatures = topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })
var zipFeature = topojson.feature(zip, zip.cb_2017_us_zcta510_500k).features;
// var usFeature = topojson.feature(us, us.objects.land);

svg.append("g")
.attr("class", "states")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.enter().append("path")
.attr("d", path);

// TODO: Implement state borders being white to help differentiate
// between two states

// svg.append("path")
// .attr("class", "state-borders")
// .attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })))
// .attr("fill", "none")
// .attr("stroke", "white")
// .attr("stroke-linejoin", "round")
// .attr("d", path);

var div = d3.select("body").append("div")
.attr("class", "tooltip");

svg.append("g")
.selectAll("path")
.data(zipFeature)
.enter().append("path")
.attr("d", path)
.on("mouseover", d => {
div
.transition()
.duration(200)
.style('opacity', 0.9);
div
.html(d.id)
.style('left', d3.event.pageX + 'px')
.style('top', d3.event.pageY - 28 + 'px');
})
.on('mouseout', () => {
div
.transition()
.duration(500)
.style('opacity', 0);
})
.on('click', function(d){
GetZipCodeData(d.id)
});


}










share|improve this question

























  • Can you share your code - the example is pretty concise, so it should fit easily. Can you replicate the example with the same json file as the example? or is it just the topojson you created that is problematic?

    – Andrew Reid
    Nov 25 '18 at 4:26













  • Honestly, I don't know what the problem is. i used this command to create the json file. shp2json cb_2017_us_zcta510_500k.shp -o zip.json

    – Chris Savage
    Nov 25 '18 at 5:15













  • i've added my javascript to the question

    – Chris Savage
    Nov 25 '18 at 5:18











  • Did you project your geographic data? You are not using a projection in your javascript, and if you aren't projecting your topojson when creating it, the path values you see: -88.252618,32.92675 are simply latitude/longitude pairs converted to pixel values with no transformation. I'd guess this coordinate is somewhere on the eastern seaboard and corresponds to a lat/long pair. Mike does talk about projection a bit in the article, though you can also use: path = d3.geoPath().projection(projection) where projection might be d3.geoAlbersUsa() for example.

    – Andrew Reid
    Nov 25 '18 at 5:45


















0















I'm trying to render a US Zip Code map similar to the one in this blocks article http://bl.ocks.org/jefffriesen/6892860. However, we are using d3 v5 and topojson 2 to render our chloropleth. I've tried using the same json file in the article listed above and creating my own TopoJSON from the US Census shapefile as described in this article https://medium.com/@mbostock/command-line-cartography-part-1-897aa8f8ca2c
When my path elements render they all start with a negative number.

ex.



<path d="M-88.252618,32.92675L-88.249724,32.93242L-88.24927699999999,32.935445L-88.25165799999999,32.939561999999995L-88.244438,32.942834999999995L-88.241524,32.943475L-88.223208,32.943914L-88.220801,32.943674L-88.21701,32.942105999999995L-88.219386,32.944435999999996L-88.21664899999999,32.946624L-88.216779,32.947814L-88.213938,32.949691L-88.212525,32.947789L-88.209617,32.947812L-88.209345,32.945889L-88.207878,32.946484999999996L-88.206734,32.944995L-88.20436,32.946112L-88.203648,32.947345L-88.20190000000001,32.945577L-88.202092,32.938989L-88.200645,32.938452999999996L-88.198272,32.941612L-88.197619,32.944075999999995L-88.197609,32.953398L-88.197054,32.956958L-88.19703899999999,32.960555L-88.198129,32.966284L-88.19906499999999,32.969088L-88.19828199999999,32.968936L-88.196703,32.967236L-88.194583,32.967689L-88.19275999999999,32.96542L-88.18839799999999,32.961354L-88.189757,32.959086L-88.18948499999999,32.95597L-88.18731,32.951251L-88.18298999999999,32.945569L-88.181333,32.944722L-88.177638,32.943737L-88.17405099999999,32.943346999999996L-88.171933,32.941719L-88.17215,32.937964L-88.17489499999999,32.934253L-88.175275,32.933107L-88.17696,32.931939L-88.17799199999999,32.931709999999995L-88.18377799999999,32.931847999999995L-88.185707,32.932145999999996L-88.19130299999999,32.933794999999996L-88.197172,32.93636L-88.197093,32.935778L-88.19902499999999,32.935004L-88.20012899999999,32.929887L-88.200605,32.929224999999995L-88.20639299999999,32.92563L-88.20749699999999,32.924064L-88.207202,32.922716L-88.204803,32.918028L-88.2003,32.914769L-88.191058,32.911997L-88.19048599999999,32.911642L-88.189754,32.910731L-88.18319,32.893147L-88.182761,32.890824L-88.18301799999999,32.887755999999996L-88.183087,32.878425L-88.18166699999999,32.873931999999996L-88.179966,32.871674999999996L-88.173251,32.868770999999995L-88.17160299999999,32.867503L-88.166735,32.861618L-88.16566499999999,32.86069L-88.160356,32.861066L-88.15868999999999,32.860808999999996L-88.156962,32.860365L-88.15571399999999,32.858984L-88.154808,32.85582L-88.154973,32.852874L-88.158541,32.845793L-88.167082,32.83762L-88.171407,32.837187L-88.17805299999999,32.838135L-88.17909,32.837871L-88.18154,32.836090999999996L-88.181857,32.835262L-88.181795,32.834078999999996L-88.179732,32.830204L-88.178343,32.828534999999995L-88.18290499999999,32.826817L-88.183877,32.825393999999996L-88.183489,32.822454L-88.182699,32.821041L-88.182661,32.81944L-88.183483,32.817769L-88.18732899999999,32.815165L-88.188412,32.814828L-88.194653,32.815413L-88.196179,32.816097L-88.19623399999999,32.817411L-88.195144,32.818298L-88.19295,32.818764L-88.19120099999999,32.819854L-88.18997399999999,32.821951999999996L-88.189981,32.824044L-88.191406,32.826448L-88.192756,32.82716L-88.19525999999999,32.827464L-88.200411,32.829626999999995L-88.20471099999999,32.827861L-88.207366,32.827255L-88.21015299999999,32.829473L-88.211468,32.829682999999996L-88.215367,32.829326L-88.217457,32.830933L-88.21967,32.833683L-88.219207,32.834403L-88.216841,32.835541L-88.213628,32.838524L-88.21325499999999,32.840095999999996L-88.21547,32.842189999999995L-88.214934,32.847201999999996L-88.216079,32.848292L-88.217669,32.848816L-88.222061,32.847826999999995L-88.223996,32.848490999999996L-88.225645,32.850783L-88.22749499999999,32.851934L-88.229546,32.85181L-88.23008,32.854284L-88.230988,32.855423L-88.23395699999999,32.856491999999996L-88.236363,32.860262L-88.23566799999999,32.860873999999995L-88.23298,32.859994L-88.231612,32.860939L-88.230048,32.858373L-88.226203,32.857369999999996L-88.22416199999999,32.856403L-88.22027899999999,32.856775L-88.219279,32.859656L-88.22036899999999,32.861633999999995L-88.222899,32.86336L-88.224792,32.866174L-88.22616699999999,32.866673L-88.226458,32.869647L-88.227814,32.870878999999995L-88.223497,32.87269L-88.222126,32.875487L-88.222335,32.87699L-88.22402699999999,32.877916L-88.223743,32.880353L-88.224856,32.880925999999995L-88.221741,32.884943L-88.222796,32.886384L-88.224246,32.886776999999995L-88.22563,32.889120999999996L-88.22819,32.890071L-88.23069699999999,32.891719L-88.231425,32.893645L-88.22992599999999,32.894478L-88.23104599999999,32.899383L-88.232616,32.901367L-88.235406,32.901145L-88.23680999999999,32.903303L-88.241539,32.905958999999996L-88.242971,32.907424L-88.24347399999999,32.910334L-88.24654199999999,32.912438L-88.24688499999999,32.914113L-88.24930499999999,32.914018L-88.252084,32.919995L-88.25314999999999,32.924737ZM-88.34043199999999,32.991199L-88.330934,33.073125L-88.3195645760244,33.1645796939956L-88.31933040454409,33.1664633497658L-88.31749099999999,33.167985L-88.314467,33.16952L-88.309129,33.170139L-88.305533,33.171307L-88.30308199999999,33.173229L-88.30281,33.172199L-88.29787999999999,33.169976999999996L-88.295428,33.171946L-88.293249,33.172244L-88.288455,33.169379L-88.287148,33.167662L-88.284262,33.165577L-88.28080299999999,33.165599L-88.279795,33.165186999999996L-88.278516,33.163582999999996L-88.277917,33.160970999999996L-88.28068999999999,33.156985L-88.279803,33.154184L-88.276325,33.148539L-88.27718899999999,33.145505L-88.279219,33.143431L-88.281938,33.141683L-88.285871,33.139693L-88.291417,33.137355L-88.29141399999999,33.136499L-88.28872199999999,33.138081L-88.284223,33.14013L-88.27828199999999,33.143769999999996L-88.276073,33.146339999999995L-88.275933,33.147449L-88.27660399999999,33.152347L-88.275627,33.158054L-88.274236,33.161645L-88.272155,33.165895L-88.27213499999999,33.167476L-88.272984,33.169649L-88.274514,33.171507L-88.28216499999999,33.177462L-88.28224,33.178343999999996L-88.279626,33.179915L-88.27842799999999,33.180006999999996L-88.273988,33.179088L-88.271264,33.179271L-88.268594,33.180690999999996L-88.266768,33.182752L-88.266413,33.184377999999995L-88.267229,33.186669L-88.270333,33.188983L-88.270578,33.19084L-88.272784,33.190978L-88.271857,33.192352L-88.27278299999999,33.193658L-88.272183,33.196315L-88.27016599999999,33.198077999999995L-88.268231,33.198284L-88.26708599999999,33.19952L-88.265288,33.199565L-88.262044,33.203001L-88.258256,33.203502L-88.257874,33.20467L-88.256239,33.205472L-88.256509,33.208061L-88.25528299999999,33.208748L-88.256181,33.210969999999996L-88.253025,33.211503L-88.25224399999999,33.214335999999996L-88.24953,33.214279999999995L-88.24958699999999,33.216768L-88.248471,33.219738L-88.24547299999999,33.219991L-88.242612,33.220703L-88.239615,33.222217L-88.239398,33.223453L-88.236727,33.22334L-88.23539199999999,33.224831L-88.232286,33.225541L-88.23046,33.226894L-88.22748899999999,33.22827L-88.22806299999999,33.229780999999996L-88.229563,33.23104L-88.229264,33.233216999999996L-88.228065,33.23379L-88.22814799999999,33.235003999999996L-88.226539,33.236036L-88.224249,33.236036999999996L-88.22067899999999,33.237733L-88.21757199999999,33.237595999999996L-88.21757199999999,33.239337L-88.21552799999999,33.239109L-88.214083,33.240186L-88.21152099999999,33.239339L-88.20943799999999,33.237944999999996L-88.20328099999999,33.227525L-88.196902,33.215185999999996L-88.198813,33.213637999999996L-88.20055599999999,33.211255L-88.200665,33.209721L-88.199575,33.207934L-88.196822,33.208163L-88.193743,33.208965L-88.185683,33.193481L-88.183326,33.195883L-88.183447,33.192501L-88.18283799999999,33.191274L-88.184133,33.190421L-88.18181299999999,33.188932L-88.179999,33.188792L-88.179912,33.190216L-88.175011,33.189588L-88.160367,33.183603999999995L-88.16140299999999,33.181014999999995L-88.15974299999999,33.175837L-88.159825,33.173981999999995L-88.162223,33.170913L-88.161842,33.169239999999995L-88.15963599999999,33.167704L-88.16102699999999,33.163216L-88.164868,33.159459999999996L-88.165032,33.157053999999995L-88.166285,33.155473L-88.166286,33.152884L-88.167485,33.150022L-88.17042599999999,33.147822999999995L-88.172923,33.149350999999996L-88.167537,33.144813L-88.16432499999999,33.141542L-88.163117,33.140848L-88.161795,33.142185999999995L-88.161441,33.143813L-88.156048,33.148553L-88.154795,33.149996L-88.152642,33.151140999999996L-88.149237,33.151736L-88.149264,33.152858L-88.147211,33.155099L-88.145849,33.158363L-88.144882,33.159183999999996L-88.138329,33.159962L-88.138637,33.163753L-88.139263,33.165591L-88.14225499999999,33.168999L-88.142759,33.171661L-88.142281,33.1729L-88.139838,33.174498L-88.137481,33.178305L-88.137132,33.181773L-88.13852,33.185029L-88.141136,33.188232L-88.141776,33.189713999999995L-88.140942,33.191992L-88.13569,33.198485999999995L-88.13434,33.201127L-88.130403,33.200519L-88.129257,33.199061L-88.12123299999999,33.196242999999996L-88.11784899999999,33.192805L-88.114978,33.193422L-88.10863499999999,33.193959L-88.106437,33.193506L-88.106582,33.191728999999995L-88.105,33.188753L-88.105744,33.187523999999996L-88.10336,33.185879L-88.101479,33.190864999999995L-88.10139799999999,33.193565L-88.09245,33.193543L-88.08924499999999,33.194851L-88.090316,33.194231L-88.089525,33.191229L-88.088871,33.190244L-88.08521999999999,33.18965L-88.085737,33.188665L-88.083503,33.187635L-88.08243999999999,33.188345L-88.08053199999999,33.185963L-88.077772,33.186541L-88.07797699999999,33.190956L-88.076646,33.192448999999996L-88.071705,33.188437L-88.06892599999999,33.186904L-88.06486699999999,33.182390999999996L-88.061487,33.177189999999996L-88.061297,33.174121L-88.06034299999999,33.171303L-88.060114,33.167622L-88.05939699999999,33.166224L-88.06278499999999,33.162759L-88.056365,33.162275L-88.056378,33.159928L-88.053404,33.155794L-88.050298,33.152647L-88.048616,33.151682L-88.04751,33.148525L-88.04388999999999,33.144394L-88.038444,33.141413L-88.039947,33.140194L-88.040984,33.136479L-88.040187,33.135083L-88.041474,33.133021L-88.041094,33.131188L-88.038589,33.128873999999996L-88.04030499999999,33.128392999999996L-88.04542699999999,33.123965999999996L-88.047169,33.1233L-88.04746899999999,33.120712999999995L-88.049565,33.117323L-88.050981,33.116957L-88.054085,33.114573L-88.055364,33.109556999999995L-88.055256,33.103189L-88.057406,33.099958L-88.060183,33.097392L-88.060727,33.09485L-88.058849,33.092238L-88.05631799999999,33.090885L-88.050603,33.090817L-88.049786,33.090427999999996L-88.05112,33.087517999999996L-88.05269799999999,33.087036999999995L-88.05321599999999,33.085066999999995L-88.054576,33.084632L-88.05493,33.082364L-88.062028,33.079805L-88.03058899999999,33.065987L-88.02697099999999,33.063601999999996L-88.028976,33.06275L-88.02846,33.061147L-88.03148,33.061284L-88.030909,33.058420999999996L-88.029876,33.05755L-88.027591,33.057046L-88.02731899999999,33.055946L-88.02911499999999,33.053998L-88.032951,33.052968L-88.033005,33.054755L-88.033903,33.055763999999996L-88.036024,33.055948L-88.03577899999999,33.057848L-88.03871699999999,33.059018L-88.039587,33.058698L-88.039098,33.056222999999996L-88.039371,33.053635L-88.03725,33.049602L-88.034014,33.045981999999995L-88.03298,33.047356L-88.032029,33.04582L-88.031486,33.042429999999996L-88.03379799999999,33.042293L-88.033825,33.040895L-88.041468,33.041171999999996L-88.04179599999999,33.037529L-88.044978,33.037897L-88.04663699999999,33.036682L-88.046311,33.035925999999996L-88.042857,33.034115L-88.04302,33.033108L-88.04079,33.033108L-88.04133399999999,33.031894L-88.039322,33.030381L-88.03896999999999,33.029418L-88.036778,33.028559L-88.042875,33.027806999999996L-88.05258599999999,33.028523L-88.053716,33.027276L-88.052785,33.024060999999996L-88.053111,33.022663L-88.051453,33.019982999999996L-88.049196,33.018104L-88.052595,33.018378999999996L-88.06238499999999,33.018288L-88.063718,33.01728L-88.063881,33.014896L-88.066301,33.013751L-88.071603,33.013957999999995L-88.075409,33.012971L-88.07940699999999,33.013177999999996L-88.080434,33.01258L-88.088256,33.017888L-88.090853,33.018868999999995L-88.09099599999999,33.016450999999996L-88.092315,33.014809L-88.097465,33.012051L-88.102375,33.010022L-88.109624,33.007323L-88.11059399999999,33.006696999999996L-88.115988,33.000492L-88.116905,32.998596L-88.117423,32.989725L-88.120072,32.989998L-88.12105299999999,32.991372999999996L-88.12301,32.991921999999995L-88.12156999999999,32.993342999999996L-88.12146399999999,32.996046L-88.122063,32.997253L-88.124406,32.998261L-88.12612,32.999735L-88.127842,33.002426L-88.12915199999999,33.003461L-88.134785,33.005474L-88.13892899999999,33.007602L-88.143514,33.008978L-88.14900899999999,33.007996L-88.150877,33.004377999999996L-88.150666,33.002558L-88.154275,33.004540999999996L-88.155226,33.007084L-88.156748,33.009329L-88.156774,33.011046L-88.15505999999999,33.015788L-88.152367,33.016567L-88.14872299999999,33.019177L-88.145186,33.022337L-88.145213,33.024628L-88.146001,33.024628L-88.149456,33.022017999999996L-88.153644,33.020736L-88.15495,33.019591999999996L-88.158295,33.021150999999996L-88.158458,33.019180999999996L-88.159818,33.018859L-88.162292,33.019456L-88.16354299999999,33.019135999999996L-88.162864,33.015744999999995L-88.16474099999999,33.014874999999996L-88.167406,33.012538L-88.167569,33.011049L-88.17148499999999,33.009149L-88.169772,33.007292L-88.170507,33.004543999999996L-88.17222699999999,33.003225L-88.172527,33.000126L-88.171852,32.99586L-88.28878499999999,32.992919L-88.293836,32.992953L-88.329878,32.991544999999995L-88.33956099999999,32.991363Z"></path>


Does anyone know what steps to follow to be able to render the zip codes from this US Census Shape File into a D3 Chloropleth.
http://www2.census.gov/geo/tiger/GENZ2017/shp/cb_2017_us_zcta510_500k.zip



function Initialize(){

var promises = ;

promises.push(d3.json("https://d3js.org/us-10m.v1.json"))
promises.push(d3.json(".\data\cb_2017_us_zcta510_500k.json"))
Promise.all(promises).then(function(values){
drawTheMap(values[0], values[1]);
}); }

function drawTheMap(us,zip){

// allow zooming from 1x to 5x
var zooming = d3.zoom()
.scaleExtent([1, 5])
.on("zoom", function () {
svg.attr("transform", d3.event.transform)
})

var svg = d3.select("#map")
.append("svg")
.attr("width", 1200)
.attr("height", 800)
.call(zooming)
.append("g");

var path = d3.geoPath();

var countyFeatures = topojson.feature(us, us.objects.counties).features;
var stateFeatures = topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })
var zipFeature = topojson.feature(zip, zip.cb_2017_us_zcta510_500k).features;
// var usFeature = topojson.feature(us, us.objects.land);

svg.append("g")
.attr("class", "states")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.enter().append("path")
.attr("d", path);

// TODO: Implement state borders being white to help differentiate
// between two states

// svg.append("path")
// .attr("class", "state-borders")
// .attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })))
// .attr("fill", "none")
// .attr("stroke", "white")
// .attr("stroke-linejoin", "round")
// .attr("d", path);

var div = d3.select("body").append("div")
.attr("class", "tooltip");

svg.append("g")
.selectAll("path")
.data(zipFeature)
.enter().append("path")
.attr("d", path)
.on("mouseover", d => {
div
.transition()
.duration(200)
.style('opacity', 0.9);
div
.html(d.id)
.style('left', d3.event.pageX + 'px')
.style('top', d3.event.pageY - 28 + 'px');
})
.on('mouseout', () => {
div
.transition()
.duration(500)
.style('opacity', 0);
})
.on('click', function(d){
GetZipCodeData(d.id)
});


}










share|improve this question

























  • Can you share your code - the example is pretty concise, so it should fit easily. Can you replicate the example with the same json file as the example? or is it just the topojson you created that is problematic?

    – Andrew Reid
    Nov 25 '18 at 4:26













  • Honestly, I don't know what the problem is. i used this command to create the json file. shp2json cb_2017_us_zcta510_500k.shp -o zip.json

    – Chris Savage
    Nov 25 '18 at 5:15













  • i've added my javascript to the question

    – Chris Savage
    Nov 25 '18 at 5:18











  • Did you project your geographic data? You are not using a projection in your javascript, and if you aren't projecting your topojson when creating it, the path values you see: -88.252618,32.92675 are simply latitude/longitude pairs converted to pixel values with no transformation. I'd guess this coordinate is somewhere on the eastern seaboard and corresponds to a lat/long pair. Mike does talk about projection a bit in the article, though you can also use: path = d3.geoPath().projection(projection) where projection might be d3.geoAlbersUsa() for example.

    – Andrew Reid
    Nov 25 '18 at 5:45
















0












0








0








I'm trying to render a US Zip Code map similar to the one in this blocks article http://bl.ocks.org/jefffriesen/6892860. However, we are using d3 v5 and topojson 2 to render our chloropleth. I've tried using the same json file in the article listed above and creating my own TopoJSON from the US Census shapefile as described in this article https://medium.com/@mbostock/command-line-cartography-part-1-897aa8f8ca2c
When my path elements render they all start with a negative number.

ex.



<path d="M-88.252618,32.92675L-88.249724,32.93242L-88.24927699999999,32.935445L-88.25165799999999,32.939561999999995L-88.244438,32.942834999999995L-88.241524,32.943475L-88.223208,32.943914L-88.220801,32.943674L-88.21701,32.942105999999995L-88.219386,32.944435999999996L-88.21664899999999,32.946624L-88.216779,32.947814L-88.213938,32.949691L-88.212525,32.947789L-88.209617,32.947812L-88.209345,32.945889L-88.207878,32.946484999999996L-88.206734,32.944995L-88.20436,32.946112L-88.203648,32.947345L-88.20190000000001,32.945577L-88.202092,32.938989L-88.200645,32.938452999999996L-88.198272,32.941612L-88.197619,32.944075999999995L-88.197609,32.953398L-88.197054,32.956958L-88.19703899999999,32.960555L-88.198129,32.966284L-88.19906499999999,32.969088L-88.19828199999999,32.968936L-88.196703,32.967236L-88.194583,32.967689L-88.19275999999999,32.96542L-88.18839799999999,32.961354L-88.189757,32.959086L-88.18948499999999,32.95597L-88.18731,32.951251L-88.18298999999999,32.945569L-88.181333,32.944722L-88.177638,32.943737L-88.17405099999999,32.943346999999996L-88.171933,32.941719L-88.17215,32.937964L-88.17489499999999,32.934253L-88.175275,32.933107L-88.17696,32.931939L-88.17799199999999,32.931709999999995L-88.18377799999999,32.931847999999995L-88.185707,32.932145999999996L-88.19130299999999,32.933794999999996L-88.197172,32.93636L-88.197093,32.935778L-88.19902499999999,32.935004L-88.20012899999999,32.929887L-88.200605,32.929224999999995L-88.20639299999999,32.92563L-88.20749699999999,32.924064L-88.207202,32.922716L-88.204803,32.918028L-88.2003,32.914769L-88.191058,32.911997L-88.19048599999999,32.911642L-88.189754,32.910731L-88.18319,32.893147L-88.182761,32.890824L-88.18301799999999,32.887755999999996L-88.183087,32.878425L-88.18166699999999,32.873931999999996L-88.179966,32.871674999999996L-88.173251,32.868770999999995L-88.17160299999999,32.867503L-88.166735,32.861618L-88.16566499999999,32.86069L-88.160356,32.861066L-88.15868999999999,32.860808999999996L-88.156962,32.860365L-88.15571399999999,32.858984L-88.154808,32.85582L-88.154973,32.852874L-88.158541,32.845793L-88.167082,32.83762L-88.171407,32.837187L-88.17805299999999,32.838135L-88.17909,32.837871L-88.18154,32.836090999999996L-88.181857,32.835262L-88.181795,32.834078999999996L-88.179732,32.830204L-88.178343,32.828534999999995L-88.18290499999999,32.826817L-88.183877,32.825393999999996L-88.183489,32.822454L-88.182699,32.821041L-88.182661,32.81944L-88.183483,32.817769L-88.18732899999999,32.815165L-88.188412,32.814828L-88.194653,32.815413L-88.196179,32.816097L-88.19623399999999,32.817411L-88.195144,32.818298L-88.19295,32.818764L-88.19120099999999,32.819854L-88.18997399999999,32.821951999999996L-88.189981,32.824044L-88.191406,32.826448L-88.192756,32.82716L-88.19525999999999,32.827464L-88.200411,32.829626999999995L-88.20471099999999,32.827861L-88.207366,32.827255L-88.21015299999999,32.829473L-88.211468,32.829682999999996L-88.215367,32.829326L-88.217457,32.830933L-88.21967,32.833683L-88.219207,32.834403L-88.216841,32.835541L-88.213628,32.838524L-88.21325499999999,32.840095999999996L-88.21547,32.842189999999995L-88.214934,32.847201999999996L-88.216079,32.848292L-88.217669,32.848816L-88.222061,32.847826999999995L-88.223996,32.848490999999996L-88.225645,32.850783L-88.22749499999999,32.851934L-88.229546,32.85181L-88.23008,32.854284L-88.230988,32.855423L-88.23395699999999,32.856491999999996L-88.236363,32.860262L-88.23566799999999,32.860873999999995L-88.23298,32.859994L-88.231612,32.860939L-88.230048,32.858373L-88.226203,32.857369999999996L-88.22416199999999,32.856403L-88.22027899999999,32.856775L-88.219279,32.859656L-88.22036899999999,32.861633999999995L-88.222899,32.86336L-88.224792,32.866174L-88.22616699999999,32.866673L-88.226458,32.869647L-88.227814,32.870878999999995L-88.223497,32.87269L-88.222126,32.875487L-88.222335,32.87699L-88.22402699999999,32.877916L-88.223743,32.880353L-88.224856,32.880925999999995L-88.221741,32.884943L-88.222796,32.886384L-88.224246,32.886776999999995L-88.22563,32.889120999999996L-88.22819,32.890071L-88.23069699999999,32.891719L-88.231425,32.893645L-88.22992599999999,32.894478L-88.23104599999999,32.899383L-88.232616,32.901367L-88.235406,32.901145L-88.23680999999999,32.903303L-88.241539,32.905958999999996L-88.242971,32.907424L-88.24347399999999,32.910334L-88.24654199999999,32.912438L-88.24688499999999,32.914113L-88.24930499999999,32.914018L-88.252084,32.919995L-88.25314999999999,32.924737ZM-88.34043199999999,32.991199L-88.330934,33.073125L-88.3195645760244,33.1645796939956L-88.31933040454409,33.1664633497658L-88.31749099999999,33.167985L-88.314467,33.16952L-88.309129,33.170139L-88.305533,33.171307L-88.30308199999999,33.173229L-88.30281,33.172199L-88.29787999999999,33.169976999999996L-88.295428,33.171946L-88.293249,33.172244L-88.288455,33.169379L-88.287148,33.167662L-88.284262,33.165577L-88.28080299999999,33.165599L-88.279795,33.165186999999996L-88.278516,33.163582999999996L-88.277917,33.160970999999996L-88.28068999999999,33.156985L-88.279803,33.154184L-88.276325,33.148539L-88.27718899999999,33.145505L-88.279219,33.143431L-88.281938,33.141683L-88.285871,33.139693L-88.291417,33.137355L-88.29141399999999,33.136499L-88.28872199999999,33.138081L-88.284223,33.14013L-88.27828199999999,33.143769999999996L-88.276073,33.146339999999995L-88.275933,33.147449L-88.27660399999999,33.152347L-88.275627,33.158054L-88.274236,33.161645L-88.272155,33.165895L-88.27213499999999,33.167476L-88.272984,33.169649L-88.274514,33.171507L-88.28216499999999,33.177462L-88.28224,33.178343999999996L-88.279626,33.179915L-88.27842799999999,33.180006999999996L-88.273988,33.179088L-88.271264,33.179271L-88.268594,33.180690999999996L-88.266768,33.182752L-88.266413,33.184377999999995L-88.267229,33.186669L-88.270333,33.188983L-88.270578,33.19084L-88.272784,33.190978L-88.271857,33.192352L-88.27278299999999,33.193658L-88.272183,33.196315L-88.27016599999999,33.198077999999995L-88.268231,33.198284L-88.26708599999999,33.19952L-88.265288,33.199565L-88.262044,33.203001L-88.258256,33.203502L-88.257874,33.20467L-88.256239,33.205472L-88.256509,33.208061L-88.25528299999999,33.208748L-88.256181,33.210969999999996L-88.253025,33.211503L-88.25224399999999,33.214335999999996L-88.24953,33.214279999999995L-88.24958699999999,33.216768L-88.248471,33.219738L-88.24547299999999,33.219991L-88.242612,33.220703L-88.239615,33.222217L-88.239398,33.223453L-88.236727,33.22334L-88.23539199999999,33.224831L-88.232286,33.225541L-88.23046,33.226894L-88.22748899999999,33.22827L-88.22806299999999,33.229780999999996L-88.229563,33.23104L-88.229264,33.233216999999996L-88.228065,33.23379L-88.22814799999999,33.235003999999996L-88.226539,33.236036L-88.224249,33.236036999999996L-88.22067899999999,33.237733L-88.21757199999999,33.237595999999996L-88.21757199999999,33.239337L-88.21552799999999,33.239109L-88.214083,33.240186L-88.21152099999999,33.239339L-88.20943799999999,33.237944999999996L-88.20328099999999,33.227525L-88.196902,33.215185999999996L-88.198813,33.213637999999996L-88.20055599999999,33.211255L-88.200665,33.209721L-88.199575,33.207934L-88.196822,33.208163L-88.193743,33.208965L-88.185683,33.193481L-88.183326,33.195883L-88.183447,33.192501L-88.18283799999999,33.191274L-88.184133,33.190421L-88.18181299999999,33.188932L-88.179999,33.188792L-88.179912,33.190216L-88.175011,33.189588L-88.160367,33.183603999999995L-88.16140299999999,33.181014999999995L-88.15974299999999,33.175837L-88.159825,33.173981999999995L-88.162223,33.170913L-88.161842,33.169239999999995L-88.15963599999999,33.167704L-88.16102699999999,33.163216L-88.164868,33.159459999999996L-88.165032,33.157053999999995L-88.166285,33.155473L-88.166286,33.152884L-88.167485,33.150022L-88.17042599999999,33.147822999999995L-88.172923,33.149350999999996L-88.167537,33.144813L-88.16432499999999,33.141542L-88.163117,33.140848L-88.161795,33.142185999999995L-88.161441,33.143813L-88.156048,33.148553L-88.154795,33.149996L-88.152642,33.151140999999996L-88.149237,33.151736L-88.149264,33.152858L-88.147211,33.155099L-88.145849,33.158363L-88.144882,33.159183999999996L-88.138329,33.159962L-88.138637,33.163753L-88.139263,33.165591L-88.14225499999999,33.168999L-88.142759,33.171661L-88.142281,33.1729L-88.139838,33.174498L-88.137481,33.178305L-88.137132,33.181773L-88.13852,33.185029L-88.141136,33.188232L-88.141776,33.189713999999995L-88.140942,33.191992L-88.13569,33.198485999999995L-88.13434,33.201127L-88.130403,33.200519L-88.129257,33.199061L-88.12123299999999,33.196242999999996L-88.11784899999999,33.192805L-88.114978,33.193422L-88.10863499999999,33.193959L-88.106437,33.193506L-88.106582,33.191728999999995L-88.105,33.188753L-88.105744,33.187523999999996L-88.10336,33.185879L-88.101479,33.190864999999995L-88.10139799999999,33.193565L-88.09245,33.193543L-88.08924499999999,33.194851L-88.090316,33.194231L-88.089525,33.191229L-88.088871,33.190244L-88.08521999999999,33.18965L-88.085737,33.188665L-88.083503,33.187635L-88.08243999999999,33.188345L-88.08053199999999,33.185963L-88.077772,33.186541L-88.07797699999999,33.190956L-88.076646,33.192448999999996L-88.071705,33.188437L-88.06892599999999,33.186904L-88.06486699999999,33.182390999999996L-88.061487,33.177189999999996L-88.061297,33.174121L-88.06034299999999,33.171303L-88.060114,33.167622L-88.05939699999999,33.166224L-88.06278499999999,33.162759L-88.056365,33.162275L-88.056378,33.159928L-88.053404,33.155794L-88.050298,33.152647L-88.048616,33.151682L-88.04751,33.148525L-88.04388999999999,33.144394L-88.038444,33.141413L-88.039947,33.140194L-88.040984,33.136479L-88.040187,33.135083L-88.041474,33.133021L-88.041094,33.131188L-88.038589,33.128873999999996L-88.04030499999999,33.128392999999996L-88.04542699999999,33.123965999999996L-88.047169,33.1233L-88.04746899999999,33.120712999999995L-88.049565,33.117323L-88.050981,33.116957L-88.054085,33.114573L-88.055364,33.109556999999995L-88.055256,33.103189L-88.057406,33.099958L-88.060183,33.097392L-88.060727,33.09485L-88.058849,33.092238L-88.05631799999999,33.090885L-88.050603,33.090817L-88.049786,33.090427999999996L-88.05112,33.087517999999996L-88.05269799999999,33.087036999999995L-88.05321599999999,33.085066999999995L-88.054576,33.084632L-88.05493,33.082364L-88.062028,33.079805L-88.03058899999999,33.065987L-88.02697099999999,33.063601999999996L-88.028976,33.06275L-88.02846,33.061147L-88.03148,33.061284L-88.030909,33.058420999999996L-88.029876,33.05755L-88.027591,33.057046L-88.02731899999999,33.055946L-88.02911499999999,33.053998L-88.032951,33.052968L-88.033005,33.054755L-88.033903,33.055763999999996L-88.036024,33.055948L-88.03577899999999,33.057848L-88.03871699999999,33.059018L-88.039587,33.058698L-88.039098,33.056222999999996L-88.039371,33.053635L-88.03725,33.049602L-88.034014,33.045981999999995L-88.03298,33.047356L-88.032029,33.04582L-88.031486,33.042429999999996L-88.03379799999999,33.042293L-88.033825,33.040895L-88.041468,33.041171999999996L-88.04179599999999,33.037529L-88.044978,33.037897L-88.04663699999999,33.036682L-88.046311,33.035925999999996L-88.042857,33.034115L-88.04302,33.033108L-88.04079,33.033108L-88.04133399999999,33.031894L-88.039322,33.030381L-88.03896999999999,33.029418L-88.036778,33.028559L-88.042875,33.027806999999996L-88.05258599999999,33.028523L-88.053716,33.027276L-88.052785,33.024060999999996L-88.053111,33.022663L-88.051453,33.019982999999996L-88.049196,33.018104L-88.052595,33.018378999999996L-88.06238499999999,33.018288L-88.063718,33.01728L-88.063881,33.014896L-88.066301,33.013751L-88.071603,33.013957999999995L-88.075409,33.012971L-88.07940699999999,33.013177999999996L-88.080434,33.01258L-88.088256,33.017888L-88.090853,33.018868999999995L-88.09099599999999,33.016450999999996L-88.092315,33.014809L-88.097465,33.012051L-88.102375,33.010022L-88.109624,33.007323L-88.11059399999999,33.006696999999996L-88.115988,33.000492L-88.116905,32.998596L-88.117423,32.989725L-88.120072,32.989998L-88.12105299999999,32.991372999999996L-88.12301,32.991921999999995L-88.12156999999999,32.993342999999996L-88.12146399999999,32.996046L-88.122063,32.997253L-88.124406,32.998261L-88.12612,32.999735L-88.127842,33.002426L-88.12915199999999,33.003461L-88.134785,33.005474L-88.13892899999999,33.007602L-88.143514,33.008978L-88.14900899999999,33.007996L-88.150877,33.004377999999996L-88.150666,33.002558L-88.154275,33.004540999999996L-88.155226,33.007084L-88.156748,33.009329L-88.156774,33.011046L-88.15505999999999,33.015788L-88.152367,33.016567L-88.14872299999999,33.019177L-88.145186,33.022337L-88.145213,33.024628L-88.146001,33.024628L-88.149456,33.022017999999996L-88.153644,33.020736L-88.15495,33.019591999999996L-88.158295,33.021150999999996L-88.158458,33.019180999999996L-88.159818,33.018859L-88.162292,33.019456L-88.16354299999999,33.019135999999996L-88.162864,33.015744999999995L-88.16474099999999,33.014874999999996L-88.167406,33.012538L-88.167569,33.011049L-88.17148499999999,33.009149L-88.169772,33.007292L-88.170507,33.004543999999996L-88.17222699999999,33.003225L-88.172527,33.000126L-88.171852,32.99586L-88.28878499999999,32.992919L-88.293836,32.992953L-88.329878,32.991544999999995L-88.33956099999999,32.991363Z"></path>


Does anyone know what steps to follow to be able to render the zip codes from this US Census Shape File into a D3 Chloropleth.
http://www2.census.gov/geo/tiger/GENZ2017/shp/cb_2017_us_zcta510_500k.zip



function Initialize(){

var promises = ;

promises.push(d3.json("https://d3js.org/us-10m.v1.json"))
promises.push(d3.json(".\data\cb_2017_us_zcta510_500k.json"))
Promise.all(promises).then(function(values){
drawTheMap(values[0], values[1]);
}); }

function drawTheMap(us,zip){

// allow zooming from 1x to 5x
var zooming = d3.zoom()
.scaleExtent([1, 5])
.on("zoom", function () {
svg.attr("transform", d3.event.transform)
})

var svg = d3.select("#map")
.append("svg")
.attr("width", 1200)
.attr("height", 800)
.call(zooming)
.append("g");

var path = d3.geoPath();

var countyFeatures = topojson.feature(us, us.objects.counties).features;
var stateFeatures = topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })
var zipFeature = topojson.feature(zip, zip.cb_2017_us_zcta510_500k).features;
// var usFeature = topojson.feature(us, us.objects.land);

svg.append("g")
.attr("class", "states")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.enter().append("path")
.attr("d", path);

// TODO: Implement state borders being white to help differentiate
// between two states

// svg.append("path")
// .attr("class", "state-borders")
// .attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })))
// .attr("fill", "none")
// .attr("stroke", "white")
// .attr("stroke-linejoin", "round")
// .attr("d", path);

var div = d3.select("body").append("div")
.attr("class", "tooltip");

svg.append("g")
.selectAll("path")
.data(zipFeature)
.enter().append("path")
.attr("d", path)
.on("mouseover", d => {
div
.transition()
.duration(200)
.style('opacity', 0.9);
div
.html(d.id)
.style('left', d3.event.pageX + 'px')
.style('top', d3.event.pageY - 28 + 'px');
})
.on('mouseout', () => {
div
.transition()
.duration(500)
.style('opacity', 0);
})
.on('click', function(d){
GetZipCodeData(d.id)
});


}










share|improve this question
















I'm trying to render a US Zip Code map similar to the one in this blocks article http://bl.ocks.org/jefffriesen/6892860. However, we are using d3 v5 and topojson 2 to render our chloropleth. I've tried using the same json file in the article listed above and creating my own TopoJSON from the US Census shapefile as described in this article https://medium.com/@mbostock/command-line-cartography-part-1-897aa8f8ca2c
When my path elements render they all start with a negative number.

ex.



<path d="M-88.252618,32.92675L-88.249724,32.93242L-88.24927699999999,32.935445L-88.25165799999999,32.939561999999995L-88.244438,32.942834999999995L-88.241524,32.943475L-88.223208,32.943914L-88.220801,32.943674L-88.21701,32.942105999999995L-88.219386,32.944435999999996L-88.21664899999999,32.946624L-88.216779,32.947814L-88.213938,32.949691L-88.212525,32.947789L-88.209617,32.947812L-88.209345,32.945889L-88.207878,32.946484999999996L-88.206734,32.944995L-88.20436,32.946112L-88.203648,32.947345L-88.20190000000001,32.945577L-88.202092,32.938989L-88.200645,32.938452999999996L-88.198272,32.941612L-88.197619,32.944075999999995L-88.197609,32.953398L-88.197054,32.956958L-88.19703899999999,32.960555L-88.198129,32.966284L-88.19906499999999,32.969088L-88.19828199999999,32.968936L-88.196703,32.967236L-88.194583,32.967689L-88.19275999999999,32.96542L-88.18839799999999,32.961354L-88.189757,32.959086L-88.18948499999999,32.95597L-88.18731,32.951251L-88.18298999999999,32.945569L-88.181333,32.944722L-88.177638,32.943737L-88.17405099999999,32.943346999999996L-88.171933,32.941719L-88.17215,32.937964L-88.17489499999999,32.934253L-88.175275,32.933107L-88.17696,32.931939L-88.17799199999999,32.931709999999995L-88.18377799999999,32.931847999999995L-88.185707,32.932145999999996L-88.19130299999999,32.933794999999996L-88.197172,32.93636L-88.197093,32.935778L-88.19902499999999,32.935004L-88.20012899999999,32.929887L-88.200605,32.929224999999995L-88.20639299999999,32.92563L-88.20749699999999,32.924064L-88.207202,32.922716L-88.204803,32.918028L-88.2003,32.914769L-88.191058,32.911997L-88.19048599999999,32.911642L-88.189754,32.910731L-88.18319,32.893147L-88.182761,32.890824L-88.18301799999999,32.887755999999996L-88.183087,32.878425L-88.18166699999999,32.873931999999996L-88.179966,32.871674999999996L-88.173251,32.868770999999995L-88.17160299999999,32.867503L-88.166735,32.861618L-88.16566499999999,32.86069L-88.160356,32.861066L-88.15868999999999,32.860808999999996L-88.156962,32.860365L-88.15571399999999,32.858984L-88.154808,32.85582L-88.154973,32.852874L-88.158541,32.845793L-88.167082,32.83762L-88.171407,32.837187L-88.17805299999999,32.838135L-88.17909,32.837871L-88.18154,32.836090999999996L-88.181857,32.835262L-88.181795,32.834078999999996L-88.179732,32.830204L-88.178343,32.828534999999995L-88.18290499999999,32.826817L-88.183877,32.825393999999996L-88.183489,32.822454L-88.182699,32.821041L-88.182661,32.81944L-88.183483,32.817769L-88.18732899999999,32.815165L-88.188412,32.814828L-88.194653,32.815413L-88.196179,32.816097L-88.19623399999999,32.817411L-88.195144,32.818298L-88.19295,32.818764L-88.19120099999999,32.819854L-88.18997399999999,32.821951999999996L-88.189981,32.824044L-88.191406,32.826448L-88.192756,32.82716L-88.19525999999999,32.827464L-88.200411,32.829626999999995L-88.20471099999999,32.827861L-88.207366,32.827255L-88.21015299999999,32.829473L-88.211468,32.829682999999996L-88.215367,32.829326L-88.217457,32.830933L-88.21967,32.833683L-88.219207,32.834403L-88.216841,32.835541L-88.213628,32.838524L-88.21325499999999,32.840095999999996L-88.21547,32.842189999999995L-88.214934,32.847201999999996L-88.216079,32.848292L-88.217669,32.848816L-88.222061,32.847826999999995L-88.223996,32.848490999999996L-88.225645,32.850783L-88.22749499999999,32.851934L-88.229546,32.85181L-88.23008,32.854284L-88.230988,32.855423L-88.23395699999999,32.856491999999996L-88.236363,32.860262L-88.23566799999999,32.860873999999995L-88.23298,32.859994L-88.231612,32.860939L-88.230048,32.858373L-88.226203,32.857369999999996L-88.22416199999999,32.856403L-88.22027899999999,32.856775L-88.219279,32.859656L-88.22036899999999,32.861633999999995L-88.222899,32.86336L-88.224792,32.866174L-88.22616699999999,32.866673L-88.226458,32.869647L-88.227814,32.870878999999995L-88.223497,32.87269L-88.222126,32.875487L-88.222335,32.87699L-88.22402699999999,32.877916L-88.223743,32.880353L-88.224856,32.880925999999995L-88.221741,32.884943L-88.222796,32.886384L-88.224246,32.886776999999995L-88.22563,32.889120999999996L-88.22819,32.890071L-88.23069699999999,32.891719L-88.231425,32.893645L-88.22992599999999,32.894478L-88.23104599999999,32.899383L-88.232616,32.901367L-88.235406,32.901145L-88.23680999999999,32.903303L-88.241539,32.905958999999996L-88.242971,32.907424L-88.24347399999999,32.910334L-88.24654199999999,32.912438L-88.24688499999999,32.914113L-88.24930499999999,32.914018L-88.252084,32.919995L-88.25314999999999,32.924737ZM-88.34043199999999,32.991199L-88.330934,33.073125L-88.3195645760244,33.1645796939956L-88.31933040454409,33.1664633497658L-88.31749099999999,33.167985L-88.314467,33.16952L-88.309129,33.170139L-88.305533,33.171307L-88.30308199999999,33.173229L-88.30281,33.172199L-88.29787999999999,33.169976999999996L-88.295428,33.171946L-88.293249,33.172244L-88.288455,33.169379L-88.287148,33.167662L-88.284262,33.165577L-88.28080299999999,33.165599L-88.279795,33.165186999999996L-88.278516,33.163582999999996L-88.277917,33.160970999999996L-88.28068999999999,33.156985L-88.279803,33.154184L-88.276325,33.148539L-88.27718899999999,33.145505L-88.279219,33.143431L-88.281938,33.141683L-88.285871,33.139693L-88.291417,33.137355L-88.29141399999999,33.136499L-88.28872199999999,33.138081L-88.284223,33.14013L-88.27828199999999,33.143769999999996L-88.276073,33.146339999999995L-88.275933,33.147449L-88.27660399999999,33.152347L-88.275627,33.158054L-88.274236,33.161645L-88.272155,33.165895L-88.27213499999999,33.167476L-88.272984,33.169649L-88.274514,33.171507L-88.28216499999999,33.177462L-88.28224,33.178343999999996L-88.279626,33.179915L-88.27842799999999,33.180006999999996L-88.273988,33.179088L-88.271264,33.179271L-88.268594,33.180690999999996L-88.266768,33.182752L-88.266413,33.184377999999995L-88.267229,33.186669L-88.270333,33.188983L-88.270578,33.19084L-88.272784,33.190978L-88.271857,33.192352L-88.27278299999999,33.193658L-88.272183,33.196315L-88.27016599999999,33.198077999999995L-88.268231,33.198284L-88.26708599999999,33.19952L-88.265288,33.199565L-88.262044,33.203001L-88.258256,33.203502L-88.257874,33.20467L-88.256239,33.205472L-88.256509,33.208061L-88.25528299999999,33.208748L-88.256181,33.210969999999996L-88.253025,33.211503L-88.25224399999999,33.214335999999996L-88.24953,33.214279999999995L-88.24958699999999,33.216768L-88.248471,33.219738L-88.24547299999999,33.219991L-88.242612,33.220703L-88.239615,33.222217L-88.239398,33.223453L-88.236727,33.22334L-88.23539199999999,33.224831L-88.232286,33.225541L-88.23046,33.226894L-88.22748899999999,33.22827L-88.22806299999999,33.229780999999996L-88.229563,33.23104L-88.229264,33.233216999999996L-88.228065,33.23379L-88.22814799999999,33.235003999999996L-88.226539,33.236036L-88.224249,33.236036999999996L-88.22067899999999,33.237733L-88.21757199999999,33.237595999999996L-88.21757199999999,33.239337L-88.21552799999999,33.239109L-88.214083,33.240186L-88.21152099999999,33.239339L-88.20943799999999,33.237944999999996L-88.20328099999999,33.227525L-88.196902,33.215185999999996L-88.198813,33.213637999999996L-88.20055599999999,33.211255L-88.200665,33.209721L-88.199575,33.207934L-88.196822,33.208163L-88.193743,33.208965L-88.185683,33.193481L-88.183326,33.195883L-88.183447,33.192501L-88.18283799999999,33.191274L-88.184133,33.190421L-88.18181299999999,33.188932L-88.179999,33.188792L-88.179912,33.190216L-88.175011,33.189588L-88.160367,33.183603999999995L-88.16140299999999,33.181014999999995L-88.15974299999999,33.175837L-88.159825,33.173981999999995L-88.162223,33.170913L-88.161842,33.169239999999995L-88.15963599999999,33.167704L-88.16102699999999,33.163216L-88.164868,33.159459999999996L-88.165032,33.157053999999995L-88.166285,33.155473L-88.166286,33.152884L-88.167485,33.150022L-88.17042599999999,33.147822999999995L-88.172923,33.149350999999996L-88.167537,33.144813L-88.16432499999999,33.141542L-88.163117,33.140848L-88.161795,33.142185999999995L-88.161441,33.143813L-88.156048,33.148553L-88.154795,33.149996L-88.152642,33.151140999999996L-88.149237,33.151736L-88.149264,33.152858L-88.147211,33.155099L-88.145849,33.158363L-88.144882,33.159183999999996L-88.138329,33.159962L-88.138637,33.163753L-88.139263,33.165591L-88.14225499999999,33.168999L-88.142759,33.171661L-88.142281,33.1729L-88.139838,33.174498L-88.137481,33.178305L-88.137132,33.181773L-88.13852,33.185029L-88.141136,33.188232L-88.141776,33.189713999999995L-88.140942,33.191992L-88.13569,33.198485999999995L-88.13434,33.201127L-88.130403,33.200519L-88.129257,33.199061L-88.12123299999999,33.196242999999996L-88.11784899999999,33.192805L-88.114978,33.193422L-88.10863499999999,33.193959L-88.106437,33.193506L-88.106582,33.191728999999995L-88.105,33.188753L-88.105744,33.187523999999996L-88.10336,33.185879L-88.101479,33.190864999999995L-88.10139799999999,33.193565L-88.09245,33.193543L-88.08924499999999,33.194851L-88.090316,33.194231L-88.089525,33.191229L-88.088871,33.190244L-88.08521999999999,33.18965L-88.085737,33.188665L-88.083503,33.187635L-88.08243999999999,33.188345L-88.08053199999999,33.185963L-88.077772,33.186541L-88.07797699999999,33.190956L-88.076646,33.192448999999996L-88.071705,33.188437L-88.06892599999999,33.186904L-88.06486699999999,33.182390999999996L-88.061487,33.177189999999996L-88.061297,33.174121L-88.06034299999999,33.171303L-88.060114,33.167622L-88.05939699999999,33.166224L-88.06278499999999,33.162759L-88.056365,33.162275L-88.056378,33.159928L-88.053404,33.155794L-88.050298,33.152647L-88.048616,33.151682L-88.04751,33.148525L-88.04388999999999,33.144394L-88.038444,33.141413L-88.039947,33.140194L-88.040984,33.136479L-88.040187,33.135083L-88.041474,33.133021L-88.041094,33.131188L-88.038589,33.128873999999996L-88.04030499999999,33.128392999999996L-88.04542699999999,33.123965999999996L-88.047169,33.1233L-88.04746899999999,33.120712999999995L-88.049565,33.117323L-88.050981,33.116957L-88.054085,33.114573L-88.055364,33.109556999999995L-88.055256,33.103189L-88.057406,33.099958L-88.060183,33.097392L-88.060727,33.09485L-88.058849,33.092238L-88.05631799999999,33.090885L-88.050603,33.090817L-88.049786,33.090427999999996L-88.05112,33.087517999999996L-88.05269799999999,33.087036999999995L-88.05321599999999,33.085066999999995L-88.054576,33.084632L-88.05493,33.082364L-88.062028,33.079805L-88.03058899999999,33.065987L-88.02697099999999,33.063601999999996L-88.028976,33.06275L-88.02846,33.061147L-88.03148,33.061284L-88.030909,33.058420999999996L-88.029876,33.05755L-88.027591,33.057046L-88.02731899999999,33.055946L-88.02911499999999,33.053998L-88.032951,33.052968L-88.033005,33.054755L-88.033903,33.055763999999996L-88.036024,33.055948L-88.03577899999999,33.057848L-88.03871699999999,33.059018L-88.039587,33.058698L-88.039098,33.056222999999996L-88.039371,33.053635L-88.03725,33.049602L-88.034014,33.045981999999995L-88.03298,33.047356L-88.032029,33.04582L-88.031486,33.042429999999996L-88.03379799999999,33.042293L-88.033825,33.040895L-88.041468,33.041171999999996L-88.04179599999999,33.037529L-88.044978,33.037897L-88.04663699999999,33.036682L-88.046311,33.035925999999996L-88.042857,33.034115L-88.04302,33.033108L-88.04079,33.033108L-88.04133399999999,33.031894L-88.039322,33.030381L-88.03896999999999,33.029418L-88.036778,33.028559L-88.042875,33.027806999999996L-88.05258599999999,33.028523L-88.053716,33.027276L-88.052785,33.024060999999996L-88.053111,33.022663L-88.051453,33.019982999999996L-88.049196,33.018104L-88.052595,33.018378999999996L-88.06238499999999,33.018288L-88.063718,33.01728L-88.063881,33.014896L-88.066301,33.013751L-88.071603,33.013957999999995L-88.075409,33.012971L-88.07940699999999,33.013177999999996L-88.080434,33.01258L-88.088256,33.017888L-88.090853,33.018868999999995L-88.09099599999999,33.016450999999996L-88.092315,33.014809L-88.097465,33.012051L-88.102375,33.010022L-88.109624,33.007323L-88.11059399999999,33.006696999999996L-88.115988,33.000492L-88.116905,32.998596L-88.117423,32.989725L-88.120072,32.989998L-88.12105299999999,32.991372999999996L-88.12301,32.991921999999995L-88.12156999999999,32.993342999999996L-88.12146399999999,32.996046L-88.122063,32.997253L-88.124406,32.998261L-88.12612,32.999735L-88.127842,33.002426L-88.12915199999999,33.003461L-88.134785,33.005474L-88.13892899999999,33.007602L-88.143514,33.008978L-88.14900899999999,33.007996L-88.150877,33.004377999999996L-88.150666,33.002558L-88.154275,33.004540999999996L-88.155226,33.007084L-88.156748,33.009329L-88.156774,33.011046L-88.15505999999999,33.015788L-88.152367,33.016567L-88.14872299999999,33.019177L-88.145186,33.022337L-88.145213,33.024628L-88.146001,33.024628L-88.149456,33.022017999999996L-88.153644,33.020736L-88.15495,33.019591999999996L-88.158295,33.021150999999996L-88.158458,33.019180999999996L-88.159818,33.018859L-88.162292,33.019456L-88.16354299999999,33.019135999999996L-88.162864,33.015744999999995L-88.16474099999999,33.014874999999996L-88.167406,33.012538L-88.167569,33.011049L-88.17148499999999,33.009149L-88.169772,33.007292L-88.170507,33.004543999999996L-88.17222699999999,33.003225L-88.172527,33.000126L-88.171852,32.99586L-88.28878499999999,32.992919L-88.293836,32.992953L-88.329878,32.991544999999995L-88.33956099999999,32.991363Z"></path>


Does anyone know what steps to follow to be able to render the zip codes from this US Census Shape File into a D3 Chloropleth.
http://www2.census.gov/geo/tiger/GENZ2017/shp/cb_2017_us_zcta510_500k.zip



function Initialize(){

var promises = ;

promises.push(d3.json("https://d3js.org/us-10m.v1.json"))
promises.push(d3.json(".\data\cb_2017_us_zcta510_500k.json"))
Promise.all(promises).then(function(values){
drawTheMap(values[0], values[1]);
}); }

function drawTheMap(us,zip){

// allow zooming from 1x to 5x
var zooming = d3.zoom()
.scaleExtent([1, 5])
.on("zoom", function () {
svg.attr("transform", d3.event.transform)
})

var svg = d3.select("#map")
.append("svg")
.attr("width", 1200)
.attr("height", 800)
.call(zooming)
.append("g");

var path = d3.geoPath();

var countyFeatures = topojson.feature(us, us.objects.counties).features;
var stateFeatures = topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })
var zipFeature = topojson.feature(zip, zip.cb_2017_us_zcta510_500k).features;
// var usFeature = topojson.feature(us, us.objects.land);

svg.append("g")
.attr("class", "states")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.enter().append("path")
.attr("d", path);

// TODO: Implement state borders being white to help differentiate
// between two states

// svg.append("path")
// .attr("class", "state-borders")
// .attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })))
// .attr("fill", "none")
// .attr("stroke", "white")
// .attr("stroke-linejoin", "round")
// .attr("d", path);

var div = d3.select("body").append("div")
.attr("class", "tooltip");

svg.append("g")
.selectAll("path")
.data(zipFeature)
.enter().append("path")
.attr("d", path)
.on("mouseover", d => {
div
.transition()
.duration(200)
.style('opacity', 0.9);
div
.html(d.id)
.style('left', d3.event.pageX + 'px')
.style('top', d3.event.pageY - 28 + 'px');
})
.on('mouseout', () => {
div
.transition()
.duration(500)
.style('opacity', 0);
})
.on('click', function(d){
GetZipCodeData(d.id)
});


}







d3.js topojson






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 25 '18 at 5:20







Chris Savage

















asked Nov 25 '18 at 3:16









Chris SavageChris Savage

807




807













  • Can you share your code - the example is pretty concise, so it should fit easily. Can you replicate the example with the same json file as the example? or is it just the topojson you created that is problematic?

    – Andrew Reid
    Nov 25 '18 at 4:26













  • Honestly, I don't know what the problem is. i used this command to create the json file. shp2json cb_2017_us_zcta510_500k.shp -o zip.json

    – Chris Savage
    Nov 25 '18 at 5:15













  • i've added my javascript to the question

    – Chris Savage
    Nov 25 '18 at 5:18











  • Did you project your geographic data? You are not using a projection in your javascript, and if you aren't projecting your topojson when creating it, the path values you see: -88.252618,32.92675 are simply latitude/longitude pairs converted to pixel values with no transformation. I'd guess this coordinate is somewhere on the eastern seaboard and corresponds to a lat/long pair. Mike does talk about projection a bit in the article, though you can also use: path = d3.geoPath().projection(projection) where projection might be d3.geoAlbersUsa() for example.

    – Andrew Reid
    Nov 25 '18 at 5:45





















  • Can you share your code - the example is pretty concise, so it should fit easily. Can you replicate the example with the same json file as the example? or is it just the topojson you created that is problematic?

    – Andrew Reid
    Nov 25 '18 at 4:26













  • Honestly, I don't know what the problem is. i used this command to create the json file. shp2json cb_2017_us_zcta510_500k.shp -o zip.json

    – Chris Savage
    Nov 25 '18 at 5:15













  • i've added my javascript to the question

    – Chris Savage
    Nov 25 '18 at 5:18











  • Did you project your geographic data? You are not using a projection in your javascript, and if you aren't projecting your topojson when creating it, the path values you see: -88.252618,32.92675 are simply latitude/longitude pairs converted to pixel values with no transformation. I'd guess this coordinate is somewhere on the eastern seaboard and corresponds to a lat/long pair. Mike does talk about projection a bit in the article, though you can also use: path = d3.geoPath().projection(projection) where projection might be d3.geoAlbersUsa() for example.

    – Andrew Reid
    Nov 25 '18 at 5:45



















Can you share your code - the example is pretty concise, so it should fit easily. Can you replicate the example with the same json file as the example? or is it just the topojson you created that is problematic?

– Andrew Reid
Nov 25 '18 at 4:26







Can you share your code - the example is pretty concise, so it should fit easily. Can you replicate the example with the same json file as the example? or is it just the topojson you created that is problematic?

– Andrew Reid
Nov 25 '18 at 4:26















Honestly, I don't know what the problem is. i used this command to create the json file. shp2json cb_2017_us_zcta510_500k.shp -o zip.json

– Chris Savage
Nov 25 '18 at 5:15







Honestly, I don't know what the problem is. i used this command to create the json file. shp2json cb_2017_us_zcta510_500k.shp -o zip.json

– Chris Savage
Nov 25 '18 at 5:15















i've added my javascript to the question

– Chris Savage
Nov 25 '18 at 5:18





i've added my javascript to the question

– Chris Savage
Nov 25 '18 at 5:18













Did you project your geographic data? You are not using a projection in your javascript, and if you aren't projecting your topojson when creating it, the path values you see: -88.252618,32.92675 are simply latitude/longitude pairs converted to pixel values with no transformation. I'd guess this coordinate is somewhere on the eastern seaboard and corresponds to a lat/long pair. Mike does talk about projection a bit in the article, though you can also use: path = d3.geoPath().projection(projection) where projection might be d3.geoAlbersUsa() for example.

– Andrew Reid
Nov 25 '18 at 5:45







Did you project your geographic data? You are not using a projection in your javascript, and if you aren't projecting your topojson when creating it, the path values you see: -88.252618,32.92675 are simply latitude/longitude pairs converted to pixel values with no transformation. I'd guess this coordinate is somewhere on the eastern seaboard and corresponds to a lat/long pair. Mike does talk about projection a bit in the article, though you can also use: path = d3.geoPath().projection(projection) where projection might be d3.geoAlbersUsa() for example.

– Andrew Reid
Nov 25 '18 at 5:45














0






active

oldest

votes











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53464342%2fchloropleth-of-us-zip-codes-using-d3-v5-and-topojson2%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























0






active

oldest

votes








0






active

oldest

votes









active

oldest

votes






active

oldest

votes
















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53464342%2fchloropleth-of-us-zip-codes-using-d3-v5-and-topojson2%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Tonle Sap (See)

I get strange results when I access the Sqlitedatabase with Unity C# via XAMPP

Guatemaltekische Davis-Cup-Mannschaft