-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (91 loc) · 4.59 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/d3-scale-chromatic.v0.3.min.js"></script>
<script>
// Simple map that shows Divvy trips in Chicago. Darker purple means more trips
// data was retreived from the Chicago Data Portal using the url:
// https://data.cityofchicago.org/resource/fg6s-gzvg.csv?$select=from_location,to_location,count(*)&$group=from_location,to_location&$limit=300000
// Location strings from Socrata are of the form "POINT (lon, lat)"
// we can just chop off the first 6 characters and the last then split it to get a lat lon array
var pointTextToLonLat = function (s) {
return s.substring(7, s.length - 1).split(' ');
};
// create our chart area
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 30, left: 50},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// read our csv file
d3.csv("station_to_station_table.csv", function (data) {
var maxValue = 0;
// reduce our data into something nice --- some points have the same lat lon, so we'll just combine those
// we'll end up with a structure that looks like : {POINT(lon lat): {POINT(lonA latA}: 1 , POINT(lonB latB): 2}
// where the keys to the big map are from locations, the keys to the little maps are to locations, and the values
// of the little maps are the number of trips between them
//
// Also, we'll keep track of the maximum value
var stationGrid = data.reduce(function (acc, d) {
var from_locations = acc[d.from_location] || {};
var totalCount = (from_locations[d.to_location] || 0) + parseInt(d.count, 10);
if(totalCount > maxValue){
maxValue = totalCount;
}
from_locations[d.to_location] = totalCount;
acc[d.from_location] = from_locations;
return acc;
}, {});
// create a scale for opacity
var opacityScale = d3.scalePow()
.domain([0, maxValue])
.range([0,0.8])
// the function that will map our geography to coordinates on the map, the rotate and center values are latitude
// and longitude
var albersProjection = d3.geoAlbers()
.scale(70000)
.rotate([87.6298, 0])
.center([0, 41.8681])
.translate([width / 2, height / 2]);
var geoPath = d3.geoPath()
.projection(albersProjection);
// load our Geojson file and draw it, using our d3 geo function
d3.json("chicago_neighborhoods.geojson", function (data) {
svg.append("path")
.attr("d", geoPath(data))
.style("fill", "white")
.style('fill-opacity', '0.0')
.style('stroke', "black")
.style('stroke-width', '0.2')
;
});
// // create our color scale,
// var colorScale = d3.scaleSequential(d3.interpolatePurples)
// .domain([0, 100])
// for each from location
Object.keys(stationGrid).forEach(function (fromLocation, i) {
var toLocationsMap = stationGrid[fromLocation];
Object.keys(toLocationsMap).forEach(function (toLocation) {
var totalCount = toLocationsMap[toLocation];
var fromLonLat = pointTextToLonLat(fromLocation);
var fromPoint = albersProjection(fromLonLat)
var toLonLat = pointTextToLonLat(toLocation)
var toPoint = albersProjection(toLonLat)
if (totalCount > 200 && fromPoint[0] && fromPoint[1] && toPoint[0] && toPoint [1]) {
svg.append("line")
.attr('x1', fromPoint[0])
.attr('y1', fromPoint[1])
.attr('x2', toPoint[0])
.attr('y2', toPoint[1])
.attr('stroke-width', 1)
.attr('stroke', '#810049')
// // .attr('stroke', colorScale(d.count))
// .style('stoke', 'black')
// .style('stroke-opacity', 0.8)
.style('stroke-opacity', opacityScale(totalCount))
}
})
})
}
)
</script>