Trazar mapas json personalizados con D3.js
Estoy creando un mapa con D3.js. Comencé descargando el archivo de forma del país (Canadá) aquí:https://www.arcgis.com/home/item.html?id=dcbcdf86939548af81efbd2d732336db
..y lo convirtió en un geojson aquí (enlace al archivo a continuación):http://mapshaper.org/
Hasta ahora, todo lo que veo es un bloque de color, sin ningún error en la consola. Mi pregunta es, ¿cómo puedo saber si mi archivo json o mi código son incorrectos? Aquí está mi código y en la parte inferior hay un enlace al archivo 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>
Enlace al archivo json:https://github.com/returnOfTheYeti/CanadaJSON/blob/master/canada.geo.json