Created
December 6, 2015 19:21
-
-
Save pfloh/cafa1bd6341b528013a9 to your computer and use it in GitHub Desktop.
Berlin Rent index compared with household income
This file contains 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 | |
|---|---|---|---|---|---|
| Charlottenburg-Wilmersdorf | 326354 | 52.501803 | 13.269939 | 1675 | |
| Friedrichshain-Kreuzberg | 275691 | 52.506400 | 13.444262 | 1500 | |
| Lichtenberg | 268465 | 52.532723 | 13.499279 | 1600 | |
| Marzahn-Hellersdorf | 256173 | 52.522070 | 13.575497 | 1625 | |
| Mitte | 356506 | 52.530008 | 13.381133 | 1550 | |
| Neukölln | 325716 | 52.436025 | 13.442030 | 1425 | |
| Pankow | 384367 | 52.601588 | 13.442373 | 1700 | |
| Reinickendorf | 254000 | 52.600588 | 13.281012 | 1825 | |
| Spandau | 230419 | 52.534185 | 13.200588 | 1600 | |
| Steglitz-Zehlendorf | 299268 | 52.446071 | 13.259939 | 2000 | |
| Tempelhof | 335767 | 52.443873 | 13.389072 | 1800 | |
| Treptow-Köpenick | 249440 | 52.426025 | 13.621330 | 1675 |
This file contains 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: 1425 € [min] - 2000 € [max], data from 2012). <br> Sources: <a href="https://www.statistik-berlin-brandenburg.de/pms/2013/13-08-08c.pdf">statistik-berlin-brandenburg.de (2012)</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.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 +d.average_income / w * 5; | |
| //return (Math.pow(+d.Einwohner2014 / 1000 ,2)) * 0.00015; | |
| return (Math.pow(+d.average_income / 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 ;} ) | |
| }); | |
| }); //End d3.json() | |
| }); //End d3.csv() | |
| </script> | |
| </body> | |
| </html> |
This file contains 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.5 | |
| 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.4 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment