I've been struggling to identify what's causing the issue with the code below. It seems that the values from values.json are not being loaded into the variable statesau correctly. When I use document.write(JSON.stringify(statesau)), I just get an empty object {}.
Here's the content of values.json:
{
"values": {
"New South Wales": 8,
"Victoria": 6,
"Queensland": 3,
"South Australia": 7,
"Western Australia": 4,
"Tasmania": 6,
"Northern Territory": 7
}
}
Take a look at the HTML code below:
<!DOCTYPE html>
<html>
<head>
<title>Wave to GeoJSON</title>
<script src="http://d3js.org/d3.v2.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
#states path {
stroke: #fff;
}
</style>
</head>
<body>
<h1>Wave to GeoJSON</h1>
<script type="text/javascript">
var statesau={};
$.getJSON('values.json', function(data) {
statesau=data;
});
document.write(JSON.stringify(statesau));
var w = 960,
h = 500;
var z = d3.scale.category10();
var fill = d3.scale.log()
.domain(d3.extent(d3.values(statesau)))
.range(["brown", "steelblue"]);
var projection = d3.geo.azimuthal()
.origin([135, -26])
.translate([250,180])
.scale(700);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
var states = svg.append("g")
.attr("id", "states");
d3.json("au-states.json", function(collection) {
states.selectAll("path")
.data(collection.features)
.enter().append("path")
.attr("fill", function(d) {
return fill(statesau[(d.properties["STATE_NAME"])]);
})
.attr("d", path);
});
</script>
</body>
</html>