Based on a question at stack overflow, regarding multiple pie charts on a map.
http://stackoverflow.com/questions/41949622/piechart-over-a-map-point-using-d3-js
Based on a question at stack overflow, regarding multiple pie charts on a map.
http://stackoverflow.com/questions/41949622/piechart-over-a-map-point-using-d3-js
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<style> | |
svg { | |
background: #9ecae1; | |
} | |
.mesh { | |
fill:none; | |
stroke: white; | |
stroke-width: 0.5px; | |
} | |
.land { | |
fill: #41ab5d; | |
} | |
</style> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://d3js.org/topojson.v1.min.js"></script> | |
</head> | |
<body> | |
<script type="text/javascript"> | |
var width = 960; | |
height = 500; | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
var projection = d3.geoMercator().center([81,22]).scale(800).translate([width/2,height/2]); | |
var path = d3.geoPath().projection(projection); | |
var g1 = svg.append("g"); | |
d3.json("world.json", function(error, world) { | |
g1.insert("path", ".land") | |
.datum(topojson.feature(world, world.objects.countries)) | |
.attr("class", "land") | |
.attr("d", path); | |
g1.append("path") | |
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; })) | |
.attr("class", "mesh") | |
.attr("d", path); | |
}); | |
var g2 = svg.append("g"); | |
var arc = d3.arc() | |
.innerRadius(0) | |
.outerRadius(30); | |
var pie = d3.pie() | |
.sort(null) | |
.value(function(d) { return d; }); | |
var color = d3.schemeCategory10; | |
d3.csv("water.csv", function(error, water) { | |
// Append one g element for each row in the csv and bind data to it: | |
var points = g2.selectAll("g") | |
.data(water) | |
.enter() | |
.append("g") | |
.attr("transform",function(d) { return "translate("+projection([d.lon,d.lat])+")" }) | |
.attr("id", function (d,i) { return "chart"+i; }) | |
.append("g").attr("class","pies"); | |
// Add a circle to it if needed | |
points.append("circle") | |
.attr("r", 3) | |
.style("fill", "red"); | |
// Select each g element we created, and fill it with pie chart: | |
var pies = points.selectAll(".pies") | |
.data(pie([0,15,30,35,20])) // I'm unsure why I need the leading 0. | |
.enter() | |
.append('g') | |
.attr('class','arc'); | |
pies.append("path") | |
.attr('d',arc) | |
.attr("fill",function(d,i){ | |
return color[i]; | |
}); | |
}); | |
</script> | |
</body> |
lon | lat | quality | complaints | data | label | |
---|---|---|---|---|---|---|
80.06 | 20.07 | 4 | 17 | 15-25-35-25 | label1 | |
72.822 | 18.968 | 2 | 62 | 20-40-30-10 | label2 | |
77.216 | 28.613 | 5 | 49 | 25-20-30-25 | label3 | |
92.79 | 87.208 | 4 | 3 | 50-10-12-18 | label4 | |
87.208 | 21.813 | 1 | 12 | 10-40-40-10 | label5 | |
77.589 | 12.987 | 2 | 54 | 10-20-40-30 | label6 | |
16.320 | 75.724 | 4 | 7 | 5-5-20-70 | label7 |