D3.js dc.ChoroplethChart的问题
这是使用dc.js和crossfilter显示choropleth图表的代码。该图表不会显示，而是显示一个只有一个区域数据的空白方块。我想得到一个包含所有区域数据的完整图形。我甚至尝试过使用不同的投影函数，甚至尝试过删除.projection、.colordomain，但没有任何效果。Infoviz1.geojson（） NewData.csv（） . 请帮帮我D3.js dc.ChoroplethChart的问题,d3.js,dc.js,crossfilter,D3.js,Dc.js,Crossfilter,这是使用dc.js和crossfilter显示choropleth图表的代码。该图表不会显示，而是显示一个只有一个区域数据的空白方块。我想得到一个包含所有区域数据的完整图形。我甚至尝试过使用不同的投影函数，甚至尝试过删除.projection、.colordomain，但没有任何效果。Infoviz1.geojson（） NewData.csv（） . 请帮帮我 var CanadaChart = dc.geoChoroplethChart("#canada-chart"
var CanadaChart = dc.geoChoroplethChart("#canada-chart");
queue()
.defer(d3.csv, "NewData.csv")
.defer(d3.json, "infoviz1.geojson")
.await(makeGraphs);
function makeGraphs(error, url, url2json) {
var data = url;
console.log(url2json["features"]);
data.forEach(function (d) {
d.Episode_week = +d["Episode_week"];
});
var ndx = crossfilter(data);
// Dimensions declaration
var CanadaDim = ndx.dimension(function (d) { return d["Region"];});
console.log(CanadaDim.top(Infinity))
// Groups Metrics
var CanadaGroup = CanadaDim.group().reduceCount();
console.log(CanadaGroup.top(Infinity));
CanadaChart
.width(110)
.height(250)
.dimension(CanadaDim)
.group(CanadaGroup)
.colors(["#edf8fb", "#b2e2e2", "#66c2a4", "#2ca25f", "#006d2c"])
.colorDomain([612, 20000])
.overlayGeoJson(url2json.features,"State", function (p) {
console.log(p.properties.name)
return p.properties.name;
})
.projection(d3.geo.albers()
.scale(300).center([0, 60])
.translate([350, 200]))
.title(function (d) {
return "Region: " + d["key"]
+ "\n"
+ "TotalCases" + Math.round(d["value"]) ;
});
这是我自定义的geojson文件：
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"name":"Region5"},"geometry":{"type":"Polygon","coordinates":[[[-122.958984375,49.210420445650286],[-114.43359375,49.15296965617042],[-114.9609375,50.28933925329178],[-120.0146484375,53.85252660044951],[-119.970703125,60.06484046010452],[-123.57421875,60.06484046010452],[-126.21093749999999,60.84491057364912],[-130.95703125,64.24459476798195],[-133.9453125,67.03316279015063],[-135.966796875,67.03316279015063],[-136.23046875,68.9110048456202],[-141.15234374999997,69.71810669906763],[-141.50390625,60.19615576604439],[-134.560546875,58.44773280389084],[-129.90234375,53.904338156274704],[-127.44140625,51.890053935216926],[-122.958984375,49.210420445650286]]]}},{"type":"Feature","properties":{"name":"Region4"},"geometry":{"type":"Polygon","coordinates":[[[-135.87890625,68.97416358340674],[-136.0546875,67.16995497083367],[-133.9453125,67.03316279015063],[-126.5625,60.88770004207789],[-123.662109375,60.108670463036],[-119.970703125,60.02095215374802],[-119.970703125,53.9560855309879],[-114.873046875,50.3454604086048],[-114.521484375,49.210420445650286],[-95.09765625,48.980216985374994],[-95.2734375,52.96187505907603],[-88.330078125,56.9449741808516],[-92.373046875,57.040729838360875],[-95.09765625,60.06484046010452],[-102.041015625,59.93300042374631],[-101.77734374999999,64.20637724320852],[-108.720703125,64.73664139557683],[-109.599609375,65.44000165965534],[-112.8515625,65.62202261510642],[-120.673828125,67.7760253890732],[-120.673828125,69.62651016802958],[-123.04687499999999,69.41124235697256],[-125.94726562499999,69.53451763078358],[-127.96875,70.05059634999759],[-135.87890625,68.97416358340674]]]}},{"type":"Feature","properties":{"name":"Region3"},"geometry":{"type":"Polygon","coordinates":[[[-87.71484375,56.218923189166624],[-88.59374999999999,56.65622649350222],[-95.185546875,52.9751081817353],[-95.00976562499999,49.36806633482156],[-94.85595703125,49.33944093715546],[-94.658203125,48.850258199721495],[-94.130859375,48.66194284607006],[-93.1201171875,48.63290858589535],[-92.59277343749999,48.48748647988415],[-91.82373046875,48.16608541901253],[-90.87890625,48.122101028190805],[-89.49462890625,48.06339653776211],[-88.1982421875,48.90805939965008],[-86.50634765625,48.719961222646276],[-86.0009765625,48.019324184801185],[-85.078125,47.97521412341618],[-84.39697265625,46.46813299215554],[-83.49609375,46.255846818480315],[-82.1337890625,46.17983040759436],[-80.57373046875,45.72152152227954],[-79.87060546875,44.91813929958515],[-80.1123046875,44.512176171071054],[-81.36474609375,45.19752230305682],[-81.27685546875,44.74673324024678],[-81.73828125,43.58039085560784],[-82.6171875,42.68243539838623],[-82.24365234375,42.32606244456202],[-79.82666015625,43.35713822211053],[-76.5087890625,44.18220395771566],[-75.03662109375,44.933696389694674],[-73.916015625,45.3521452458518],[-74.53125,45.644768217751924],[-75.78369140625,45.398449976304086],[-78.64013671875,46.36209301204985],[-79.5849609375,47.62097541515849],[-79.453125,51.42661449707482],[-81.73828125,52.696361078274485],[-82.353515625,55.178867663281984],[-84.19921875,55.02802211299252],[-86.923828125,55.92458580482951],[-95.80078125,60.108670463036],[-101.513671875,60.23981116999893],[-101.337890625,64.24459476798195],[-108.544921875,64.8115572502203],[-109.51171875,65.5129625532949],[-112.8515625,65.6582745198266],[-120.58593749999999,67.84241647327927],[-120.673828125,69.56522590149099],[-116.3671875,68.942606818121],[-115.31249999999999,68.10610151896537],[-110.12695312499999,68.10610151896537],[-107.666015625,66.65297740055279],[-106.61132812499999,68.366801093914],[-104.4140625,67.97463396204759],[-98.0859375,67.84241647327927],[-96.064453125,67.06743335108298],[-95.2734375,68.10610151896537],[-93.07617187499999,69.00567519658819],[-91.40625,69.31832006949072],[-89.6484375,69.25614923150721],[-87.099609375,67.2720426739952],[-85.4296875,68.65655498475735],[-84.19921875,69.7485511291223],[-82.177734375,68.6885206018014],[-81.2109375,67.44122869796351],[-83.232421875,66.5482634621744],[-86.044921875,66.37275500247455],[-86.8359375,65.14611484756372],[-92.548828125,62.67414334669093],[-95.09765625,60.23981116999893],[-87.71484375,56.218923189166624]]]}},{"type":"Feature","properties":{"name":"Region2"},"geometry":{"type":"Polygon","coordinates":[[[-79.013671875,51.45400691005982],[-79.365234375,47.635783590864854],[-78.31054687499999,46.437856895024204],[-75.76171875,45.644768217751924],[-74.35546875,45.89000815866184],[-71.103515625,47.100044694025215],[-66.796875,50.17689812200107],[-62.84179687499999,50.3454604086048],[-56.953125,51.56341232867588],[-63.19335937499999,52.26815737376817],[-63.80859374999999,52.74959372674114],[-64.248046875,51.890053935216926],[-66.181640625,52.908902047770255],[-67.5,54.36775852406841],[-66.884765625,54.97761367069628],[-63.369140625,54.62297813269033],[-64.86328125,59.977005492196],[-67.32421875,58.53959476664049],[-69.169921875,58.768200159239576],[-69.9609375,60.973107109199404],[-73.828125,62.431074232920906],[-77.431640625,62.552856958572896],[-78.3984375,58.99531118795094],[-76.2890625,56.26776108757582],[-79.62890625,54.87660665410869],[-78.486328125,52.16045455774706],[-79.013671875,51.45400691005982]]]}},{"type":"Feature","properties":{"name":"Region1"},"geometry":{"type":"Polygon","coordinates":[[[-64.775390625,60.261617082844616],[-63.32519531249999,54.635697306063854],[-66.86279296875,54.96500166110205],[-67.4560546875,54.34214886448341],[-66.07177734375,52.93539665862318],[-64.35791015625,51.97134580885172],[-63.87451171875,52.84259457223949],[-63.21533203124999,52.38901106223458],[-56.84326171875,51.6180165487737],[-55.7666015625,52.14697334064471],[-55.8984375,53.396432127095984],[-57.10693359375,53.8265967429941],[-57.94189453125,54.34214886448341],[-57.23876953124999,54.62297813269033],[-59.08447265624999,54.99022172004893],[-60.1171875,55.32914440840507],[-60.53466796874999,55.81362907119958],[-61.25976562499999,56.30434864830831],[-61.39160156249999,56.90900226702048],[-61.962890625,57.903174456371474],[-64.70947265625,60.48970392643919],[-64.775390625,60.261617082844616]]]}}]}
count,Row Labels,Age,Dea,Episode_week,Recv,Region,Recovered
1,1059,5,0,8,1,Region5,1
1,4716,6,0,8,1,Region5,1
1,5931,8,0,8,1,Region2,1
1,6778,6,0,8,1,Region5,1
1,6814,6,0,8,1,Region2,1
1,6979,6,0,8,1,Region3,1
1,7632,3,0,8,1,Region2,1
1,8842,3,0,8,1,Region2,1
1,8856,1,0,8,1,Region2,1
1,10639,8,0,8,1,Region2,1
1,11394,1,0,8,1,Region2,1
1,11558,3,0,8,1,Region5,1
1,12600,5,0,8,1,Region2,1
1,13105,2,0,8,1,Region2,1
1,13196,3,0,8,1,Region2,1
1,13318,8,0,8,1,Region2,1
1,13583,2,0,8,1,Region2,1
1,14811,5,0,8,1,Region2,1
1,14864,2,0,8,1,Region2,1
1,14939,5,0,8,1,Region5,1
1,15445,8,0,8,1,Region2,1
1,17313,5,0,8,1,Region3,1
1,19115,6,0,8,1,Region5,1
1,19970,5,0,8,0,Region2,0
1,20773,5,0,8,1,Region5,1
1,21446,5,0,8,1,Region5,1
1,21522,5,0,8,1,Region3,1
1,21543,2,0,8,1,Region2,1
1,22133,2,0,8,1,Region2,1
1,23536,5,0,8,1,Region5,1
1,23699,8,0,8,1,Region2,1
1,23830,3,0,8,1,Region3,1
1,25580,3,0,8,1,Region5,1
1,26213,1,0,8,1,Region2,1
1,26412,4,0,8,1,Region2,1
1,27032,6,0,8,1,Region2,1
1,28321,2,0,8,1,Region2,1
1,30678,5,0,8,1,Region5,1
1,30982,4,0,8,1,Region2,1
1,31764,2,0,8,1,Region2,1
1,31944,4,0,8,1,Region2,1
1,34577,6,0,8,1,Region3,1
1,36047,1,0,8,0,Region2,0
1,37365,4,0,8,1,Region2,1
1,9,6,0,8,1,Region2,1
1,171,4,0,8,1,Region3,1
1,432,3,0,8,0,Region2,0
1,730,3,0,8,0,Region2,0
1,968,1,0,8,1,Region5,1
1,1282,7,1,8,0,Region2,2
1,1491,8,0,8,0,Region2,0
1,1751,6,1,8,0,Region2,2
1,2016,6,0,8,1,Region2,1
1,2214,2,0,8,0,Region2,0
1,2515,5,0,8,1,Region5,1
1,2790,7,0,8,0,Region2,0
1,3002,8,1,8,0,Region2,2
1,3265,3,0,8,1,Region4,1
1,3618,8,0,8,0,Region2,0
1,3877,7,1,8,0,Region2,2
1,4082,6,0,8,0,Region3,0
1,4370,2,0,8,1,Region5,1
1,4580,99,0,8,0,Region2,0
1,4764,2,0,8,0,Region2,0
1,5044,7,1,8,0,Region2,2
1,5258,5,0,8,1,Region5,1
1,5517,8,0,8,0,Region2,0
1,5786,2,0,8,1,Region1,1
1,6238,8,0,8,1,Region2,1
1,6476,8,0,8,1,Region2,1
1,6740,3,0,8,0,Region2,0
1,6936,6,0,8,0,Region2,0
1,7208,7,0,8,0,Region2,0
1,7482,8,1,8,0,Region2,2
1,7818,7,0,8,0,Region2,0
1,8097,2,0,8,0,Region3,0
1,8307,3,0,8,0,Region2,0
1,8500,6,0,8,0,Region2,0
1,8701,3,0,8,0,Region2,0
1,8896,6,0,8,1,Region2,1
1,9070,7,1,8,0,Region2,2
1,9314,5,0,8,1,Region2,1
1,9502,8,1,8,0,Region2,2
1,9777,8,0,8,0,Region2,0
1,9933,6,1,8,0,Region2,2
1,10137,2,0,8,0,Region2,0
1,10388,6,1,8,0,Region3,2
1,10582,8,0,8,0,Region2,0
1,10831,8,1,8,0,Region2,2
1,11054,3,0,8,0,Region2,0
1,11268,3,0,8,0,Region2,0
1,11483,2,0,8,0,Region2,0
1,11721,8,1,8,0,Region2,2
1,11983,5,0,8,0,Region2,0
1,12231,8,0,8,0,Region2,0
1,12483,8,0,8,0,Region2,0
1,12689,7,0,8,1,Region2,1
1,12844,8,0,8,0,Region2,0
1,13081,8,0,8,0,Region2,0
1,13298,5,0,8,0,Region3,0
1,13472,5,0,8,0,Region2,0
1,13713,4,0,8,1,Region4,1
1,13988,5,0,8,1,Region5,1
1,14105,8,0,8,0,Region2,0
1,14353,8,1,8,0,Region2,2
1,14715,7,0,8,0,Region2,0
1,14961,3,0,8,1,Region2,1
1,15172,7,0,8,0,Region2,0
1,15437,2,0,8,0,Region2,0
1,15678,5,0,8,0,Region2,0
1,15873,8,1,8,0,Region2,2
1,16159,8,0,8,1,Region2,1
1,16450,8,0,8,1,Region2,1
1,16733,2,0,8,1,Region1,1
1,16916,8,0,8,0,Region2,0
1,17200,3,0,8,0,Region2,0
1,17427,2,0,8,0,Region2,0
1,17713,5,0,8,0,Region2,0
1,17906,8,0,8,0,Region2,0
1,18132,4,0,8,1,Region2,1
1,18378,5,0,8,0,Region2,0
1,18556,8,0,8,0,Region2,0
1,18758,7,0,8,1,Region2,1
1,19016,8,1,8,0,Region2,2
1,19241,1,0,8,1,Region2,1
1,19429,6,0,8,0,Region3,0
1,19771,8,0,8,0,Region2,0
1,20055,99,0,8,1,Region1,1
1,20169,8,1,8,0,Region2,2
1,20325,4,0,8,0,Region2,0
1,20546,7,0,8,1,Region4,1
1,20904,4,0,8,0,Region2,0
1,21093,7,0,8,1,Region3,1
1,21312,2,0,8,0,Region2,0
1,21492,3,0,8,1,Region1,1
1,21722,6,0,8,1,Region2,1
1,21988,8,0,8,0,Region2,0
1,22173,8,0,8,0,Region2,0
1,22407,8,1,8,0,Region2,2
1,22613,99,1,8,0,Region2,2
1,22831,8,0,8,0,Region2,0
1,22987,2,0,8,0,Region2,0
1,23276,4,0,8,0,Region2,0
1,23539,8,0,8,1,Region1,1
1,23788,8,0,8,0,Region2,0
1,24085,8,1,8,0,Region2,2
1,24273,8,0,8,0,Region2,0
1,24509,8,1,8,0,Region2,2
1,24726,8,1,8,0,Region3,2
1,24878,8,1,8,0,Region2,2
1,25073,2,0,8,1,Region5,1
1,25268,8,0,8,0,Region2,0
1,25541,8,0,8,0,Region2,0
1,25746,8,1,8,0,Region2,2
1,25983,8,0,8,0,Region2,0
1,26236,8,0,8,0,Region2,0
1,26353,2,0,8,0,Region2,0
1,26497,2,0,8,1,Region4,1
1,26685,6,0,8,0,Region2,0
1,26892,4,0,8,0,Region2,0
1,27142,2,0,8,0,Region2,0
1,27341,4,0,8,1,Region2,1
1,27646,3,0,8,0,Region2,0
1,27945,5,0,8,1,Region2,1
1,28127,3,0,8,0,Region2,0
1,28405,2,0,8,0,Region2,0
1,28636,6,0,8,1,Region4,1
1,28838,8,1,8,0,Region2,2
1,28995,8,1,8,0,Region2,2
1,29280,7,1,8,0,Region2,2
1,29616,2,0,8,0,Region3,0
1,29808,5,0,8,1,Region2,1
1,30096,5,0,8,0,Region2,0
1,30446,8,0,8,0,Region2,0
1,30637,8,0,8,1,Region2,1
1,30881,3,0,8,1,Region5,1
1,31183,5,0,8,0,Region2,0
1,31469,8,0,8,0,Region2,0
1,31723,8,1,8,0,Region2,2
1,31939,4,0,8,0,Region5,0
1,32100,8,0,8,0,Region2,0
1,32441,4,0,8,0,Region2,0
1,32787,8,1,8,0,Region2,2
1,33069,8,0,8,0,Region2,0
1,33294,2,0,8,0,Region2,0
1,33506,8,1,8,0,Region2,2
1,33690,5,0,8,1,Region3,1
1,34093,7,0,8,0,Region2,0
1,34406,8,1,8,0,Region2,2
1,34608,2,0,8,0,Region2,0
1,34784,8,1,8,0,Region2,2
1,35057,7,0,8,1,Region1,1
1,35315,8,0,8,1,Region2,1
1,35504,1,0,8,1,Region2,1
1,35744,3,0,8,1,Region5,1
1,35918,6,0,8,1,Region1,1
1,36150,6,0,8,0,Region2,0
1,36406,6,0,8,1,Region1,1
1,36668,7,1,8,0,Region2,2
1,36938,2,0,8,1,Region2,1
1,37191,8,0,8,0,Region2,0
1,37407,8,0,8,0,Region2,0
1,108,5,0,9,1,Region3,1
1,414,6,0,9,1,Region2,1
1,577,5,0,9,0,Region2,0
1,727,5,0,9,1,Region3,1
1,788,3,0,9,1,Region2,1
1,1010,6,0,9,1,Region3,1
1,1305,8,0,9,0,Region3,0
1,1525,3,0,9,1,Region5,1
1,1860,2,0,9,1,Region5,1
1,1944,2,0,9,1,Region3,1
1,2380,3,0,9,1,Region3,1
1,2628,5,0,9,0,Region2,0
1,2637,6,0,9,1,Region2,1
1,2927,4,0,9,0,Region2,0
1,3991,6,0,9,1,Region5,1
1,4202,3,0,9,1,Region2,1
1,4305,5,0,9,1,Region3,1
1,4423,6,0,9,1,Region5,1
1,4774,4,0,9,0,Region2,0
1,4831,2,0,9,1,Region2,1
1,4987,1,0,9,1,Region2,1
1,5225,4,0,9,1,Region3,1
1,5352,6,0,9,1,Region5,1
1,5396,4,0,9,1,Region3,1
1,5443,2,0,9,0,Region2,0
1,5505,2,0,9,1,Region3,1
1,5598,4,0,9,1,Region3,1
1,6043,6,0,9,1,Region3,1
1,6654,5,0,9,1,Region2,1
1,6763,6,0,9,1,Region5,1
1,6864,5,0,9,0,Region2,0
1,6975,5,0,9,1,Region5,1
1,7640,7,0,9,1,Region3,1
1,7642,8,0,9,1,Region2,1
1,8546,6,0,9,1,Region5,1
1,8776,1,0,9,1,Region2,1
1,9036,3,0,9,1,Region5,1
1,9130,7,0,9,1,Region5,1
1,9423,6,0,9,1,Region3,1
1,10408,6,0,9,1,Region3,1
1,10511,6,0,9,1,Region3,1
1,10773,5,0,9,1,Region3,1
1,12244,3,0,9,1,Region4,1
1,12453,3,0,9,1,Region5,1
1,13473,5,0,9,1,Region4,1
1,13512,4,0,9,1,Region5,1
1,13659,5,0,9,1,Region3,1
1,15397,3,0,9,1,Region3,1
1,15734,6,0,9,1,Region3,1
1,15810,5,0,9,1,Region3,1
1,16153,5,0,9,1,Region2,1
1,16270,3,0,9,1,Region5,1
1,16370,2,0,9,1,Region5,1
1,16919,5,0,9,1,Region3,1
1,16955,6,0,9,0,Region2,0
1,16974,4,0,9,1,Region3,1
1,16983,2,0,9,0,Region2,0
1,17069,7,0,9,1,Region2,1
1,17143,7,0,9,1,Region5,1
1,17841,2,0,9,1,Region2,1
1,18053,5,0,9,0,Region2,0
1,18198,4,0,9,1,Region5,1
1,18238,6,0,9,1,Region2,1
1,18363,5,0,9,1,Region5,1
1,18657,3,0,9,1,Region4,1
1,18700,7,0,9,1,Region5,1
1,18711,4,0,9,1,Region4,1
1,19263,7,1,9,0,Region3,2
1,19440,7,0,9,1,Region3,1
1,19665,3,0,9,1,Region4,1
1,19698,5,0,9,1,Region3,1
1,19749,5,0,9,1,Region4,1
1,20206,4,0,9,1,Region3,1
1,20842,99,0,9,1,Region3,1
1,20975,4,0,9,1,Region2,1
1,21142,2,0,9,1,Region3,1
1,21386,3,0,9,1,Region2,1
1,21519,6,0,9,1,Region3,1
1,21649,1,0,9,1,Region2,1
1,22199,4,0,9,1,Region3,1
1,22401,4,0,9,1,Region3,1
1,22573,4,0,9,1,Region3,1
1,22574,5,0,9,1,Region3,1
1,23329,7,0,9,1,Region5,1
1,23543,5,0,9,1,Region3,1
1,23684,6,0,9,1,Region3,1
1,23976,5,0,9,1,Region2,1
1,24339,4,0,9,1,Region4,1
1,25592,3,0,9,1,Region5,1
1,26070,2,0,9,1,Region5,1
1,26238,5,0,9,0,Region2,0
1,26367,3,0,9,1,Region3,1
1,26410,5,0,9,1,Region5,1
1,26440,6,0,9,1,Region2,1
1,26533,7,0,9,1,Region5,1
1,26582,5,0,9,1,Region3,1
1,27043,5,0,9,1,Region2,1
1,27430,7,0,9,1,Region5,1
1,27452,6,0,9,0,Region2,0
1,27826,6,0,9,1,Region5,1
1,27969,5,0,9,1,Region5,1
1,28090,3,0,9,0,Region2,0
1,28197,5,0,9,1,Region2,1
1,28598,6,0,9,0,Region3,0
1,28759,5,0,9,1,Region4,1
1,28925,7,0,9,1,Region2,1
1,29744,5,0,9,1,Region3,1
1,29881,5,0,9,1,Region4,1
1,29936,3,0,9,1,Region5,1
1,30308,6,0,9,1,Region5,1
1,31337,5,0,9,1,Region3,1
1,31356,5,0,9,1,Region2,1
1,31408,3,0,9,1,Region4,1
1,31698,4,0,9,1,Region5,1
1,32270,4,0,9,1,Region5,1
1,32626,2,0,9,1,Region4,1
1,32864,5,0,9,1,Region2,1
1,33115,6,0,9,1,Region2,1
1,33406,7,0,9,1,Region5,1
1,33450,6,0,9,1,Region2,1
1,33522,1,0,9,1,Region2,1
1,34238,5,0,9,1,Region5,1
1,34388,4,0,9,1,Region4,1
1,34500,4,0,9,1,Region3,1
1,35187,2,0,9,1,Region3,1
1,35211,5,0,9,1,Region4,1
1,35320,3,0,9,0,Region2,0
1,35846,3,0,9,1,Region3,1
1,35999,3,0,9,1,Region2,1
1,36010,5,0,9,1,Region3,1
1,36015,7,0,9,1,Region5,1
1,36039,4,0,9,1,Region4,1
1,36316,4,0,9,1,Region5,1
1,36602,3,0,9,1,Region3,1
1,36697,2,0,9,1,Region3,1
1,36851,7,0,9,1,Region5,1
1,36960,4,0,9,1,Region3,1
1,36995,5,0,9,1,Region2,1
1,37029,3,0,9,0,Region4,0
1,37052,6,0,9,1,Region1,1
1,24,8,0,9,0,Region2,0
1,207,8,1,9,0,Region2,2
1,446,3,0,9,0,Region2,0
1,734,8,1,9,0,Region2,2
1,975,2,0,9,1,Region1,1
1,1317,8,1,9,0,Region2,2
1,1495,8,1,9,0,Region3,2
1,1752,5,0,9,0,Region2,0
1,2019,4,0,9,0,Region2,0
1,2215,8,0,9,0,Region2,0
1,2520,8,1,9,0,Region2,2
1,2809,8,0,9,0,Region2,0
1,3010,6,0,9,1,Region3,1
1,3308,7,1,9,0,Region4,2
1,3635,4,0,9,0,Region2,0
1,3885,5,0,9,1,Region5,1
1,4092,2,0,9,1,Region4,1
1,4380,4,0,9,0,Region2,0
1,4606,8,0,9,0,Region2,0
1,4790,1,0,9,1,Region2,1
1,5068,1,0,9,1,Region4,1
1,5303,8,1,9,0,Region2,2
1,5535,8,1,9,0,Region2,2
1,5826,8,0,9,1,Region1,1
1,6248,7,0,9,0,Region2,0
1,6483,4,0,9,1,Region2,1
1,6745,8,0,9,1,Region2,1
1,6940,8,1,9,0,Region2,2
1,7210,8,1,9,0,Region2,2
1,7495,5,0,9,1,Region5,1
1,7823,7,0,9,1,Region5,1
1,8106,8,0,9,0,Region2,0
1,8312,8,1,9,0,Region2,2
1,8544,7,1,9,0,Region4,2
1,8708,5,0,9,0,Region2,0
1,8904,5,0,9,0,Region2,0
1,9083,5,0,9,1,Region1,1
1,9331,5,0,9,0,Region5,0
1,9504,8,0,9,0,Region2,0
1,9779,2,0,9,1,Region4,1
1,9972,6,1,9,0,Region3,2
1,10178,5,0,9,1,Region1,1
1,10403,8,1,9,0,Region2,2
1,10597,4,0,9,0,Region2,0
1,10882,8,0,9,1,Region2,1
1,11058,5,0,9,0,Region3,0
1,11296,8,1,9,0,Region2,2
1,11505,8,0,9,0,Region2,0
1,11728,2,0,9,0,Region3,0
1,12001,8,1,9,0,Region2,2
1,12241,5,0,9,0,Region2,0
1,12486,3,0,9,0,Region3,0
1,12690,2,0,9,0,Region3,0
1,12891,5,0,9,0,Region2,0
1,13086,2,0,9,1,Region3,1
1,13305,5,0,9,1,Region3,1
1,13483,8,0,9,1,Region5,1
1,13718,8,1,9,0,Region2,2
1,13993,1,0,9,0,Region2,0
1,14118,8,0,9,1,Region2,1
1,14362,5,0,9,0,Region2,0
1,14721,2,0,9,1,Region3,1
1,14978,7,1,9,0,Region3,2
1,15188,8,1,9,0,Region2,2
1,15440,7,1,9,0,Region3,2
1,15689,8,0,9,1,Region5,1
1,15907,3,0,9,0,Region2,0
1,16186,6,1,9,0,Region2,2
1,16464,1,0,9,1,Region2,1
1,16735,4,0,9,0,Region2,0
1,16917,8,0,9,1,Region3,1
1,17210,4,0,9,1,Region2,1
1,17431,3,0,9,0,Region2,0
1,17723,6,0,9,0,Region2,0
1,17916,8,0,9,0,Region2,0
1,18134,8,0,9,0,Region3,0
1,18394,4,0,9,0,Region2,0
1,18573,8,0,9,0,Region2,0
1,18759,7,0,9,1,Region2,1
1,19026,8,1,9,0,Region2,2
1,19248,7,1,9,0,Region3,2
1,19447,8,1,9,0,Region2,2
1,19785,8,0,9,0,Region2,0
1,20057,4,0,9,0,Region2,0
1,20183,6,0,9,0,Region2,0
1,20343,8,0,9,0,Region2,0
1,20554,4,0,9,1,Region2,1
1,20912,4,0,9,0,Region2,0
1,21095,8,1,9,0,Region2,2
1,21315,8,0,9,0,Region2,0
1,21514,3,0,9,0,Region2,0
1,21726,4,0,9,0,Region2,0
1,21993,6,0,9,1,Region3,1
1,22188,8,1,9,0,Region2,2
1,22410,2,0,9,0,Region2,0
1,22620,8,1,9,0,Region2,2
1,22873,4,0,9,0,Region2,0
1,22989,4,0,9,1,Region2,1
1,23292,8,1,9,0,Region2,2
1,23546,8,1,9,0,Region2,2
1,23793,5,0,9,0,Region2,0
1,24087,5,0,9,0,Region2,0
1,24275,6,0,9,0,Region3,0
1,24517,8,0,9,0,Region2,0
1,24733,8,1,9,0,Region2,2
1,24886,8,0,9,1,Region2,1
1,25097,7,1,9,0,Region2,2
1,25289,2,0,9,1,Region2,1
1,25550,2,0,9,0,Region2,0
1,25751,8,1,9,0,Region2,2
1,26007,8,0,9,0,Region2,0
1,26244,7,0,9,0,Region2,0
1,26358,2,0,9,1,Region2,1
1,26505,8,1,9,0,Region2,2
1,26720,7,0,9,0,Region2,0
1,26894,2,0,9,0,Region2,0
1,27147,5,0,9,0,Region2,0
1,27350,8,0,9,0,Region2,0
1,27668,4,0,9,0,Region2,0
1,27950,8,0,9,1,Region5,1
1,28185,8,0,9,0,Region2,0
1,28407,8,0,9,0,Region2,0
1,28644,3,0,9,0,Region2,0
1,28842,8,0,9,0,Region2,0
1,29047,8,0,9,0,Region2,0
1,29315,8,0,9,1,Region2,1
1,29627,4,0,9,1,Region5,1
1,29809,8,0,9,1,Region5,1
地图无法正确显示的原因很可能是投影设置 就我个人而言，我发现最简单的方法就是使用一个网站来处理地理文件的预处理。对于加拿大，您可以使用圆锥等面积和您选择的宽度和高度。我用的是省，但你可以将它调整到地区或任何其他级别 我将mapstarter中的示例Canada
.topojson.csvNAME CODE NUMBER
Alberta CA01 3
British Columbia CA02 5
Manitoba CA03 10
...
async function getData() {
const viz = {};
const csvDataPromise = d3.csv("data/data.csv");
const jsonDataPromise = d3.json("data/canada.topojson");
viz.csvData = await csvDataPromise;
viz.jsonData = await jsonDataPromise;
return viz;
}
getData()
.then((viz) => {
const mapChart = new dc.GeoChoroplethChart("#map");
const xdata = crossfilter(viz.csvData);
const provinces = xdata.dimension(d => d.CODE);
const values = provinces.group().reduceSum(d => d.NUMBER);
const width = 600;
const height = 600;
const featureCollection = topojson.feature(viz.jsonData, viz.jsonData.objects.collection);
// the test numbers were randomly generated from 0-10 range
const normalize = function(val, min=0, max=10) { return (val - min) / (max - min); }
const projection = d3.geoConicConformal()
.parallels([49,77])
.rotate([91.86667, 0])
.fitSize([width, height], featureCollection);
mapChart
.width(width)
.height(height)
.dimension(provinces)
.projection(projection)
.group(values)
.overlayGeoJson(featureCollection.features, "provinces", d => d.properties.CODE)
.colors(d3.interpolateRdPu)
.colorCalculator(d => d ? mapChart.colors()(normalize(d)) : "#ccc")
.title(function(r) {
let nameArray = viz.csvData.filter(d => {if (d.CODE === r.key) { return d; }});
return `${nameArray[0].NAME}: ${r.value}`
});
mapChart.render();
})
.catch((err) => console.log(err));
DC.jsNAME CODE NUMBER
Alberta CA01 3
British Columbia CA02 5
Manitoba CA03 10
...
async function getData() {
const viz = {};
const csvDataPromise = d3.csv("data/data.csv");
const jsonDataPromise = d3.json("data/canada.topojson");
viz.csvData = await csvDataPromise;
viz.jsonData = await jsonDataPromise;
return viz;
}
getData()
.then((viz) => {
const mapChart = new dc.GeoChoroplethChart("#map");
const xdata = crossfilter(viz.csvData);
const provinces = xdata.dimension(d => d.CODE);
const values = provinces.group().reduceSum(d => d.NUMBER);
const width = 600;
const height = 600;
const featureCollection = topojson.feature(viz.jsonData, viz.jsonData.objects.collection);
// the test numbers were randomly generated from 0-10 range
const normalize = function(val, min=0, max=10) { return (val - min) / (max - min); }
const projection = d3.geoConicConformal()
.parallels([49,77])
.rotate([91.86667, 0])
.fitSize([width, height], featureCollection);
mapChart
.width(width)
.height(height)
.dimension(provinces)
.projection(projection)
.group(values)
.overlayGeoJson(featureCollection.features, "provinces", d => d.properties.CODE)
.colors(d3.interpolateRdPu)
.colorCalculator(d => d ? mapChart.colors()(normalize(d)) : "#ccc")
.title(function(r) {
let nameArray = viz.csvData.filter(d => {if (d.CODE === r.key) { return d; }});
return `${nameArray[0].NAME}: ${r.value}`
});
mapChart.render();
})
.catch((err) => console.log(err));
关于这种特殊类型的投影，关键是需要设置平行线和旋转。这些信息通常由原始地理文件的发布者提供（
.prjjsonData.objects.collection