Created
December 9, 2015 16:45
-
-
Save pfloh/5624b445aa2f707947f7 to your computer and use it in GitHub Desktop.
Berlin - rent levels and household incomes per disctrict (Version 2)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Bezirk | Einwohner2014 | latitude | longitude | average_income_2012 | average_income_2014 | |
|---|---|---|---|---|---|---|
| Charlottenburg-Wilmersdorf | 326354 | 52.501803 | 13.269939 | 1675 | 1800 | |
| Friedrichshain-Kreuzberg | 275691 | 52.506400 | 13.444262 | 1500 | 1675 | |
| Lichtenberg | 268465 | 52.532723 | 13.499279 | 1600 | 1600 | |
| Marzahn-Hellersdorf | 256173 | 52.522070 | 13.575497 | 1625 | 1700 | |
| Mitte | 356506 | 52.530008 | 13.381133 | 1550 | 1600 | |
| Neukölln | 325716 | 52.436025 | 13.442030 | 1425 | 1550 | |
| Pankow | 384367 | 52.601588 | 13.442373 | 1700 | 1850 | |
| Reinickendorf | 254000 | 52.600588 | 13.281012 | 1825 | 1850 | |
| Spandau | 230419 | 52.534185 | 13.200588 | 1600 | 1600 | |
| Steglitz-Zehlendorf | 299268 | 52.446071 | 13.259939 | 2000 | 2100 | |
| Tempelhof | 335767 | 52.443873 | 13.389072 | 1800 | 1925 | |
| Treptow-Köpenick | 249440 | 52.426025 | 13.621330 | 1675 | 1825 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Berlin Rent index compared with household income</title> | |
| <script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script> | |
| <style type="text/css"> | |
| body { | |
| margin: 0; | |
| background-color: grey; | |
| font-family: Helvetica, Arial, sans-serif; | |
| } | |
| #container { | |
| width: 800px; | |
| margin-left: 248px; | |
| margin-right: auto; | |
| margin-top: 10px; | |
| margin-bottom: -1px; | |
| padding: 50px; | |
| background-color: white; | |
| border: 2px solid grey; | |
| } | |
| h1 { | |
| font-size: 24px; | |
| margin: 0; | |
| padding: 3px; | |
| color: black; | |
| } | |
| p { | |
| font-size: 14px; | |
| margin: 10px 0 10px 0; | |
| padding: 3px; | |
| color: black; | |
| } | |
| .label { | |
| font-weight: bold; | |
| font-size: 10px; | |
| width: 60px; | |
| text-anchor: middle; | |
| cursor: default; | |
| background: #ffffff; | |
| } | |
| svg { | |
| background-color: black; | |
| margin-left: 250px; | |
| margin-right: auto; | |
| margin-top: -2px; | |
| margin-bottom: 50px; | |
| padding: 50px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <h1>Berlin - rent levels and household incomes per disctrict</h1> | |
| <p><b>Rent levels</b> (average monthly rent per m²) in Berlin districts (2014) compared with <b>average household net incomes</b> (red circles) per district (range: 1550 € [min] - 2100 € [max], data from 2014). <br> Sources: <a href="https://www.statistik-berlin-brandenburg.de/Statistiken/statistik_SB.asp?Ptyp=700&Sageb=12011&creg=BBB&anzwer=5">Ergebnisse des Mikrozensus im Land Berlin, Bevölkerung und Erwerbstätigkeit (Jahresbericht 2014)</a> | <a href="http://www.berlinhyp.de/fuer-immobilienkunden/gewerbliche-immobilienfinanzierung/publikationen-fuer-kunden/wohnmarktreportberlin2015.html">Wohnmarktreport Berlin 2015</a></p> | |
| </div> | |
| <script type="text/javascript"> | |
| //Rentindex data to map | |
| //var rentindex = "Unteres_Marktsegment"; | |
| //var rentindex = "Oberes_Marktsegment"; | |
| var rentindex = "Marktsegmente_Median"; | |
| //Width and height | |
| var w = 800; | |
| var h = 700; | |
| //Define map projection | |
| var projection = d3.geo.mercator() | |
| .center([ 13.4, 52.5 ]) | |
| .translate([ w/2, h/2 ]) | |
| .scale([ w/0.0129 ]); | |
| //Define path generator | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| //Define quantize scale to sort data values into buckets of color | |
| //Colors by Cynthia Brewer (colorbrewer2.org), YlOrRd | |
| var color = d3.scale.quantize() | |
| .range([ "#ffffd4", "#fed98e", "#fe9929", "#d95f0e", "#993404" ]); | |
| //.range([ "#ffffe5", "#fff7bc", "#fee391", "#fec44f", "#fe9929", "#ec7014", "#cc4c02", "#993404", "#662506" ]); | |
| //Create SVG | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| //Load in rent data | |
| d3.csv("Mieten_BerlinBezirke_2014_csv.csv", function(data) { | |
| //Set input domain for color scale | |
| color.domain([ | |
| d3.min(data, function(d) { return +d[rentindex]; }), | |
| d3.max(data, function(d) { return +d[rentindex]; }) | |
| ]); | |
| //Load in GeoJSON data | |
| d3.json("berlin_bezirke_2.geojson", function(json) { | |
| //Merge the rentindexdata and GeoJSON into a single array | |
| // | |
| //Loop through once for each CO2 data value | |
| for (var i = 0; i < data.length; i++) { | |
| //Grab district name | |
| var dataBezirk = data[i].Bezirk; | |
| //Grab data value, and convert from string to float | |
| var dataValue = +data[i][rentindex]; | |
| //Find the corresponding district inside the GeoJSON | |
| for (var j = 0; j < json.features.length; j++) { | |
| var jsonBezirk = json.features[j].properties.bezirk; | |
| if (dataBezirk == jsonBezirk) { | |
| //Copy the data value into the GeoJSON | |
| json.features[j].properties.rentindex = dataValue; | |
| //Stop looking through the JSON | |
| break; | |
| } | |
| } | |
| } | |
| //Bind data and create one path per GeoJSON feature | |
| svg.selectAll("path") | |
| .data(json.features) | |
| .enter() | |
| .append("path") | |
| .attr("d", path) | |
| .style("fill", function(d) { | |
| //Get data value | |
| var value = d.properties.rentindex; | |
| if (value) { | |
| //If value exists… | |
| return color(value); | |
| } else { | |
| //If value is undefined… | |
| return "#ccc"; | |
| } | |
| }); | |
| // Label the districts | |
| var label = svg.selectAll("text") | |
| .data(json.features) | |
| .enter() | |
| .append("text") | |
| .attr("class", "label") | |
| .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; }) | |
| .text(function(d) { return d.properties.bezirk + ": " + d.properties.rentindex + " €" ;} ); | |
| //Load in district data | |
| d3.csv("berlin_bezirke_latlong_2.csv", function(data) { | |
| //Create a circle for each district | |
| svg.selectAll("circle") | |
| .data(data) | |
| .enter() | |
| .append("circle") | |
| .attr("cx", function(d) { | |
| return projection([d.longitude, d.latitude])[0]; | |
| }) | |
| .attr("cy", function(d) { | |
| return projection([d.longitude, d.latitude])[1]; | |
| }) | |
| .attr("r", function(d) { | |
| //Use Math.sqrt to scale by area (not radius) | |
| //return Math.sqrt(+d.Einwohner2014 / w * 0.5); | |
| return (Math.pow(+d.average_income_2014 / 1000 ,2)) * 5; | |
| }) | |
| //.style("fill", "blue") | |
| //.style("stroke-dasharray", ("5,0")) // make the stroke dashed | |
| .style("stroke-width", 20) // set the stroke width | |
| .style("stroke-opacity", .4) // set the stroke opacity | |
| .style("stroke", "red") // set the line colour | |
| .style("fill", "none") // set the fill colour | |
| // set text to circles | |
| .append("text") | |
| .attr("class", "label") | |
| .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; }) | |
| .text(function(d) { return +d.average_income_2014 ;} ) | |
| }); | |
| }); //End d3.json() | |
| }); //End d3.csv() | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Bezirk | Mietangebote | Unteres_Marktsegment | Oberes_Marktsegment | Marktsegmente_Median | |
|---|---|---|---|---|---|
| Charlottenburg-Wilmersdorf | 7479 | 6.63 | 15.36 | 9.82 | |
| Friedrichshain-Kreuzberg | 6884 | 6.48 | 17.39 | 10.39 | |
| Lichtenberg | 2756 | 5.5 | 11.56 | 7.98 | |
| Marzahn-Hellersdorf | 3144 | 4.75 | 8.8 | 5.96 | |
| Mitte | 9446 | 5.86 | 16.52 | 10 | |
| Neukölln | 4644 | 5.53 | 15.91 | 8.50 | |
| Pankow | 8483 | 5.9 | 15.16 | 9.03 | |
| Reinickendorf | 3485 | 5.31 | 10.5 | 7.08 | |
| Spandau | 3472 | 4.87 | 9.76 | 6.75 | |
| Steglitz-Zehlendorf | 4900 | 6.11 | 13 | 8.58 | |
| Tempelhof | 5064 | 5.87 | 14.49 | 8.47 | |
| Treptow-Köpenick | 4413 | 5.5 | 11.11 | 7.40 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment