I'm trying to learn how to use topoJSON.
When I use the code from this example https://bl.ocks.org/mbostock/4090870 it works fine.
But then I tried using this tutorial https://www.youtube.com/watch?v=aNbgrqRuoiE and for some json files I found, I was able to get it to work properly. But when I try to use the json file from the first example (https://d3js.org/us-10m.v1.json) for some reason the SVG comes out scrambled (as you can see here https://jsfiddle.net/1dahx8jg/) I don't know what I'm doing wrong. Can someone point me in the right direction?
The code from the jsfiddle:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
* {
font-family: "Helvetica Neue";
}
p {
font-size: 0.85em;
}
svg {
background: #efefef;
}
.region {
fill: #cccccc;
stroke:#333333;
stroke-width: 0.5;
}
.selected {
fill: yellow;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>
(function () {
var margin = { top: 50, left: 50, right: 50, bottom: 50 },
height = 400 - margin.top - margin.bottom,
width = 800 - margin.left - margin.right;
var svg = d3.select("#map")
.append("svg")
.attr("height", height + margin.top + margin.bottom)
.attr("width", width + margin.left + margin.right)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.queue()
.defer(d3.json, "https://d3js.org/us-10m.v1.json")
.await(ready);
function ready(error, data) {
console.log(data)
var projection = d3.geoMercator()
.translate([width / 2, height / 2])
.scale(100)
var path = d3.geoPath()
.projection(projection);
var regions = topojson.feature(data, data.objects.counties).features;
svg.selectAll(".region")
.data(regions)
.enter().append("path")
.attr("class", "region")
.attr("d", path )
}
})();
</script>
</body>
</html>
