For this project, I have a map of India in d3, with seperation by province. I'm trying to add points onto the map, but it just isn't working for me.
The nodes are supposed to become bigger and smaller based on the amount of complaints that is specified in the csv file.
Here is my code:
visualize.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- India State Map -->
<title>India Map</title>
<!-- Scripts -->
<script type="text/javascript" src="d3.min.js"></script>
<script type="text/javascript" src="d3.geo.min.js"></script>
<style type="text/css">
svg {
background: #fff;
}
#india {
fill: #95a5a6;
opacity: .8;
stroke: white ;
stroke-width: 1.2;
}
</style>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
var w = 600;
var h = 600;
var proj = d3.geo.mercator();
var path = d3.geo.path().projection(proj);
var t = proj.translate(); // the projection's default translation
var s = proj.scale(); // the projection's default scale
var map = d3.select("#chart").append("svg:svg")
.attr("width", w)
.attr("height", h)
// .call(d3.behavior.zoom().on("zoom", redraw))
.call(initialize);
var india = map.append("svg:g")
.attr("id", "india");
d3.json("json/indianstates.json", function (json) {
india.selectAll("path")
.data(json.features)
.enter().append("path")
.attr("d", path);
});
d3.csv("csv/water.csv", function (data) {
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function (d) {
return projection([d.lon, d.lat])[0];
})
.attr("cy", function (d) {
return projection([d.lon, d.lat])[1];
})
.attr("r", function (d) {
return Math.sqrt(parseInt(d.complaints)*0.0004);
})
.style("fill", "yellow")
.style("opacity", 0.75);
});
function initialize() {
proj.scale(6700);
proj.translate([-1240, 720]);
}
Here is the CSV file. I will not include the json file with the state boundaries because it is working fine. I have no clue whether the problem lies within the formatting of the csv file, the way the file is called in the script, or if it is just some error in the script.
water.csv
lon,lat,quality,complaints
80.06,20.07,4,17
72.822,18.968,2,62
77.216,28.613,5,49
92.79,87.208,4,3
87.208,21.813,1,12
77.589,12.987,2,54
16.320,75.724,4,7
EDIT: Fixed some of the things pointed out to me.