Plotando mapas json personalizados com D3.js
Estou criando um mapa com D3.js. Comecei baixando o shapefile do país (Canadá) aqui:https://www.arcgis.com/home/item.html?id=dcbcdf86939548af81efbd2d732336db
..e converteu-o em um geojson aqui (link para o arquivo abaixo):http://mapshaper.org/
Até agora, tudo o que vejo é um bloco colorido, sem erros no console. Minha pergunta é: como posso saber se meu arquivo json ou meu código está incorreto? Aqui está o meu código e, na parte inferior, há um link para o arquivo json.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3: Setting path fills</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<!-- <script src="https://d3js.org/topojson.v1.min.js"></script> -->
<style type="text/css">
/* styles */
</style>
</head>
<body>
<script type="text/javascript">
var canvas = d3.select("body").append("svg")
.attr("width", 760)
.attr("height", 700)
d3.json("canada.geo.json", function(data) {
var group = canvas.selectAll("g")
.data(data.features)
.enter()
.append("g")
var projection = d3.geo.mercator();
var path = d3.geo.path().projection(projection);
var areas = group.append("path")
.attr("d",path)
.attr("class","area")
})
</script>
</body>
</html>
Link para o arquivo json:https://github.com/returnOfTheYeti/CanadaJSON/blob/master/canada.geo.json