Skip to content

Instantly share code, notes, and snippets.

@amerval

amerval/AllDataTA.csv

Created November 19, 2015 11:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save amerval/f6505cc65f23e09d7918 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save amerval/f6505cc65f23e09d7918 to your computer and use it in GitHub Desktop.
Download ZIP
module 4 assignment: data bound to map
Raw
AllDataTA.csv
TA2013 Id SubPop MedianInc PercZero PercUnder10 PercUnder25 PercOver25 PercOver35 PercOver50 PercOver100 Area Population Density PopOver15
1 1 34821 19200 5.94 23.11 60.98 39.02 24.13 10.75 1.87 7505 58400 7.78 72.32
2 2 50709 22500 4.92 19.85 54.26 45.74 30.5 14.92 2.54 3314 80800 24.38 71.17
3 3 12384 20100 5.6 22.12 58.77 41.23 24.95 11.46 2.33 3122 19100 6.12 72.86
11 4 19428 20300 3.75 18.76 59.05 40.95 25.54 12.25 2.42 3193 27000 8.46 79.19
12 5 12066 19600 4.62 21.01 59.72 40.28 24.91 11.66 2.31 1186 18750 15.81 71.22
13 6 28230 25800 6 21.01 48.84 51.16 36.57 19.74 4.31 4506 64700 14.36 50.62
15 7 21213 25600 4.43 17.93 48.95 51.05 34.44 17.68 3.76 1755 32000 18.23 73.28
16 8 90918 24000 5.96 23.21 51.51 48.49 33.8 17.4 2.96 94 148200 1576.6 68.15
17 9 30294 26500 4.48 17.95 47.56 52.44 36.88 19.65 3.64 1473 46200 31.36 71.2
18 10 6099 24100 6.39 21.69 51.55 48.45 31.04 15.15 4.43 2063 9350 4.53 73.67
19 11 14427 20900 6.05 23.02 56.29 43.71 29.65 14.99 1.98 1814 22700 12.51 73.15
20 12 6042 23300 4.22 19.56 53.33 46.67 28.9 13.16 2.23 3551 9540 2.69 73.14
21 13 22296 24500 4.05 18.5 50.79 49.21 32.76 15.69 2.74 6955 34300 4.93 73.52
22 14 29457 22600 5.04 20.63 54.15 45.85 31.05 15.66 3.06 2120 45700 21.56 72.14
23 15 75042 23200 4.29 18.23 53.11 46.89 31.47 15.59 2.83 168 116400 692.86 70.49
24 16 43254 23900 4.86 19.78 52.02 47.98 31.86 15.37 2.73 2614 68700 26.28 71.67
25 17 21504 21700 5.11 21.39 55.54 44.46 30.5 16.53 2.73 4441 34400 7.75 72.09
26 18 4278 17100 5.96 25.11 64.59 35.41 24.54 13.67 1.05 22 6900 313.64 72.09
27 19 5457 17400 5.28 24.41 65.37 34.63 20.89 9.51 1.65 3098 8710 2.81 74.71
28 20 28581 20600 4.7 21.69 57.94 42.06 26.14 11.79 2.04 8351 46700 5.59 70.26
29 21 5322 20100 5.02 21.87 58.51 41.49 24.3 8.46 1.24 4124 8140 1.97 76.95
30 22 47592 22600 4.73 20.61 54.15 45.85 30.16 14.37 2.6 5218 75500 14.47 71.17
31 23 39744 22700 3.89 18.96 54.11 45.89 30.4 14.49 2.14 106 57800 545.28 75.51
32 24 9237 23500 4.22 19.13 52.87 47.13 28.97 12.02 1.92 3324 13350 4.02 75.17
33 25 48717 22800 4.69 19.93 53.83 46.17 31.03 15.93 3.21 2225 74200 33.35 73.52
34 26 6096 22400 4.63 20.47 54.43 45.57 29.38 13.58 2.61 2161 9220 4.27 74.28
35 27 17418 24500 4.68 18.64 50.9 49.1 33.43 16.71 3.7 3577 26900 7.52 74.97
36 28 8739 21100 4.84 22.66 56.81 43.19 27.09 12.56 1.99 6730 13150 1.95 77.34
37 29 29625 19800 4.74 20.88 59.44 40.56 25.24 10.88 1.73 2372 43200 18.21 77.33
38 30 10272 21700 4.67 20.33 56.22 43.78 27.39 11.62 1.87 4476 14600 3.26 77.82
39 31 20163 24200 5 19.68 51.33 48.67 32 15.15 2.48 2628 27700 10.54 78.53
40 32 55707 23100 5.16 23 53.06 46.94 31.08 15.38 2.52 337 85300 253.12 70.59
41 33 12186 23000 4.01 18.91 53.59 46.41 28.26 12.16 2.29 4367 17550 4.02 76.41
42 34 21276 18500 4.6 21.12 63.16 36.84 22.22 9.17 1.37 1066 30700 28.8 76.61
43 35 34257 23000 4.13 17.4 53.46 46.54 32.26 17.55 3.5 733 49900 68.08 74.66
44 36 31221 26300 5.96 21.65 48 52 37.53 20.54 4.81 182 53000 291.21 67.57
45 37 27483 26900 5.2 19.11 47.2 52.8 38.04 20.14 3.22 542 41600 76.75 71.93
46 38 69009 27300 5.29 19.74 46.45 53.55 38.36 20.31 4 377 102700 272.41 73.37
47 39 136983 32500 4.72 20.07 41.07 58.93 47.07 30.16 8.49 289 202200 699.65 73.04
48 40 16383 21700 4.19 19.08 56.33 43.67 26.88 12.25 2.07 2298 23500 10.23 75.8
49 41 5148 22300 4.72 19.81 55.07 44.93 28.03 13 2.27 1181 7730 6.55 72.5
50 42 6462 24100 4.22 18.2 51.44 48.56 33.29 16.85 3.06 2452 9400 3.83 74.9
51 43 32217 21600 4.33 20.64 56.3 43.7 28.09 12.97 2.13 9786 48400 4.95 72.35
52 44 32061 23100 3.8 18.43 53.45 46.55 29.94 14.14 2.53 445 46600 104.72 74.36
53 45 31419 23300 3.5 17.91 53.14 46.86 29.92 14.01 2.53 12484 45700 3.66 75.77
54 46 2631 21800 3.53 19.84 56.67 43.33 25.66 11.86 2.62 2050 3790 1.85 77.81
55 47 6936 18000 4.28 22.62 63.28 36.72 24.18 11.76 1.34 7950 10150 1.28 76.7
56 48 9525 21100 4.28 20.54 56.16 43.84 29.1 13.13 1.76 3516 13850 3.94 74.84
57 49 5886 22700 3.77 19.88 54.08 45.92 29.66 13.66 2.34 11870 8900 0.75 76.15
58 50 7587 23000 4.35 19.77 53.66 46.34 29.81 13.56 2.37 8661 11500 1.33 71.66
59 51 30726 24000 4.86 19.6 51.65 48.35 33.55 16.69 2.68 2216 49200 22.2 67.35
60 52 260067 23400 5 21.36 52.55 47.45 32.16 16.07 3.03 1610 363200 225.59 77.85
62 53 24264 28100 5.66 20.49 45.07 54.93 38.87 20.64 3.75 6557 42300 6.45 61.29
63 54 20424 24400 3.45 17.48 51.15 48.85 32.27 13.79 2.61 6208 30600 4.93 70.92
64 55 32025 21200 4.3 19.84 56.8 43.2 28.37 12.65 1.8 2726 44900 16.47 77.09
65 56 2787 22800 4.09 19.48 54.14 45.86 28.42 13.13 2.37 7442 4090 0.55 74.45
66 57 5268 18900 4.67 20.5 61.1 38.9 23.86 9.68 1.82 3577 7660 2.14 74.61
68 59 15066 19700 3.6 19.43 59.42 40.58 25.17 10.51 1.73 7212 20900 2.9 78.49
69 60 12594 23000 3.12 18.6 53.95 46.05 29.28 13.2 1.91 9966 18550 1.86 73.23
70 61 17079 31000 3.02 13.4 37.87 62.13 41.82 21.2 4.43 9368 29200 3.12 65.79
71 62 90651 19400 4.71 27.35 58.46 41.54 27.73 13.44 2.29 3340 126900 37.99 77.78
72 63 12096 23300 4.07 20.04 53.08 46.92 28.94 11.81 1.98 6406 17350 2.71 74.92
73 64 20433 25800 4.29 18.46 48.52 51.48 34.18 16.05 3 32605 29800 0.91 73.8
74 65 8733 22400 3.33 19.03 54.72 45.28 28.44 11.75 1.68 1251 12250 9.79 77.95
75 66 36582 22000 4.08 19.69 55.38 44.62 29.56 14.02 2.11 491 52900 107.74 75.71
76 67 906204 26893.61452 7.77 23.43 47.55 52.45 38.89 21.57 4.89 5600 1507700 269.23 68.09
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Orthographic projection</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
body {
margin: 0;
background-color: DarkGray;
font-family: "nyt-cheltenham",georgia,Lucida sans,
"times new roman",times,serif;
}
#container {
width: 700px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
padding: 50px;
background-color: white;
box-shadow: 3px 3px 5px 6px #ccc;
}
h1 {
font-size: 28px;
border-top: solid 8px #807166;
border-bottom: solid 8px #807166;
}
p {
font-size: 14px;
line-height: 18px;
padding: 30px;
border-bottom: solid 2px #222222;
}
path text {
text-anchor: center;
}
.stroke {
fill: none;
stroke: #000;
stroke-width: 3px;
}
.fill {
fill: AliceBlue;
}
.graticule {
fill: none;
stroke: #777;
stroke-width: .5px;
stroke-opacity: .5;
}
.land {
fill: #111111;
}
.boundary {
fill: none;
stroke: #fff;
stroke-width: .5px;
}
div.tooltip {
position: absolute;
text-align: center;
width: auto;
height: auto;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
</style>
</head>
<body>
<div id="container">
<h1> Disparities in New Zealand </h1>
<p> It is always challenging to represent population related values
across New Zealand because of the great disparities and gap in values.
For example, 34 of the 76 Territorial Authorities (TA) show a density under
10 per sq. km, when 8 have a value over 200, and one at almost 1600.
</br>
On the map below you can choose to see how TA compare
in terms of population, density or median income.
</br>
The main urban centers (Auckland, Wellington and Christchurch) clearly stand out.</p>
<button id="dens">Density</button>
<button id="pop">Population</button>
<button id="income">Median Income</button>
</div>
<script type="text/javascript">
//Width and height
var w = 700;
var h = 700;
// simple colour scale
var coldens = d3.scale.linear()
.domain([0 , 10 , 50 , 100 , 700 , 1600 ])
.range(["#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016450"])
colinc = d3.scale.linear()
.range(["#EF8A62","#F7F7F7","#67A9CF"]),
colpop = d3.scale.linear()
.domain([0 , 10000 , 50000 , 100000 , 400000 , 1600000])
.range(["#edf8fb","#bfd3e6","#9ebcda","#8c96c6","#8856a7","#810f7c"]);
// projection
var projection = d3.geo.orthographic()
.scale(w*4) // zoom NZ
.translate([w / 2, h / 2])
.clipAngle(90)
.rotate([-173,41.,0])
.precision(.1);
// path generator
var path = d3.geo.path()
.projection(projection);
var graticule = d3.geo.graticule();
// div for the tooltip
var div = d3.select("#container").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// create SVG
var svg = d3.select("#container")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.append("defs").append("path")
.datum({type: "Sphere"})
.attr("id", "sphere")
.attr("d", path);
svg.append("use")
.attr("class", "stroke")
.attr("xlink:href", "#sphere");
svg.append("use")
.attr("class", "fill")
.attr("xlink:href", "#sphere");
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
// load in GeoJSON data
d3.json("NZ_TA_light.json", function(json) {
// load in data
d3.csv("AllDataTA.csv",function(data) {
colinc.domain([
d3.min(data, function(d) {
return +d.MedianInc;
}),
24832,
d3.max(data, function(d) {
return +d.MedianInc;
})
]);
// loop through data to add properties
for (var ii=0;ii<data.length;ii++){
for (var jj=0;jj<json.features.length;jj++){
// matching key is id
if (parseFloat(data[ii].TA2013)==parseFloat(json.features[jj].properties.TA2013)){
json.features[jj].properties.Density = +data[ii].Density ;
json.features[jj].properties.Population = +data[ii].Population;
json.features[jj].properties.MedianInc = +data[ii].MedianInc;
}
} // end loop jj
} // end loop ii
//Bind data and create one path per GeoJSON feature
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.attr("class","TAs")
.attr("fill",
// function(d){return cscale(d.properties.Density);}
"#ccc"
);
}); // end data
}); // end JSON
d3.select("#dens").on("click", function() {
svg.selectAll(".TAs")
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html(d.properties.TA2013_NAM + "<br/>" +d.properties.Density +" inh./sq.km")
.style("left", (d3.event.pageX +5) + "px")
.style("top", (d3.event.pageY +5) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
svg.selectAll(".TAs")
.transition()
.attr("fill",function(d){
return coldens(d.properties.Density)});
})
d3.select("#pop").on("click", function() {
svg.selectAll(".TAs")
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html(d.properties.TA2013_NAM + "<br/>" +d.properties.Population+" inhabitants")
.style("left", (d3.event.pageX+5) + "px")
.style("top", (d3.event.pageY +5) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
svg.selectAll(".TAs")
.transition()
.attr("fill",function(d){
return colpop(d.properties.Population)});
})
d3.select("#income").on("click", function() {
svg.selectAll(".TAs")
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html(d.properties.TA2013_NAM + "<br/>" +"$"+d.properties.MedianInc)
.style("left", (d3.event.pageX +5) + "px")
.style("top", (d3.event.pageY +5) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
svg.selectAll(".TAs")
.transition()
.attr("fill",function(d){return colinc(d.properties.MedianInc)});
})
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
NZ_TA_light.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment