-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
262 lines (248 loc) · 14.3 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
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://akhilchainani.github.io/cs498DVAssignment/index.css">
<style> rect {fill: lightblue; stroke: black; }</style>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://akhilchainani.github.io/cs498DVAssignment/cityBarChart.js"></script>
<script src="https://akhilchainani.github.io/cs498DVAssignment/multiScatterPlot.js"></script>
</head>
<body>
<h1>Data Visualization - Final Project</h1>
<p>Click on the buttons inside the tabbed menu:</p>
<div class="tab">
<button class="tablinks" onclick="openVisualization(event, 'Overview')">About the Visualization</button>
<button class="tablinks" onclick="openVisualization(event, 'SceneOne')">Versus Other Cities</button>
<button class="tablinks" onclick="openVisualization(event, 'SceneTwo')">Variation Between Sizes</button>
<button class="tablinks" onclick="openVisualization(event, 'SceneThree')">Over The Years</button>
</div>
<div id="Overview" class="tabcontent">
<ul>
<li>
Messaging: What is the message you are trying to communicate with the narrative visualization?
<p>
My narrative visualization is supposed to depict how in every respect, New York rent prices have become astronomically high. This is done through a variety of charts and visualizations, highlighting different aspects of this issue.
</p>
</li>
<li>
Narrative Structure. Which structure was your narrative visualization designed to follow (martini glass, interactive slide show or drop-down story)? How does your narrative visualization follow that structure? (All of these structures can include the opportunity to "drill-down" and explore. The difference is where that opportunity happens in the structure.)
<p>
I use an interactive slide show that allows viewers to move through different scenes and view the data from different angles. The landing page brings users to an overview, which is general information regarding the visualization. Viewers also have the option of moving laterally between scenes as they so choose
</p>
</li>
<li>
Visual Structure: What visual structure is used for each scene? How does it ensure the viewer can understand the data and navigate the scene? How does it highlight to urge the viewer to focus on the important parts of the data in each scene? How does it help the viewer transition to other scenes, to understand how the data connects to the data in other scenes?
<p>
Each scene uses a bar chart to highlight the key concept in that scene. A bar chart seemed to make the most sense for this data, since the bottom axes were all categorical data. Another suitable alternative could have been a pie chart, but I felt as though that wouldn’t convey the point as eloquently as a bar chart. From the user perspective, the bar chart instantaneously depicts a trend that that scene is trying to exemplify. For example, in the final scene that shows rent change over time, at first glance, the user will notice a near-linear increase over the years, which supports the claim. In the case of the first chart, the first thing the user should notice is the fact that New York and San Francisco rent prices are substantially higher than other big cities in America. Since all of these charts are built from the same dataset, it allows users to simply view the data from different angles and see variation across different dimensions.
</p>
</li>
<li>
Scenes: What are the scenes of your narrative visualization? How are the scenes ordered, and why?
<p>
My landing scene brings the user to an overview of the visualization, providing them with general information. The second scene depicts a bar chart of the average rent in 2018 in some of the largest cities in the country (plus Champaign). I chose to start with this scene because geographically, I thought it made the most sense to analyze the data across the entire country before diving into New York City specifically, because it would give the view a baseline reference. The next scene compares New York City rent prices, between certain bedroom styles (1 bedroom, 2 bedroom, studio, etc.). I chose this as my next scene because it would serve as a transition into New York city specific data; even though this scene doesn’t depict convictive evidence supporting the claim, it’s extremely useful background information, that shows the rent distribution across New York. The last scene is another bar graph that shows the Average New York City rent prices over the past five years. Since this clearly shows that the average rent has increased nearly 10% in the last 5 years, this scene, coupled with the previous two, support the claim of how New York City rent prices are incessantly high.
</p>
</li>
<li>
Annotations. What template was followed for the annotations, and why that template? How are the annotations used to support the messaging? Do the annotations change within a single scene, and if so, how and why?
<p>
Since each graph is somewhat independent, I annotated the graph as a whole, describing how the data supports the claim. The annotations do not change, since there is limited user interaction within the scene.
</p>
</li>
<li>
Parameters. What are the parameters of the narrative visualization? What are the states of the narrative visualization? How are the parameters used to define the state and each scene?
<p>
The screen lands on the “Overview” tab. After that, when the user clicks a button to move to the next tab, it triggers an OnClick() function that renders the next scene, this changes the current state of the visualization, and each time the user clicks a new button, the scene the clicked on is rendered.
</p>
</li>
<li>
Triggers. What are the triggers that connect user actions to changes of state in the narrative visualization? What affordances are provided to the user to communicate to them what options are available to them in the narrative visualization?
<p>
My triggers are tabs located at the top of the screen, which allow the user to easily go back and forth between scenes and navigate the visualization how they so choose. The tabs highlight when the user’s cursor is on it to show that they can be clicked on. The tabs also contrast the background, to further highlight the fact that the buttons can be clicked on.
</p>
</li>
</ul>
</div>
<div id="SceneOne" class="tabcontent">
<div id="tooltip"></div>
<p>
This bar charts plots the Average Rent in 2018 for various cities across America. As a baseline, Champaign, IL was included as well. Notice how New York City and San Francisco prices are substantially higher than the remaining locations. Seattle, WA and Chicago, IL are hardly half the cost of New York and San Francisco.
</p>
</div>
<div id="SceneTwo" class="tabcontent">
<p>
This bar chart plots the Average Rent in 2018 for various bedroom types (Studio, One Bedroom, Two Bedroom, etc.) in New York City. Even simple studio apartments, that typically only contain the bare necessities, have a monthly rent of almost $2000/month.
</p>
</div>
<div id="SceneThree" class="tabcontent">
<p>
This bar chart plots the Average Rent for apartments in New York City from the years 2014-2019. During this time period, rent prices have increased nearly 10%, from approximately $1800 to $1900. Even though this may not seem like a substatial change, this slight difference affects all of the 8 Million people who live in New York. That's about an $800 Million increase in monthly housing costs on average!
</p>
</div>
<script>
function SceneOne() {
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 100
};
var width = 960 - margin.left - margin.right;
var height = 610 - margin.top - margin.bottom;
d3.select('body').append('svg').attr('width', 960).attr('height', 620);
var x = d3.scaleBand().domain(["New York, NY", "Chicago, IL", "San Francisco, CA", "Seattle, WA", "Champaign, IL"]).range([0,width]);
var y = d3.scaleLinear().domain([0, 2500]).range([height, 0]);
chart = d3.select('svg').append('g').attr('transform', "translate("+margin.left+","+margin.top+")");
const data = d3.csv("https://raw.githubusercontent.com/akhilchainani/cs498DVAssignment/master/Preprocessed_Rent.csv")
.then(function(data) {
console.log(data);
chart.selectAll('rect').data(data)
.enter().append('rect')
.filter(function(d) { return d.Bedroom_Size == "Studio"; })
.attr('x', function(d,i) { return x(d.Location); })
.attr('y', function(d) { return y(parseFloat(d.Price_2018__AVG)); })
.attr('width', x.bandwidth())
.attr('height', function(d) { return height - y(parseFloat(d.Price_2018__AVG)); });
})
.catch(function() {
console.log("error");
});
console.log(data);
var xAxis = d3.axisBottom(x);
d3.select('svg').append('g').attr('transform', "translate("+margin.left+","+margin.top+")").call(d3.axisLeft(y));
d3.select('svg').append('g').attr('transform', "translate("+margin.left+","+(height+margin.top)+")").call(xAxis);
d3.select('svg').append("text")
.attr("class", "x label")
.attr("text-anchor", "end")
.attr("x", 527)
.attr("y", 610)
.text("City");
d3.select('svg').append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("y", 20)
.attr("x", -250)
.attr("dy", "1em")
.attr("transform", "rotate(-90)")
.text("Average Rent");
}
function SceneTwo() {
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 100
};
var width = 960 - margin.left - margin.right;
var height = 610 - margin.top - margin.bottom;
d3.select('body').append('svg').attr('width', 960).attr('height', 620);
var x = d3.scaleBand().domain(["Studio", "1br", "2br", "3br", "4br"]).range([0,width]);
var y = d3.scaleLinear().domain([1250, 3750]).range([height, 0]);
chart = d3.select('svg').append('g').attr('transform', "translate("+margin.left+","+margin.top+")");
const data = d3.csv("https://raw.githubusercontent.com/akhilchainani/cs498DVAssignment/master/Preprocessed_Rent.csv")
.then(function(data) {
console.log(data);
chart.selectAll('rect').data(data)
.enter().append('rect')
.filter(function(d) { return d.Location == "New York, NY"; })
.attr('x', function(d,i) { return x(d.Bedroom_Size); })
.attr('y', function(d) { return y(parseFloat(d.Price_2018__AVG)); })
.attr('width', x.bandwidth())
.attr('height', function(d) { return height - y(parseFloat(d.Price_2018__AVG)); });
})
.catch(function() {
console.log("error");
});
console.log(data);
var xAxis = d3.axisBottom(x);
d3.select('svg').append('g').attr('transform', "translate("+margin.left+","+margin.top+")").call(d3.axisLeft(y));
d3.select('svg').append('g').attr('transform', "translate("+margin.left+","+(height+margin.top)+")").call(xAxis);
d3.select('svg').append("text")
.attr("class", "x label")
.attr("text-anchor", "end")
.attr("x", 527)
.attr("y", 610)
.text("Bedroom Type");
d3.select('svg').append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("y", 20)
.attr("x", -250)
.attr("dy", "1em")
.attr("transform", "rotate(-90)")
.text("Average Rent");
}
function SceneThree() {
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 100
};
var width = 960 - margin.left - margin.right;
var height = 610 - margin.top - margin.bottom;
d3.select('body').append('svg').attr('width', 960).attr('height', 620);
var x = d3.scaleBand().domain(["2014","2015","2016","2017","2018","2019"]).range([0,width]);
var y = d3.scaleLinear().domain([1750, 1950]).range([height, 0]);
chart = d3.select('svg').append('g').attr('transform', "translate("+margin.left+","+margin.top+")");
const data = d3.csv("https://raw.githubusercontent.com/akhilchainani/cs498DVAssignment/master/Pivoted_data.csv")
.then(function(data) {
console.log(data);
chart.selectAll('rect').data(data)
.enter().append('rect')
.filter(function(d) { return d.Location == "New York, NY" && d.Bedroom_Size == "Studio"; })
.attr('x', function(d,i) { return x(d.Year); })
.attr('y', function(d) { return y(parseFloat(d.AVG_Rent)); })
.attr('width', x.bandwidth())
.attr('height', function(d) { return height - y(parseFloat(d.AVG_Rent)); });
})
.catch(function() {
console.log("error");
});
console.log(data);
var xAxis = d3.axisBottom(x);
d3.select('svg').append('g').attr('transform', "translate("+margin.left+","+margin.top+")").call(d3.axisLeft(y));
d3.select('svg').append('g').attr('transform', "translate("+margin.left+","+(height+margin.top)+")").call(xAxis);
d3.select('svg').append("text")
.attr("class", "x label")
.attr("text-anchor", "end")
.attr("x", 527)
.attr("y", 610)
.text("Year");
d3.select('svg').append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("y", 20)
.attr("x", -250)
.attr("dy", "1em")
.attr("transform", "rotate(-90)")
.text("Average Rent");
}
function openVisualization(evt, visName) {
console.log("new event")
var i, tabcontent, tablinks;
d3.select("svg").remove();
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(visName).style.display = "block";
if(evt!==0)
evt.currentTarget.className += " active";
if(visName==='SceneOne')
SceneOne();
if(visName==='SceneTwo')
SceneTwo();
if(visName==='SceneThree')
SceneThree();
if(visName==='Overview')
tablinks[0].className += " active";
}
openVisualization(0,'Overview');
</script>
</body>
</html>