congestion-scan/testJSON2.html at master · CTPSSTAFF/congestion-scan · GitHub

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
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>D3 Test</title>

	<script src="jquery-1.4.2/jquery-1.4.2.min.js"></script>

	<script src="d3-3.5.3/d3.min.js"></script>
</head>
<body>

<script type="text/javascript">
function makeGettersFromSchema(schema) {
	var getters = {};
	var i;;
	var fields = schema.fields;
	for (i = 0; i < fields.length; i++) {
		getters[fields[i].name] = new Function("row", "{ return row.f[" + i + "].v; };");
	}
	return getters;
}

d3.json("http://localhost:8888/d3work/bigtest.json",
		function(data) {
			var getters = makeGettersFromSchema(data.schema);
			createViz(data.rows, getters);
		});

function createViz(data, getters) {

		var metersMile = 1609.34;

		/* Axes */

		var xAxisStart = 0;

		var xAxisEnd = 60;

		var axisXScale = d3.scale.linear()
            .domain([xAxisStart,xAxisEnd])
            .range([0,1200]);

		var xAxis = d3.svg.axis()
			.scale(axisXScale)
			.orient('bottom');

		var yAxisStart = (d3.min(data, function(d) { return(+getters.from(d)); })/metersMile);

		var yAxisEnd = (d3.max(data, function(d) { return(+getters.to(d)); })/metersMile);

		var axisYScale = d3.scale.linear()
            .domain([yAxisStart,yAxisEnd])
            .range([0,-550]);

		var yAxis = d3.svg.axis()
			.scale(axisYScale)
			.orient("left");

		var routeBeginMarker = (d3.min(data, function(d) {return(+getters.from(d)); })/metersMile);
		var routeEndMarker = (d3.max(data, function(d) { return(+getters.to(d)); })/metersMile);
		var routeLength = routeEndMarker - routeBeginMarker

		var svgContainer = d3.select('body')
			.append('svg')
				.attr('width', 1270)
				.attr('height',620)
			.append("g")
				.attr("class", "x axis")
				.attr("transform", "translate(40,550)")
				.call(xAxis)
			.append("g")
				.attr("class", "y axis")
				.call(yAxis);

		var xAxisText = "Minutes";
		var yAxisText = "Miles";

		svgContainer.append("text")
			.attr("class", "label")
			.attr("x", 600)
			.attr("y", 40)
			.style("text-anchor", "end")
			.text(xAxisText);

		svgContainer.append("text")
			.attr("transform", "rotate(-90)")
			.attr("x", 310)
			.attr("y", -30)
			.style("text-anchor", "end")
			.text(yAxisText);

		/* var colorThreshold = d3.scale.threshold()
			.domain([24.99, 34.99, 45, 50, 55, 999])
			.range(["rgb(0,0,115)", "rgb(153,0,247)", "rgb(255,0,0)", "rgb(245,150,0)", "rgb(245,240,0)", "rgb(130,255,46)"]);	*/

		var colorThreshold = d3.scale.threshold()
			.domain([25, 45, 999])
			.range(["rgb(255,0,0)", "rgb(255,195,77)", "rgb(130,255,46)"]);

		var rectangle = svgContainer.selectAll('rect')
			.data(data)
			.enter()
				.append('rect')
				.attr('x', function(d) {return 0+(+getters.minute(d)*20);})
				/* 	Find end of route segment location as percentage of total route length
						( segment "to" mile marker - route begin mile marker) / total route length
					Then multiply by y axis height to find chart location of top of route segment band
						(negative offset from bottom of y axis) */
				.attr('y', function(d) {return -550*(((+getters.to(d)/metersMile) - routeBeginMarker)/routeLength);})
				.attr('width', 20)
				/* 	Find route segment length as percentage of total route length
						( segment "to" mile marker - segment "from" mile marker) / total route length
					Then multiply by y axis height to the height of the route segment band
						(positive offset from the top of segment band on y axis) */
				.attr('height', function(d) {return (((+getters.to(d)/metersMile) - (+getters.from(d)/metersMile))/routeLength)*550;})
				.style("fill", function(d) { return colorThreshold(+getters.speed(d)); });
}

</script>

</body>
</html>