Chloropleth of US Zip Codes using D3 v5 and TopoJson2
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
add a comment |
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
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
add a comment |
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
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
d3.js topojson
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
add a comment |
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
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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