huembelin · March 21, 2017 13:22
diff --git a/averageIncomesMunCH2013.csv b/averageIncomesMunCH2013.csv
diff --git a/ch.json b/ch.json
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">

 <style>

 h1 {
    margin-bottom: 0;
 }

 h2 {
    margin-top: 0;
 }

 .gemeinden {
  stroke: #bfbfbf;
  stroke-width: .25;
  fill: none; 
 }

 .kantone {
  stroke: white;
  fill: none;
 }

 #popoverText { 
  position: absolute;     
  text-align: center;         
  padding: 2px;       
  font: 12px sans-serif;    
  background: #fff; 
  border: 0px;    
  border-radius: 8px;     
  pointer-events: none;
  opacity: 0;     
 }

 </style>

 <body>

 <h1 align="center"> Wealth Choropleth for Switzerland</h1>
 <h2 align="center">2013</h2>

 <p align="center"><i>Source TopoJSON:</i> <a href="https://github.com/interactivethings/swiss-maps">interactivethings/swiss-maps</a><br><i>Source Tax Data:</i> <a href="https://www.estv.admin.ch/estv/de/home/allgemein/steuerstatistiken/fachinformationen/steuerstatistiken/direkte-bundessteuer.html">Eidgenösische Steuerverwaltung, Kennzahlen der direkten Bundessteuer, natürliche Personen mit und ohne Belastung durch die direkte Bundessteuer</a></p>
  <br><br>
  <br><br>
  
  <div align="center" id="chart-container"></div>
  <div id='popoverText'> </div>

 <script src="https://d3js.org/d3.v4.min.js"></script>
 <script src="https://d3js.org/topojson.v1.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
 <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>


 <script>

 var width = 960
 var height = 500

 var svg = d3.select("#chart-container")
    .append("svg")
      .attr("class", "map")
      .attr("width", width)
      .attr("height", height)

 var colorScale = d3.scaleThreshold()
    .domain([35000, 45000, 55000, 65000, 75000, 85000])
    .range(d3.schemeYlGnBu[7]); 


 var x = d3.scaleLinear()
    .domain([25000, 95000])
    .rangeRound([600, 860]);

 // legend
 var g = svg.append("g")
    .attr("class", "key")
    .attr("transform", "translate(30,20)");

 g.selectAll("rect")
  .data(colorScale.range().map(function(d) {
      d = colorScale.invertExtent(d);
      if (d[0] == null) d[0] = x.domain()[0];
      if (d[1] == null) d[1] = x.domain()[1];
      return d;
    }))
  .enter().append("rect")
    .attr("height", 8)
    .attr("x", function(d) { return x(d[0]); })
    .attr("width", function(d) { return x(d[1]) - x(d[0]); })
    .attr("fill", function(d) { return colorScale(d[0]); });

 g.append("text")
    .attr("class", "caption")
    .attr("x", x.range()[0])
    .attr("y", -6)
    .attr("fill", "#000")
    .attr("text-anchor", "start")
    .attr("font-weight", "bold")
    .text("Average taxable incomes");

 g.call(d3.axisBottom(x)
    .tickSize(13)
    .tickFormat(function(x, i) { return x ; })
    .tickValues(colorScale.domain()))
  .select(".domain")
    .remove();


 queue()
    .defer(d3.csv, "averageIncomesMunCH2013.csv")
    .defer(d3.json, "ch.json")
    .await(ready);


 function ready(error, gemeinden, ch) {
  if (error) throw error;

 console.log(gemeinden)
 console.log(ch)

 var incomeIndexLookup = {};
  gemeinden.forEach(function(d) {
        d.val = +d.val;
        incomeIndexLookup[d.id] = d.val;
      });

 var locationLookup = {};
  gemeinden.forEach(function(d) {
    locationLookup[d.id] = d.gemeindename; // Problems with Umlaute
  })


 var gemeinden = topojson.feature(ch, ch.objects.municipalities), // gemeinde
      kantone = topojson.feature(ch, ch.objects.cantons);  // Kantone

 var path = d3.geoPath()
  .projection(null);





 ////////////////////
 // Municipalities
  svg.selectAll(".gemeinden")
      .data(gemeinden.features)
    .enter().append("path")
      .attr("class", "gemeinden")
      .attr("d", path)
      .style("fill", function(income) { return colorScale(incomeIndexLookup[income.id]);
      })                                                                                                                            /// Hover-over effecte
    .on("mouseenter", function(d) {
      d3.select(this)
        .style("stroke-width", 1.5)
      d3.select("#popoverText")
        .transition()
        .style("opacity", 1)
        .style("left", (d3.event.pageX) + "px")
        .style("top", (d3.event.pageY) + "px")
        .text("Municipality: " +locationLookup[d.id] +"   " +"Avg. Income: " +incomeIndexLookup[d.id])
 })

    .on("mouseleave", function(d) { 
      d3.select(this)
        .style("stroke-width", .25)

      d3.select("#popoverText")
        .transition()
        .style("opacity", 0);

    });         


 // cantons lines
  svg.selectAll(".kantone")
    .data(kantone.features)
    .enter().append("path")
    .attr("class", "kantone")
    .attr("d", path)


 }

 </script>
 </body>
	<!DOCTYPE html>
	<meta charset="utf-8">

	<style>

	h1 {
	margin-bottom: 0;
	}

	h2 {
	margin-top: 0;
	}

	.gemeinden {
	stroke: #bfbfbf;
	stroke-width: .25;
	fill: none;
	}

	.kantone {
	stroke: white;
	fill: none;
	}

	#popoverText {
	position: absolute;
	text-align: center;
	padding: 2px;
	font: 12px sans-serif;
	background: #fff;
	border: 0px;
	border-radius: 8px;
	pointer-events: none;
	opacity: 0;
	}

	</style>

	<body>

	<h1 align="center"> Wealth Choropleth for Switzerland</h1>
	<h2 align="center">2013</h2>

	<p align="center"><i>Source TopoJSON:</i> <a href="https://github.com/interactivethings/swiss-maps">interactivethings/swiss-maps</a><br><i>Source Tax Data:</i> <a href="https://www.estv.admin.ch/estv/de/home/allgemein/steuerstatistiken/fachinformationen/steuerstatistiken/direkte-bundessteuer.html">Eidgenösische Steuerverwaltung, Kennzahlen der direkten Bundessteuer, natürliche Personen mit und ohne Belastung durch die direkte Bundessteuer</a></p>
	<br><br>
	<br><br>

	<div align="center" id="chart-container"></div>
	<div id='popoverText'> </div>

	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/topojson.v1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>


	<script>

	var width = 960
	var height = 500

	var svg = d3.select("#chart-container")
	.append("svg")
	.attr("class", "map")
	.attr("width", width)
	.attr("height", height)

	var colorScale = d3.scaleThreshold()
	.domain([35000, 45000, 55000, 65000, 75000, 85000])
	.range(d3.schemeYlGnBu[7]);


	var x = d3.scaleLinear()
	.domain([25000, 95000])
	.rangeRound([600, 860]);

	// legend
	var g = svg.append("g")
	.attr("class", "key")
	.attr("transform", "translate(30,20)");

	g.selectAll("rect")
	.data(colorScale.range().map(function(d) {
	d = colorScale.invertExtent(d);
	if (d[0] == null) d[0] = x.domain()[0];
	if (d[1] == null) d[1] = x.domain()[1];
	return d;
	}))
	.enter().append("rect")
	.attr("height", 8)
	.attr("x", function(d) { return x(d[0]); })
	.attr("width", function(d) { return x(d[1]) - x(d[0]); })
	.attr("fill", function(d) { return colorScale(d[0]); });

	g.append("text")
	.attr("class", "caption")
	.attr("x", x.range()[0])
	.attr("y", -6)
	.attr("fill", "#000")
	.attr("text-anchor", "start")
	.attr("font-weight", "bold")
	.text("Average taxable incomes");

	g.call(d3.axisBottom(x)
	.tickSize(13)
	.tickFormat(function(x, i) { return x ; })
	.tickValues(colorScale.domain()))
	.select(".domain")
	.remove();


	queue()
	.defer(d3.csv, "averageIncomesMunCH2013.csv")
	.defer(d3.json, "ch.json")
	.await(ready);


	function ready(error, gemeinden, ch) {
	if (error) throw error;

	console.log(gemeinden)
	console.log(ch)

	var incomeIndexLookup = {};
	gemeinden.forEach(function(d) {
	d.val = +d.val;
	incomeIndexLookup[d.id] = d.val;
	});

	var locationLookup = {};
	gemeinden.forEach(function(d) {
	locationLookup[d.id] = d.gemeindename; // Problems with Umlaute
	})


	var gemeinden = topojson.feature(ch, ch.objects.municipalities), // gemeinde
	kantone = topojson.feature(ch, ch.objects.cantons); // Kantone

	var path = d3.geoPath()
	.projection(null);





	////////////////////
	// Municipalities
	svg.selectAll(".gemeinden")
	.data(gemeinden.features)
	.enter().append("path")
	.attr("class", "gemeinden")
	.attr("d", path)
	.style("fill", function(income) { return colorScale(incomeIndexLookup[income.id]);
	}) /// Hover-over effecte
	.on("mouseenter", function(d) {
	d3.select(this)
	.style("stroke-width", 1.5)
	d3.select("#popoverText")
	.transition()
	.style("opacity", 1)
	.style("left", (d3.event.pageX) + "px")
	.style("top", (d3.event.pageY) + "px")
	.text("Municipality: " +locationLookup[d.id] +" " +"Avg. Income: " +incomeIndexLookup[d.id])
	})

	.on("mouseleave", function(d) {
	d3.select(this)
	.style("stroke-width", .25)

	d3.select("#popoverText")
	.transition()
	.style("opacity", 0);

	});


	// cantons lines
	svg.selectAll(".kantone")
	.data(kantone.features)
	.enter().append("path")
	.attr("class", "kantone")
	.attr("d", path)


	}

	</script>
	</body>