Andrew-Reid/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Based on a question from Stack Overflow, multiple pie charts on a map
http://stackoverflow.com/questions/41949622/piechart-over-a-map-point-using-d3-js

  
## index.html
<!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.v3.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.geo.mercator().center([81,22]).scale(800).translate([width/2,height/2]);
var path = d3.geo.path().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.svg.arc()
			.innerRadius(0)
			.outerRadius(30);

var pie = d3.layout.pie()
			.sort(null)
			.value(function(d) { return d; });

var color = d3.scale.category10();


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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## water.csv

          
            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

## world.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!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.v3.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.geo.mercator().center([81,22]).scale(800).translate([width/2,height/2]);
	var path = d3.geo.path().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.svg.arc()
	.innerRadius(0)
	.outerRadius(30);

	var pie = d3.layout.pie()
	.sort(null)
	.value(function(d) { return d; });

	var color = d3.scale.category10();


	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