Skip to content

Instantly share code, notes, and snippets.

@tyramoss
Created December 2, 2015 17:48
Show Gist options
  • Save tyramoss/f63b3e857770695a1480 to your computer and use it in GitHub Desktop.
Save tyramoss/f63b3e857770695a1480 to your computer and use it in GitHub Desktop.
Module 4
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Map made with d3.js</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: #eeeeee;
font-family: Helvetica, Arial, sans-serif;
}
h1
{font-family: sans-serif;
font-weight: 100;
font-size: 20px;
color: #92CC50;
padding-left: 50px;
}
p
{font-family: sans-serif;
font-weight: 100;
font-size: 11px;
padding-left: 50px;
line-height: 15px;
}
a:link {
text-decoration: none;
color: #92CC50;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: #92CC50;
}
a:active {
color: #92CC50;
}
text
{font-family: sans-serif;
font-size: 9px;
}
svg {
background-color: white;
}
#container {
width: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
padding: 25px;
background-color: white;
box-shadow: 1px 1px 1px 1px #ccc;
}
path {
stroke: white;
stroke-width: 0.5;
fill: #F4E7D3;
}
</style>
</head>
<body>
<div id="container">
<h1>Swift nests in the city of Utrecht</h1>
<p>This map shows the amount of Swift nests counted in 2014 in relation to the amount of urbanisation. </p><p>Dark neighbourhoods are highly urbanized, light neighbourhoods are less urbanized.</p>
<p>Bron: <a href="https://opendata.utrecht.nl/dataset/resultaten-gierzwaluwinventarisatie-2014">Gemeente Utrecht</a>, 2015</p>
</div>
<script type="text/javascript">
//Width and height
var w = 600;
var h = 500;
//Define map projection
var projection = d3.geo.mercator()
.center([ 5, 53])
.translate([ w/2-180, -2900 ])
.scale([ 120000 ]);
//Define path generator
var path = d3.geo.path()
.projection(projection);
//Create SVG
var svg = d3.select("#container")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load in GeoJSON data
d3.json("7.json", function(json) {
//Bind data and create one path per GeoJSON feature
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
// .style("fill", "grey")
.style("fill", function(d) {
//Get data value
//var value = d.properties.STED;
if (d.properties.STED <= 1) {return "#C1A080"}
if (d.properties.STED <= 2) {return "#D6BD9F"}
if (d.properties.STED <= 3) {return "#E0CFB8"}
if (d.properties.STED <= 4) {return "#F4E7D3"}
if (d.properties.STED <= 5) {return "#F9F4ED"}
else {
//If value is undefined…
return "#ccc";
}
});
//Load in zwaluw data
d3.csv("zwaluw.csv", function(data) {
//Create a circle for each nest
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) {
//[0] returns the first coordinate (x) of the projected value
return projection([d.lon, d.lat])[0];
})
.attr("cy", function(d) {
//[1] returns the second coordinate (y) of the projected value
return projection([d.lon, d.lat])[1];
})
.attr("r", function(d) {
//Use Math.sqrt to scale by area (not radius)
return (d.aantal*2)
// return Math.sqrt(+d.aantal / w * 10);
})
//.attr("r", 5)
.style("fill", "green")
.style("opacity", 0.5);
svg.selectAll("circle")
.append("title")
.text(function(d) {
return d.aantal+ " nests";
});
});
});
</script>
</body>
</html>
gebied straat nummer detailinfo aantal lat lon symbol name
Oog in Al Goethelaan 65 1 52.088403 5.0861954 Flag. Blue Goethelaan 65
Oog in Al Goethelaan 74 2 52.0886557 5.0866022 Flag. Green Goethelaan 74
Oog in Al Goethelaan 76 1 52.0884041 5.0866185 Flag. Blue Goethelaan 76
Oog in Al Goethelaan 78 achter 1 52.0883681 5.0866042 Flag. Blue Goethelaan 78
Oog in Al Goethelaan 79 1 52.0879 5.0863301 Flag. Blue Goethelaan 79
Oog in Al Goethelaan 82 1 52.0882603 5.0866195 Flag. Blue Goethelaan 82
Oog in Al Goethelaan 86 op de hoek met de E. Meijsterlaan 1 52.0881705 5.0866639 Flag. Blue Goethelaan 86
Oog in Al H�ndelstraat 18 1 52.08402 5.08683 Flag. Blue H�ndelstraat 18
Oog in Al Wagnerlaan 7 en 8 tuinzijde 1 52.0848707 5.0897353 Flag. Blue Wagnerlaan 7 en 8
Oog in Al E. Meijsterlaan 26 1 52.0873787 5.085701 Flag. Blue E. Meijsterlaan 26
Oog in Al E. Meijsterlaan 85 1 52.0876953 5.0862096 Flag. Blue E. Meijsterlaan 85
Oog in Al Chopinstraat 7 1 52.0839276 5.0864443 Flag. Blue Chopinstraat 7
Oog in Al Von Weberstraat 27 1 52.0849131 5.0851976 Flag. Blue Von Weberstraat 27
Oog in Al Mendelssohnstraat 44 1 52.08617 5.08773 Flag. Blue Mendelssohnstraat 44
Wittevrouwen Bouwstraat 53-55 Zimictheater/oude ULO 2 52.0967809 5.1323714 Flag. Green Bouwstraat 53-55
Wittevrouwen Obrechtstraat 65 achterzijde (tuinkant) 1 52.0977193 5.1299435 Flag. Blue Obrechtstraat 65
Wittevrouwen Obrechtstraat 67 1 52.0977642 5.1299141 Flag. Blue Obrechtstraat 67
Wittevrouwen Kapelstraat 43 beide dakkapellen. waar daklijst het dak raakt 2 52.0965762 5.1291766 Flag. Green Kapelstraat 43
Wittevrouwen Vlasstraat 4 rechts onder daklijst bovenaan gevel (bij regenpijp) 1 52.0992943 5.1308831 Flag. Blue Vlasstraat 4
Wittevrouwen Bekkerstraat 113 1 52.0987512 5.133265 Flag. Blue Bekkerstraat 113
Wittevrouwen Hengeveldstraat 14 onder het lood boven dakhoekje van dakkapel 1 52.1012535 5.1308135 Flag. Blue Hengeveldstraat 14
Wittevrouwen Admiraal van Gentstraat 17 52.1000127 5.1389936 Puzzle Cache Admiraal van Gentstraat 17
Wittevrouwen Luit Blomstraat 67 de zwaluwen lossen hier de spreeuwen af 1 52.1181896 5.0758766 Flag. Blue Luit Blomstraat 67
Wittevrouwen Parkstraat 43 links onder de daklijst 1 52.091292 5.1301613 Flag. Blue Parkstraat 43
Overvecht. locatie 1 Naxosdreef 65-95 boven raam 5e en boven raam 7e verdieping 1 52.1153543 5.1141328 Flag. Blue Naxosdreef 65-95
Overvecht. locatie 1 Naxosdreef 1 tot 31 raampjes 3e. 5e en 7e verdieping: poepstrepen 1 52.1155781 5.1137519 Flag. Blue Naxosdreef 1 tot 31
Overvecht. locatie 1 Theemsdreef 422-452 onder de dakrand. rechts van raampje 1 52.1151706 5.1124404 Flag. Blue Theemsdreef 422-452
Overvecht. locatie 1 Milosdreef 65-95 boven raam 1e en boven raam 8e verdieping 1 52.1160078 5.1129901 Flag. Blue Milosdreef 65-95
Overvecht. locatie 1 Androsdreef 162-192 nest onder dakrand? 1 52.1158511 5.1113412 Flag. Blue Androsdreef 162-192
Overvecht. locatie 1 Androsdreef 2 tot 32 raampje 4e verdieping: poepstreep 1 52.1164014 5.1121992 Flag. Blue Androsdreef 2 tot 32
Overvecht. locatie 1 Tafelbergdreef 180-214 boven raam 6e verdieping? 1 52.1170865 5.1092166 Flag. Blue Tafelbergdreef 180-214
Overvecht. locatie 2 Kenyadreef 2 1 52.1229522 5.1115603 Flag. Blue Kenyadreef 2
Overvecht. locatie 2 Sfinxdreef 3 geen invliegers. gedrag gierzwaluwen wijst er wel op 1 52.123338 5.1112804 Flag. Blue Sfinxdreef 3
Overvecht. locatie 2 Nijldreef 16 veel poepstrepen. geen invliegers 1 52.1231848 5.1110916 Flag. Blue Nijldreef 16
Overvecht. locatie 2 Bagdaddreef 2 onder loodslab links halverwege schoorsteen 1 52.1246571 5.1028173 Flag. Blue Bagdaddreef 2
Overvecht. locatie 2 Koeweitdreef 4 onder loodslab rechts onderkant schoorsteen 1 52.1256036 5.103965 Flag. Blue Koeweitdreef 4
Overvecht. locatie 3 Zuidpooldreef 34 kopse kant onder afdekpan in de nok 1 52.1152987 5.1057676 Flag. Blue Zuidpooldreef 34
Overvecht. locatie 3 Zuidpooldreef 35/36 onder dakgoot voorkant. mogelijk boven regenpijp 1 52.1151913 5.1059581 Flag. Blue Zuidpooldreef 35/36
Overvecht. locatie 3 Zuidpooldreef 9 onder dakgoot aan voorkant op de hoek 1 52.1152245 5.1048337 Flag. Blue Zuidpooldreef 9
Overvecht. locatie 3 Zuidpooldreef 27 onder overhangende pannen aan de kopse kant 1 52.1155494 5.1053572 Flag. Blue Zuidpooldreef 27
Overvecht. locatie 3 Zuidpooldreef 26 onder overhangende pannen aan de kopse kant 1 52.1153148 5.1049791 Flag. Blue Zuidpooldreef 26
Overvecht. locatie 3 Zuidpooldreef 31 onder overhangende pannen aan de kopse kant 1 52.1153971 5.1055918 Flag. Blue Zuidpooldreef 31
Overvecht. overig Denverdreef 4 onder dakgoot aan achterzijde woning 1 52.1247938 5.096216 Flag. Blue Denverdreef 4
Overvecht. overig Denverdreef 8 nest 1 52.12476 5.09642 Flag. Blue Denverdreef 8
Overvecht. overig Bostondreef 33 nest met jongen 3 52.12467 5.09557 Flag. Red Bostondreef 33
Overvecht. overig Bostondreef 45 kopse kant. onder 3e. 5e. 8e en 13e dakpan rechts 4 52.1246394 5.0955453 Flag. Red Bostondreef 45
Overvecht. overig Oklahomadreef 8 kopse kant. 3e dakpan rechtsboven 1 52.1254946 5.0960947 Flag. Blue Oklahomadreef 8
Overvecht. overig Baltimoredreef 7 nest met jongen 1 52.12481 5.0953 Flag. Blue Baltimoredreef 7
Overvecht. overig Torontodreef 17 nest 1 52.12572 5.09645 Flag. Blue Torontodreef 17
Overvecht. overig Qu�becdreef 17 nest 1 52.12616 5.09699 Flag. Blue Qu�becdreef 17
Overvecht. overig Ottawadreef 39 nest met jongen 1 52.12635 5.0976 Flag. Blue Ottawadreef 39
Tuinwijk/Vogelbuurt Adelaarstraat 25 Ierse Pub O'Leary onder daklijst. 1 aan kant Adelaarstr. en 1 kant aan de kant van de Hopakker 2 52.0991074 5.1156477 Flag. Green Adelaarstraat 25
Tuinwijk/Vogelbuurt Koekoekstraat 55 Food Imperium. hoek Havikstr. Onder daklijst 2 52.0989898 5.1192532 Flag. Green Koekoekstraat 55
Tuinwijk/Vogelbuurt Havikstraat 43 onder daklijst bovenkant dak 1 52.0992065 5.1196897 Flag. Blue Havikstraat 43
Tuinwijk/Vogelbuurt Havikstraat 51 nok 1 52.0993422 5.1200538 Flag. Blue Havikstraat 51
Tuinwijk/Vogelbuurt Adelaarstraat 69 hoek Adelaarstr. Onder dakgootlijst. op meerdere plekken poepstrepen 1 52.10024 5.11949 Flag. Blue Adelaarstraat 69
Tuinwijk/Vogelbuurt Johannes de Bekastraat 71 nok 1 52.10045 5.11931 Flag. Blue Johannes de Bekastraat 71
Tuinwijk/Vogelbuurt Johannes de Bekastraat 73 nok 1 52.10048 5.1191 Flag. Blue Johannes de Bekastraat 73
Tuinwijk/Vogelbuurt Johannes de Bekastraat 75 nok 1 52.10048 5.11907 Flag. Blue Johannes de Bekastraat 75
Tuinwijk/Vogelbuurt Johannes de Bekastraat 18 nok 1 52.10041 5.11856 Flag. Blue Johannes de Bekastraat 18
Tuinwijk/Vogelbuurt Johannes de Bekastraat 24 nok 1 52.10045 5.11835 Flag. Blue Johannes de Bekastraat 24
Hoograven Verlengde Hoogravenseweg 298 bis 1 bij dakraam en 1 bij schoorsteen 2 52.06871 5.11898 Flag. Green Verlengde Hoogravenseweg 298bis
Hoograven Brasemstraat 123 invlieggat 52.0646574 5.1162212 Puzzle Cache Brasemstraat 123
Hoograven Zeeltstraat 24 invlieggat 52.064172 5.1162225 Puzzle Cache Zeeltstraat 24
Hoograven Duurstedelaan 53 bis invlieggat 52.06334 5.11922 Puzzle Cache Duurstedelaan 53 bis
Hoograven Duurstedelaan 53 bis onder overhangende pannen aan kopse kant 1 52.06334 5.11922 Flag. Blue Duurstedelaan 53 bis
Hoograven Soestdijkstraat 41 invlieggat 52.0705814 5.1245426 Puzzle Cache Soestdijkstraat 41
Hoograven Elandlaan 13 onder overhangende pannen aan de kopse kant 2 52.074127 5.130575 Flag. Green Elandlaan 13
Noordwest De Bazelstraat 17 1 52.11625 5.07811 Flag. Blue De Bazelstraat 17
Noordwest De Bazelstraat 44 1 52.1165 5.07814 Flag. Blue De Bazelstraat 44
Noordwest Sweder van Zuylenweg 55 1 52.1091296 5.0897783 Flag. Blue Sweder van Zuylenweg 55
Noordwest Sweder van Zuylenweg 57 1 52.1091656 5.0898072 Flag. Blue Sweder van Zuylenweg 57
Noordwest Johannes Uitenbogaertstraat 63 1 52.10908 5.08969 Flag. Blue Johannes Uitenbogaertstraat 63
Noordwest Hermanus Elconiusstraat 69 1 52.107735 5.0892183 Flag. Blue Hermanus Elconiusstraat 69
Noordwest Hermanus Elconiusstraat 77 1 52.1078424 5.0890278 Flag. Blue Hermanus Elconiusstraat 77
Noordwest Linneausstraat 23 1 52.111053 5.0862327 Flag. Blue Linneausstraat 23
Noordwest Kloosterlaan 63 onder overhangende pannen aan de kopse kant 1 52.1094169 5.1005495 Flag. Blue Kloosterlaan 63
Noordwest Amsterdamsestraatweg 361 hoek naast dakraam 1 52.1041615 5.0942923 Flag. Blue Amsterdamsestraatweg 361
Noordwest Knopstraat 52 1 52.1006099 5.0972381 Flag. Blue Knopstraat 52
Noordwest 2e Daalsedijk 141 1 52.1005107 5.0970782 Flag. Blue 2e Daalsedijk 141
Noordoost overig Van Humboldtstraat 26 nok 1 52.0995 5.12203 Flag. Blue Van Humboldstraat 26
Noordoost overig Van Humboldstraat 28 nok 1 52.09954 5.12206 Flag. Blue Van Humboldstraat 28
Noordoost overig Menno van Coehoornstraat 2 nok 1 52.0995813 5.1224458 Flag. Blue Menno van Coehoornstraat 2
Noordoost overig Van Leeuwenhoeckstraat 2 nok 1 52.09926 5.12164 Flag. Blue Van Leeuwenhoeckstraat 2
Noordoost overig Van Leeuwenhoeckstraat 8 nok 1 52.0993 5.12139 Flag. Blue Van Leeuwenhoeckstraat 8
Noordoost overig Van Humboldtstraat 15 nok 1 52.099113 5.1220546 Flag. Blue Van Humboldtstraat 15
Noordoost overig Van Humboldtstraat 25 nok 1 52.0992571 5.1221705 Flag. Blue Van Humboldtstraat 25
Noordoost overig Van Humboldtstraat 16 nok 1 52.0991754 5.1218207 Flag. Blue Van Humboldtstraat 16
Noordoost overig Van 's-Gravesandestraat 4 nok 1 52.0997057 5.1218321 Flag. Blue Van 's-Gravesandestraat 4
Noordoost overig Van 's-Gravesandestraat 10 nok 1 52.0997591 5.1215983 Flag. Blue Van 's-Gravesandestraat 10
Noordoost overig Nieuwe Koekoekstraat 135 nok 1 52.09978 5.12127 Flag. Blue Nieuwe Koekoekstraat 135
Noordoost overig Draaiweg 105 nok 1 52.1006204 5.1169374 Flag. Blue Draaiweg 105
Noordoost overig Draaiweg 113 nok 1 52.1006027 5.1170835 Flag. Blue Draaiweg 113
Noordoost overig Abraham Bloemaertstraat 11 nok 1 52.0997819 5.1197593 Flag. Blue Abraham Bloemaertstraat 11
Noordoost overig Abraham Bloemaertstraat 13 nok 1 52.0998269 5.1197736 Flag. Blue Abraham Bloemaertstraat 13
Noordoost overig Gijsbrecht van Walenborchstraat 50 hoek naast dakraam 1 52.1036249 5.1180286 Flag. Blue Gijsbrecht van Walenborchstraat 50
Noordoost overig Gijsbrecht van Walenborchstraat 51 hoek naast dakraam 1 52.1035175 5.1182481 Flag. Blue Gijsbrecht van Walenborchstraat 51
Noordoost overig Van der Mondestraat 54 hoek naast dakraam 1 52.1028352 5.1185733 Flag. Blue Van der Mondestraat 54
Noordoost overig Van der Mondestraat 58 hoek naast dakraam 1 52.1029341 5.1186165 Flag. Blue Van der Mondestraat 58
Noordoost overig Van Lynden van Sandenburglaan 20 onder overhangende pannen aan de kopse kant 1 52.1065921 5.1225211 Flag. Blue Van Lynden van Sandenburglaan 20
Noordoost overig Van Lynden van Sandenburglaan 22 onder overhangende pannen aan de kopse kant 1 52.1067091 5.1225934 Flag. Blue Van Lynden van Sandenburglaan 22
Noordoost overig Hopakker 37 1 52.0978886 5.1172166 Flag. Blue Hopakker 37
Noordoost overig Hopakker 105 1 52.0991712 5.1160122 Flag. Blue Hopakker 105
Noordoost overig Jacob van der Borchstraat 61 1 52.104583 5.120402 Flag. Blue Jacob van der Borchstraat 61
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment