-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
138 lines (115 loc) · 3.54 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
135
136
137
138
<!-- shamelessly stolen from scott murray: http://alignedleft.com/tutorials -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<style type="text/css">
svg {
}
/*
.testbar {
fill: #ff00ff;
}
*/
.bar {
fill: #bbb;
}
.g-ESPN {
fill: orange;
}
.g-minor-highlight {
fill: gray;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<h1>An Expensive Outlier</h1>
<script type="text/javascript">
var margin = {top: 20, right: 10, bottom: 20, left: 10};
var width = 610 - margin.left - margin.right,
height = 575 - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("subscription-prices.csv", function(err, prices) {
prices.forEach(function(d) {
// recasts d.2013 as a number, not a string
d.X2013 = +d.X2013;
})
prices.sort(function(a,b) {
return a.X2013 - b.X2013;
});
console.log(prices)
var y = d3.scale.linear()
.domain([0,6])
.range([0,height]);
var x = d3.scale.linear()
.domain([0,prices.length])
.range([0,width]);
var networks = ["Comedy Central","TNT", "C-SPAN", "The Weather Channel", "MSNBC", "Bravo", "TBS", "ESPN2"]
var bar = svg.selectAll(".bar")
.data(prices)
.enter().append("rect")
.attr("width", 2)
.attr("height", function(d) { return y(d.X2013)} )
.attr("y", function(d) { return height - y(d.X2013) })
.attr("x", function(d, i) { return 3 * i})
.attr("class", "bar")
.classed("g-ESPN", function(d) { return d.Network == "ESPN"})
.classed("g-minor-highlight", function(d){
return networks.indexOf(d.Network) >= 0;
})
svg.append("text")
.attr("class", "g-label")
.attr("x", 530)
.attr("y", 30)
.text("ESPN")
d3.svg.axis()
//define x axis
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(0)
//Create x axis
var padding = 0;
svg.append("g")
.attr("class", "axis") //Assign "axis" class
.attr("transform", "translate(0," + (height - padding) + ")")
.call(xAxis);
//Define Y axis
var yAxis = d3.svg.axis()
.scale(y)
.orient("right")
.ticks(5)
.tickValues([0,1,2,3,4,5]);
var padding = 581;
//Create Y axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
});
</script>
<h2>Questions:</h2>
<ul>
<li>Why is my y-axis upside down?</li>
<li>On to the news questions...</li>
<li>Why are there networks costing $0? Do they cost too little to list because of the scale of the data, or are they bundled in with other networks? Maybe they're free for a reason.</li>
<li>How did ESPN become such an outlier? Comparing numbers from years past, maybe there's a story of ESPN's rise to the most expensive network.</li>
<li>Do customers find this much value in ESPN programming? Also, what's behind these cost breakdowns? Why do they cost what they do?</li>
</body>
</html>