-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
198 lines (160 loc) · 6.06 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<meta charset="utf-8">
<title>CS 416: Data Visualization</title>
<h1>Apple Revenue and User Growth Visualization</h1>
<body font-family: "Helvetica Neue"> <br><br>
In this visualization, we will be examining Apple's annual revenue and user growth over recent years.
Over the years, Apple stocks has been rising steadily with quarterly earnings consistently beating expectations.
At the same time, Apple has introduced new products and services in order to maintain its constant growth and keep users engaged in its products and platforms.
Thus, it is worthwhile to examine where the growth is happening, where Apple is focusing its efforts, and if those efforts are effective.
</body>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<div id="my_dataviz"></div>
<style>
body {
font-family: "Helvetica Neue";
margin: auto;
position: relative;
width: 960px;
}
text {
font: 10px sans-serif;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
</style>
<h2> Revenue </h2>
<body font-family: "Helvetica Neue">
The graph above shows the distribution of Apple's revenue in billions of US dollars from 2015 to 2020 across various regions of the world.
These regions are the major global consumers of Apple's products and thus the most significant contributors
to Apple's revenue. From this graph, it is clear Apple's revenue experiences continuous stable growth over the years
in he Americas and Europe. China, Japan, and the Asia Pacific region tells a different story. In these regions,
revenue is stable shows little growth. Next we shall examine much each product contributes to Apple's revenue.
By examining revenue breakdown by product, we can see what drives Apple's revenue growth.
Feel free to zoom in over various years to examine the change in revenue in more detail before moving on. <br><br>
<a href="products.html">Proceed</a>
</body>
<script>
var margin = {top: 60, right: 230, bottom: 50, left: 50},
width = 660 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var svg = d3.select("#my_dataviz")
.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("https://raw.githubusercontent.com/shiyao3/cs416-narrative/main/revenue.csv", function(data) {
var keys = data.columns.slice(1)
var color = d3.scaleOrdinal()
.domain(keys)
.range(d3.schemeSet2);
var stackedData = d3.stack()
.keys(keys)
(data)
var x = d3.scaleLinear()
.domain(d3.extent(data, function(d) { return d.Year; }))
.range([ 0, width ]);
var xAxis = svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).ticks(5))
svg.append("text")
.attr("text-anchor", "end")
.attr("x", width)
.attr("y", height+40 )
.text("Year");
svg.append("text")
.attr("text-anchor", "end")
.attr("x", 0)
.attr("y", -20 )
// .text("Revenue (Billions)")
.attr("text-anchor", "start")
var y = d3.scaleLinear()
.domain([0, 300])
.range([ height, 0 ]);
svg.append("g")
.call(d3.axisLeft(y).ticks(5))
var clip = svg.append("defs").append("svg:clipPath")
.attr("id", "clip")
.append("svg:rect")
.attr("width", width )
.attr("height", height )
.attr("x", 0)
.attr("y", 0);
var brush = d3.brushX()
.extent( [ [0,0], [width,height] ] )
.on("end", updateChart)
var areaChart = svg.append('g')
.attr("clip-path", "url(#clip)")
var area = d3.area()
.x(function(d) { return x(d.data.Year); })
.y0(function(d) { return y(d[0]); })
.y1(function(d) { return y(d[1]); })
areaChart
.selectAll("mylayers")
.data(stackedData)
.enter()
.append("path")
.attr("class", function(d) { return "myArea " + d.key })
.style("fill", function(d) { return color(d.key); })
.attr("d", area)
areaChart
.append("g")
.attr("class", "brush")
.call(brush);
var idleTimeout
function idled() { idleTimeout = null; }
function updateChart() {
extent = d3.event.selection
if (!extent){
if (!idleTimeout) return idleTimeout = setTimeout(idled, 350);
x.domain(d3.extent(data, function(d) { return d.Year; }))
} else {
x.domain([ x.invert(extent[0]), x.invert(extent[1]) ])
areaChart.select(".brush").call(brush.move, null)
}
xAxis.transition().duration(1000).call(d3.axisBottom(x).ticks(5))
areaChart
.selectAll("path")
.transition().duration(1000)
.attr("d", area)
}
var highlight = function(d){
console.log(d)
d3.selectAll(".myArea").style("opacity", .1)
d3.select("."+d).style("opacity", 1)
}
var noHighlight = function(d){
d3.selectAll(".myArea").style("opacity", 1)
}
var size = 20
svg.selectAll("myrect")
.data(keys)
.enter()
.append("rect")
.attr("x", 400)
.attr("y", function(d,i){ return 10 + i*(size+5)})
.attr("width", size)
.attr("height", size)
.style("fill", function(d){ return color(d)})
.on("mouseover", highlight)
.on("mouseleave", noHighlight)
svg.selectAll("mylabels")
.data(keys)
.enter()
.append("text")
.attr("x", 400 + size*1.2)
.attr("y", function(d,i){ return 10 + i*(size+5) + (size/2)})
.style("fill", function(d){ return color(d)})
.text(function(d){ return d})
.attr("text-anchor", "left")
.style("alignment-baseline", "middle")
.on("mouseover", highlight)
.on("mouseleave", noHighlight)
})
</script>