-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
365 lines (314 loc) · 23.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
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
<!DOCTYPE html>
<html>
<head>
<!-- Made with <3 by a nerd who loves data! Feel free to fork this repo or, if you have any questions about how something on here works, reach out to me! -->
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Local CSS -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Favicon -->
<link rel="icon" href="img/male-technologist.png" type="image/gif" sizes="16x16">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&family=PT+Serif:ital,wght@0,400;0,700;1,700&display=swap" rel="stylesheet">
<!-- Font Awesome, for the icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Something to do with responsiveness -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vivek Rao's portfolio</title>
<!-- Meta tags for social -->
<meta property="og:url" content="https://vivrao9.github.io/index.html"/>
<meta property="og:type" content="website" />
<meta property="og:title" content="Vivek Rao's portfolio"/>
<meta property="og:description" content="I love telling stories with data."/>
<meta property="og:site_name" content="Vivek Rao's portfolio">
<meta property="og:image" content="https://vivrao9.github.io/img/Rao_Vivek.jpg"/>
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@v1vra0">
<meta name="twitter:creator" content="@v1vra0">
<meta name="twitter:title" content="Vivek Rao's portfolio">
<meta name="twitter:description" content="I love telling stories with data."/>
<meta name="twitter:image" content="https://vivrao9.github.io/img/Rao_Vivek.jpg" />
</head>
<body>
<!-- alert banner to make an announcement! -->
<!-- <div class="alert alert-dismissable vivek-banner external-link">
<p class="close" data-dismiss="alert" aria-label="close">×</p>
<strong>Let's work together!</strong> I'm looking for my next role in analytics and storytelling. <a href="mailto:[email protected]?subject=Let's work together" style="border-bottom: 2px solid black; color: black;">Drop me a line</a>!
</div> -->
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand navbar-hed" href="#">Vivek Rao</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link navbar-text" href="#portfolio" style="margin-left:70vw;">Work</a>
<a class="nav-item nav-link navbar-text" href="resume.html">Resume</a>
</div>
</div>
</nav>
<!-- <div class="container" style="height: 50px;">
<div class="row"></div>
</div> -->
<div class="container-fluid">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3">
<img src="img/Rao_Vivek.jpg" style="padding-top: 5%; margin-bottom:10px; object-fit: cover; height: 250px; object-position: 0% 12%;" width="200px">
<p class="greeting" style="margin:0px;">Hi, I'm Vivek! <span style="font-style: italic; font-size: 0.8rem">(he/him)</span></p>
<p class="pronunciation">that's <i>[ viv-<b>ake</b> ]</i></p>
<h6>I'm passionate about analyzing and telling stories with data.</h6>
<p style="margin-top: 1rem;">
<a href="mailto:[email protected]?subject=Wanted to chat about your portfolio" target="_blank"><i class="fa fa-envelope" style="font-size:25px; color: black; margin-right: 20px;"></i></a>
<a href="img/Resume of Vivek Rao.pdf" target="_blank"><i class="fa fa-file-pdf-o" style="font-size:25px; color: black; margin-right: 20px;"></i></a>
<!-- <a href="https://www.twitter.com/v1vra0" target="_blank"><i class="fa fa-twitter-square" style="font-size:25px; color: black; margin-right: 20px;" target="_blank"></i></a> -->
<a href="https://www.linkedin.com/in/vivek-rao-analytics/" target="_blank"><i class="fa fa-linkedin-square" style="font-size:25px; color: black; margin-right: 20px;"></i></a>
<a href="https://github.com/vivrao9" target="_blank"><i class="fa fa-github-square" style="font-size:25px; color: black; margin-right: 20px;"></i></a>
<!-- <a href="https://www.behance.net/vivrao" target="_blank"><i class="fa fa-behance" style="font-size:25px; color: black; margin-right: 20px;"></i></a> -->
<!-- <a href="https://observablehq.com/@vivrao9/" target="_blank"><img src="img/observable.png" style="width:19px; color: black; margin-bottom: 8px; margin-right: 20px;"></i></a> -->
</p>
</div>
<div class="col-md-8">
<span class="section-hed">About me</span>
<div style="width: 85%">
<p class="copy">I design data visualizations, dashboards, websites, and digital tools that communicate complex ideas in simple ways.</p>
<p class="copy">I believe in taking a user-centered approach when visualizing data. This involves lots of research, testing, and rapid prototyping. I also think it's critical to collaborate with developers while designing. I'm comfortable using Figma, d3.js, React, Tableau, PowerBI, Python, SQL, the Adobe Creative Suite, and more.</p>
<p class="copy">Outside of work, I'm passionate about biking, painting, journalism and ethical AI. Reach out to me if you'd like to chat about those things or about any of my projects below.</p>
<!-- <p class="copy">In a past life, I served as managing editor for digital at my undergrad campus paper, contributing to a 30% growth in web traffic. I also led a team to redesign the website (generating an additional $15,000 in annual revenue) and created more than 100 data visualizations.</p> -->
<p class="copy external-link">Oh, and one more thing. I love puzzles and do the New York Times' sudoku (almost) every day. I last did it on <code id='latest_date'>12/5/2024</code> and finished it in <code id='latest_time'>4:39</code>. If you'd like to learn more about my sudoku times, I wrote <a href="https://vivrao9.github.io/nyt-sudoku" target="_blank">this essay</a>!</p>
</div>
<span class="section-hed" style="margin-top: 20px;" id="awards">Awards</span>
<p class="copy" style="margin-top: 10px;"><b>Winner, visual and data-driven story:</b> Pudding Cup 2024</p>
<p class="copy" style="margin-top: 5px;"><b>First place, data visualization:</b> Society of Professional Journalists</p>
<p class="copy" style="margin-top: 5px;"><b>First/third place, interactive graphic:</b> Columbia Scholastic Press Association</p>
<p class="copy" style="margin-top: 5px;"><b>First place, best journalism website:</b> Indiana Professional Chapter of the Society of Professional Journalists</p>
<p class="copy" style="margin-top: 5px;"><b>Second place, informational graphic:</b> Indiana Collegiate Press Association</p>
<!-- <p class="copy" style="margin-top: 5px;"><b>Third place, best infographic:</b> College Media Association Pinnacle Awards</p> -->
<p class="copy" style="margin-top: 5px;"><b>Honorable mention, interactive graphic:</b> Associated Collegiate Press</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="col-md-1"></div>
<div class="row">
<div class="col-md-1"></div>
<span class="section-hed" style="margin-top: 20px; margin-bottom:15px; margin-left: 1rem;" id="portfolio">Data visualization:</span>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-8">
<div class="row d-flex justify-content-center" style="margin-bottom: 10px; margin-top: 10px;">
<div class="col-md-4">
<a href="https://vivrao9.github.io/nyt-sudoku" target="_blank"><img src="img/doks_preview.gif" style="width:100%; object-fit: cover; height: 200px; padding-bottom:10px; align:center;"></a><br>
</div>
<div class="col-md-8">
<a href="https://vivrao9.github.io/nyt-sudoku" target="_blank" class="portfolio-head">Using analytics and visualization to find patterns in how I solve the sudoku</a>
<p class="subhead">
<span class="skill">Figma</span>
<span class="skill">Python</span>
<span class="skill">React</span>
<span class="skill">d3.js</span>
</p>
<p class="copy">This is a data-driven essay I wrote to analyze how I fill out the New York Times sudoku. For this piece, I created a browser extension to track how I fill the Times grid, built out a server to collect data, wrote Python notebooks for analysis, and used d3.js + React for data viz.</p>
<p class="copy external-link">I also open-sourced my data and code. Take a look at the entire repo <a href="https://github.com/vivrao9/nyt-sudoku" target="_blank" style="border-bottom: 2px black solid;">here</a>.</p>
</div>
</div>
<hr style="width:100%;">
<div class="row d-flex justify-content-center" style="margin-bottom: 10px; margin-top: 10px;">
<div class="col-md-4">
<a href="nursing-homes.html" target="_blank"><img src="img/Nursing Homes Cover.png" style="width:100%; object-fit: cover; height: 200px; padding-bottom:10px; align:center;"></a><br>
</div>
<div class="col-md-8">
<a href="nursing-homes.html" target="_blank" class="portfolio-head">Supporting a health agency monitor 300+ nursing homes through data viz</a>
<p class="subhead">
<span class="skill">Figma</span>
<span class="skill">user testing</span>
<span class="skill">Tableau</span>
<span class="skill">AWS</span>
<span class="skill">Python</span>
</p>
<p class="copy">I worked with a designer and a Tableau developer to help create two dashboards for a health agency. I designed and conducted user research for an internal dashboard that the agency uses to identify nursing homes that need intervention.</p>
<p class="copy external-link">I also used AWS and Python to create a data pipeline that populated the dashboards. Read more about my design and development process <a href="nursing-homes.html" target="_blank" style="border-bottom: 2px black solid;">here</a>.</p>
</div>
</div>
<hr style="width:100%;">
<div class="row d-flex justify-content-center" style="margin-bottom: 10px; margin-top: 10px;">
<div class="col-md-4">
<a href="https://www.mckinsey.com/industries/social-sector/our-insights/examining-philanthropic-funding-for-racial-equity-across-the-united-states" target="_blank"><img src="img/racial-equity-map.gif" style="width:100%; object-fit: cover; height: 200px; padding-bottom:10px; align:center;"></a><br>
</div>
<div class="col-md-8">
<a href="https://www.mckinsey.com/industries/social-sector/our-insights/examining-philanthropic-funding-for-racial-equity-across-the-united-states" target="_blank" class="portfolio-head">Examining philanthropic funding for racial equity across the United States</a>
<p class="subhead">
<span class="skill">data wrangling</span>
<span class="skill">Figma</span>
<span class="skill">bivariate choropleths</span>
<span class="skill">scrollytelling</span>
</p>
<p class="copy">For this piece, I worked with data scientists to identify counties in the U.S. that received less philanthropic aid relative to need. We used bivariate choropleths and scrollytelling to explain the project's methodology.</p>
<p class="copy">This piece was special to me because I was on the founding team for an affinity group in the McKinsey Boston office to promote social mobility.</p>
</div>
</div>
<hr style="width:100%;">
<div class="row d-flex justify-content-center" style="margin-bottom: 10px; margin-top: 10px;">
<div class="col-md-4">
<a href="https://www.idsnews.com/article/2019/05/utilities-analysis-finds-science-buildings-use-most-electricity-and-other-key-takeaways-iu" target="_blank"><img src="img/map.gif" style="width:100%; object-fit: cover; height: 200px; padding-bottom:10px; align:center;"></a><br>
</div>
<div class="col-md-8">
<a href="https://www.idsnews.com/article/2019/05/utilities-analysis-finds-science-buildings-use-most-electricity-and-other-key-takeaways-iu" target="_blank" class="portfolio-head">Analysis of campus utilities finds fountain wasting 10 million gallons of water</a>
<p class="subhead">
<span class="skill">data analysis</span>
<span class="skill">dashboarding</span>
<span class="skill">Plot.ly</span>
<span class="skill">geocoding</span>
<span class="skill">Mapbox</span>
</p>
<p class="copy external-link">Analyzed utilities use for more than 100 structures on IU's campus. Created <a href="https://vivrao9.github.io/scratch/vivek-utilities" target="_blank" style="border-bottom: 2px black solid;">a JavaScript visualization</a> that uncovered a fountain wasting 10 million gallons of water annually.</p>
<p class="copy">For this story, I learned how to ask hard questions. I was at the university's physical plant at least twice a week to press the assistant director on how they hadn't discovered the leak.</p>
</div>
</div>
<hr style="width: 80%">
<div class="row d-flex justify-content-center story-row" style="margin-bottom: 10px; margin-top: 10px;">
<div class="col-md-4">
<a href="http://specials.idsnews.com/how-iu-does-its-laundry/" target="_blank"><img src="img/laundry-heatmap.jpg" style="width:100%; object-fit: cover; height: 200px; padding-bottom:10px; align:center;"></a><br>
</div>
<div class="col-md-8">
<a href="http://specials.idsnews.com/how-iu-does-its-laundry/" target="_blank" class="portfolio-head">What’s the best time to do laundry on campus?</a>
<p class="subhead">
<span class="skill">data analysis</span>
<span class="skill">cron jobs</span>
<span class="skill">Plot.ly</span>
<span class="skill">Python</span>
<span class="skill">web scraping</span>
</p>
<p class="copy external-link">Built a <a href="https://github.com/vivrao9/laundryatiu/blob/master/Laundry%20Scraper.py" target="_blank" style="border-bottom: 2px black solid;">web scraper</a> to collect laundry use data across residence halls on campus to determine the optimal time to do laundry. Created a JavaScript heatmap to visualize this data.</p>
<p class="copy">Set up my first data pipeline and created a slackbot to alert the team if there was an issue while scraping.</p>
</div>
</div>
<hr style="width:100%;">
</div>
</div>
</div>
<div class="container-fluid">
<div class="col-md-1"></div>
<div class="row">
<div class="col-md-1"></div>
<span class="section-hed" style="margin-top: 20px; margin-bottom:15px; margin-left: 1rem;">Digital stories:</span>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-8">
<div class="row d-flex justify-content-center story-row" style="margin-bottom: 10px; margin-top: 10px;">
<div class="col-md-4">
<a href="http://specials.idsnews.com/iu-theater-department-sexual-harassment-title-ix" target="_blank"><img src="https://s3.amazonaws.com/snwceomedia/ids/593814a3-b14f-4b8a-adbf-3b0d57a33faa.sized-1000x1000.jpeg" style="width:100%; object-fit: cover; height: 200px; padding-bottom:10px; align:center;"></a><br>
</div>
<div class="col-md-8">
<a href="http://specials.idsnews.com/iu-theater-department-sexual-harassment-title-ix" target="_blank" class="portfolio-head">IU found a professor sexually harassed a freshman, allowed him to continue teaching</a>
<p class="subhead">
<span class="skill">creative direction</span>
<span class="skill">deadlines</span>
<span class="skill">responsive web layouts</span>
</p>
<p class="copy">Designed and developed a longform piece that uncovered how an IU professor was allowed to teach despite exhibitng <i>“a concerning pattern of singling out certain students”</i> and sexually harassing them.</p>
<p class="copy external-link">This piece taught me the importance of coordination as I worked on it from a different country and time zone. Our team prioritized timeliness, communication and frequent check-ins. The professor resigned at the end of that week. Check out all of our stories <a href="http://specials.idsnews.com/iu-theater-sexual-harrasment-allegations-2020/" target="_blank">here</a>.</p>
</div>
</div>
<hr style="width:100%;">
<div class="row d-flex justify-content-center story-row" style="margin-bottom: 10px; margin-top: 10px;">
<div class="col-md-4">
<a href="https://www.idsnews.com/" target="_blank"><img src="img/redesign-mini.gif" style="width:100%; object-fit: cover; height: 200px; padding-bottom:10px; align:center;"></a><br>
</div>
<div class="col-md-8">
<a href="https://www.idsnews.com/" target="_blank" class="portfolio-head">idsnews.com [redesign]</a>
<p class="subhead">
<span class="skill">project management</span>
<span class="skill">Adobe Creative Suite</span>
<span class="skill">responsive web layouts</span>
</p>
<p class="copy">On this project, my team and I asked questions from <i>“How big should this font be?”</i> to <i>“How do we give underrepresented voices more space on the homepage?”</i></p>
<p class="copy external-link" style="margin: 3px;">In its first year, the redesigned website fetched $15,000 more in annual advertising revenue. Our focus was on making branding more consistent, optimizing ad revenue, updating fonts, and giving web layouts a facelift.</p>
</div>
</div>
<!-- end web dev col -->
</div>
<!-- end web dev row -->
</div>
<!-- end container fluid -->
</div>
<div class="container-fluid">
<div class="col-md-1"></div>
<div class="row">
<div class="col-md-1"></div>
<span class="section-hed" style="margin-top: 20px; margin-bottom:15px; margin-left: 1rem;">Data science:</span>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-8">
<div class="row d-flex justify-content-center story-row" style="margin-bottom: 10px; margin-top: 10px;">
<div class="col-md-4">
<a href="https://ajbrillembourg.github.io/informs-bac-post-covid-tutoring-intervention" target="_blank"><img src="https://ajbrillembourg.github.io/images/Purdue/IP/thumbnail1024_1.png" style="width:100%; object-fit: contain; height: 200px; padding-bottom:10px; align:center;"></a><br>
</div>
<div class="col-md-8">
<a href="https://ajbrillembourg.github.io/informs-bac-post-covid-tutoring-intervention" target="_blank" class="portfolio-head">Measuring the effect of tutoring on various student groups in the COVID-19 pandemic</a>
<p class="subhead">
<span class="skill">dimension reduction (UMAP)</span>
<span class="skill">documentation</span>
<span class="skill">Asana</span>
</p>
<p class="copy">My practicum project for my master's program, my team and I worked with a local school district to measure the effect of various tutoring interventions on student academic performance. We used difference-in-difference and 2SLS models.</p>
<p class="copy">My role on the team was to use dimension reduction to identify different student groups based on learning and demographic features. Our paper and poster were featured in the Midwest Decision Sciences Institute (MWDSI) and 2022 INFORMS Business Analytics conferences.</p>
</div>
</div>
<hr style="width:100%;">
<div class="row d-flex justify-content-center story-row" style="margin-bottom: 10px; margin-top: 10px;">
<div class="col-md-4">
<a href="https://www.idsnews.com/article/2020/12/iu-mcrobbie-speeches-gpt-2" target="_blank"><img src="https://snworksceo.imgix.net/ids/9d3be8a9-f8e7-4198-a365-685f9907e939.sized-1000x1000.png?" style="width:100%; object-fit: cover; height: 200px; padding-bottom:10px; align:center;"></a><br>
</div>
<div class="col-md-8">
<a href="https://www.idsnews.com/article/2020/12/iu-mcrobbie-speeches-gpt-2" target="_blank" class="portfolio-head">Using machine learning to simulate, analyze outgoing IU president McRobbie's speeches</a>
<p class="subhead">
<span class="skill">fine-tuning LLMs</span>
<span class="skill">scikit-learn</span>
<span class="skill">nltk</span>
<span class="skill">web scraping</span>
</p>
<p class="copy">Fine-tuned OpenAI's GPT-2 to simulate speeches and also visualized insights through responsive graphics.</p>
<p class="copy">My first foray into natural language processing, I learned a lot about machine learning and best practices when writing code. I got to work with dimensionality reduction, string analysis, data cleaning and more.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="col-md-1"></div>
<div class="row">
<div class="col-md-1"></div>
<span class="section-hed" style="margin-top: 20px; margin-bottom:15px; margin-left: 1rem;">Data engineering:</span>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-8">
<div class="row d-flex justify-content-center story-row" style="margin-bottom: 10px; margin-top: 5px;">
<div class="col-md-4">
<a href="https://www.idsnews.com/article/2020/03/tracking-coronavirus-in-indiana-covid-19-outbreak" target="_blank"><img src="https://s3.amazonaws.com/snwceomedia/ids/4cbad6be-e0f7-4bc5-b8a7-d09ff83d7e2f.original.jpg" style="width:100%; object-fit: cover; height: 200px; padding-bottom:10px; align:center;"></a><br>
</div>
<div class="col-md-8">
<a href="https://www.idsnews.com/article/2020/03/tracking-coronavirus-in-indiana-covid-19-outbreak" target="_blank" class="portfolio-head">Tracking coronavirus cases in Indiana</a>
<p class="subhead">
<span class="skill">Python</span>
<span class="skill">cartography</span>
<span class="skill">data viz</span>
</p>
<p class="copy">Created and managed Indiana's first coronavirus tracker — even before the state health department.</p>
<p class="copy external-link" style="margin: 3px;">I later used Python to <a href="https://github.com/vivrao9/isdh-map-updater/blob/master/isdh-data-reader.py" target="_blank" style="border-bottom: 2px black solid;">automate</a> the map by setting up a data pipeline. I also posted daily updates to the newsroom's Twitter and Facebook.</p><br>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
</body>
</html>