forked from freeCodeCamp/2016-new-coder-survey
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
512 lines (507 loc) · 19.9 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
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>2016 New Coder Survey</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="./javascript/barcharts.js" type="text/javascript" charset="utf-8"></script>
<script src="./javascript/main.js" type="text/javascript" charset="utf-8"></script>
<script src="./javascript/maps.js" type="text/javascript" charset="utf-8"></script>
<link href="./stylesheets/maps.css" rel="stylesheet">
<link href="./stylesheets/style.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:900,500,400,300,100' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<h1>2016 New Coder Survey</h1>
<p class="description">the first open data survey on new coders.</br>
15K+ people learning to code all over the world.</p>
<p class="logos">
<a href="http://www.codenewbie.org/" target="_blank">CodeNewbie</a> and
<a href="https://www.freecodecamp.com/" target="_blank">FreeCodeCamp</a>
</p>
<br>
</header>
<nav>
<ul>
<li><a href="#results" class="moveTo">RESULTS</a></li>
<li><a href="#faqs" class="moveTo">FAQs</a></li>
<li><a href="#about" class="moveTo">ABOUT</a></li>
<li><a href="#" class="get-raw-data">GET RAW DATA</a></li>
</ul>
</nav>
<section class="results" id="results">
<header>
<h2>Results</h2>
<p>The results of our international survey of 15,494 new coders.</p>
</header>
<div class="tag-sections">
<article class="tags">
<h3>Demographic</h3>
<div class="tag-cloud">
<div class="tag"><a href="#">gender</a></div>
<div class="tag"><a href="#">age</a></div>
<div class="tag"><a href="#">education</a></div>
<div class="tag"><a href="#">ethnic minority</a></div>
<div class="tag"><a href="#">military status</a></div>
<div class="tag"><a href="#">internet access</a></div>
<div class="tag"><a href="#">marital status</a></div>
<div class="tag"><a href="#">family status</a></div>
<div class="tag"><a href="#">dependents</a></div>
<div class="tag"><a href="#">language</a></div>
<div class="tag"><a href="#">location</a></div>
</div>
</article>
<article class="tags">
<h3>Career & Money</h3>
<div class="tag-cloud">
<div class="tag"><a href="#">current employment</a></div>
<div class="tag"><a href="#">learning costs</a></div>
<div class="tag"><a href="#">work environment</a></div>
<div class="tag"><a href="#">job preferences</a></div>
<div class="tag"><a href="#">tech roles</a></div>
<div class="tag"><a href="#">job title</a></div>
<div class="tag"><a href="#">debt</a></div>
<div class="tag"><a href="#">income</a></div>
<div class="tag"><a href="#">home mortgage</a></div>
</div>
</article>
<article class="tags">
<h3>Learning To Code</h3>
<div class="tag-cloud">
<div class="tag"><a href="#">bootcamps</a></div>
<div class="tag"><a href="#">learning resources</a></div>
<div class="tag"><a href="#">events</a></div>
<div class="tag"><a href="#">podcasts</a></div>
</div>
</article>
</div>
<div class="charts large">
<article class="chart">
<div class="container">
<div class="tab-set">
<div class="tab all" id="active-tab">Location</div>
<div class="tab gender">Gender</div>
<div class="tab ethnicity">Ethnicity</div>
<div class="tab age">Age</div>
</div>
<div id="Map">
</div>
<div id="tooltip" class="hidden">
<h3 id="tooltip-title"></h3>
<div class="inner-cont">
<div>
<div class="tooltip-graph" id="gender-graph"></div>
<p class="tooltip-data" id="gender-data"></p>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="charts small">
<article class="chart">
<h3>Gender</h3>
<p>What's your gender?</p>
<div class="chart-graphic" id="Gender">
</div>
<p class="footnote">13,746 respondents</p>
</article>
<article class="chart">
<h3>Disability</h3>
<p>Do you receive disability benefits from your government?</p>
<div class="chart-graphic" id="IsReceiveDiabilitiesBenefits">
</div>
<p class="footnote">13,530 respondents</p>
</article>
<article class="chart">
<h3>Military</h3>
<p>Have you served in your country's military before?</p>
<div class="chart-graphic" id="HasServedInMilitary">
</div>
<p class="footnote">13,550 respondents</p>
</article>
</div>
<div class="charts large">
<article class="chart">
<h3>Age</h3>
<p>How old are you?</p>
<div class="chart-graphic" id="Age">
</div>
<p class="footnote">13,613 respondents</p>
</article>
</div>
<div class="charts">
<h3>Education</h3>
<article class="chart">
<p>What's the highest degree or level of school you have
completed?</p>
<div class="chart-graphic" id="SchoolDegree">
</div>
<p class="footnote">13,679 respondents</p>
<p class="footnote">(If currently enrolled, highest degree received.)</p>
</article>
<article class="chart">
<p>What was the main subject you studied in university?</p>
<div class="chart-graphic" id="SchoolMajor">
</div>
<p class="footnote">8,450 respondents</p>
</article>
</div>
<div class="charts small">
<h3>Family</h3>
<article class="chart">
<p>What's your marital status?</p>
<div class="chart-graphic" id="MaritalStatus">
</div>
<p class="footnote">4,010 respondents</p>
</article>
<article class="chart">
<p>Do you have children?</p>
<div class="chart-graphic" id="HasChildren">
</div>
<p class="footnote">4,012 respondents</p>
</article>
<article class="chart">
<p>How many children do you have?</p>
<div class="chart-graphic" id="ChildrenNumber">
</div>
<p class="footnote">2,554 respondents</p>
</article>
</div>
<div class="charts small">
<h3>Money</h3>
<article class="chart">
<p>About how much money did you make last year (in US Dollars)?</p>
<div class="chart-graphic" id="Income">
</div>
<p class="footnote">7,329 respondents</p>
</article>
<article class="chart">
<p>Do you have any debt?</p>
<div class="chart-graphic" id="HasDebt">
</div>
<p class="footnote">13,610 respondents</p>
</article>
<article class="chart">
<p>Do you financially support any dependents?</p>
<div class="chart-graphic" id="HasFinancialDependents">
</div>
<p class="footnote">13,640 respondents</p>
<p class="description">(Dependents include a
spouse, children, elderly relatives, and relatices with
disabilities.)</p>
</article>
</div>
<div class="charts small">
<article class="chart">
<p>Do you have student loan debt?</p>
<div class="chart-graphic" id="HasStudentDebt">
</div>
<p class="footnote">6,371 respondents</p>
</article>
<article class="chart">
<p>About how much do you owe in student loans (in US Dollars)?</p>
<div class="chart-graphic" id="StudentDebtOwe">
</div>
<p class="footnote">3,514 respondents</p>
</article>
<article class="chart">
<p>Do you financially support any elderly relatives or relavites with
disabilities?</p>
<div class="chart-graphic" id="FinanciallySupporting">
</div>
<p class="footnote">3,996 respondents</p>
</article>
</div>
<div class="charts small">
<article class="chart">
<p>Do you have a home mortgage?</p>
<div class="chart-graphic" id="HasHomeMortgage">
</div>
<p class="footnote">6,371 respondents</p>
</article>
<article class="chart">
<p>About how much do you owe on your home mortgage (in US Dollars)?</p>
<div class="chart-graphic" id="HomeMortgageOwe">
</div>
<p class="footnote">1,501 respondents</p>
</article>
<article class="chart">
<p>Do you have high speed internet at your home?</p>
<div class="chart-graphic" id="HasHighSpdInternet">
</div>
<p class="footnote">13,625 respondents</p>
</article>
</div>
<div class="charts small">
<h3>Employment</h3>
<article class="chart">
<p>Are you already working as a software developer?</p>
<div class="chart-graphic" id="IsSoftwareDev">
</div>
<p class="footnote">15,537 respondents</p>
</article>
<article class="chart">
<p>Are you willing to relocate for a job?</p>
<div class="chart-graphic" id="JobRelocateYesNo">
</div>
<p class="footnote">5,487 respondents</p>
</article>
<article class="chart">
<p>Do you consider yourself under-employed?</p>
<div class="chart-graphic" id="IsUnderEmployed">
</div>
<p class="footnote">8,645 respondents</p>
<p class="description">(Underemployed means
working a job that is below your education level.)</p>
</article>
</div>
<div class="charts medium">
<article class="chart">
<p>Regarding employment status, are you currently ...</p>
<div class="chart-graphic" id="EmploymentStatus">
</div>
<p class="footnote">12,904 respondents</p>
</article>
<article class="chart">
<p>Which field do you work in?</p>
<div class="chart-graphic"id="EmploymentField">
</div>
<p class="footnote">7,608 respondents</p>
</article>
</div>
<div class="charts large">
<article class="chart">
<h3>Location</h3>
<p>Which country do you currently live in?</p>
<p>322 countries</p>
<div class="chart-graphic" id="CountryLive">
</div>
<p class="footnote">13,610 respondents</p>
</article>
</div>
<div class="charts medium">
<article class="chart">
<p>Are you an ethnic minority in your country?</p>
<div class="chart-graphic" id="IsEthnicMinority">
</div>
<p class="footnote">13,645 respondents</p>
</article>
<article class="chart">
<p>About how many people live in your city?</p>
<div class="chart-graphic"id="CityPopulation">
</div>
<p class="footnote">13,630 respondents</p>
</article>
</div>
<div class="charts large">
<article class="chart">
<h3>Language</h3>
<p>Which language do you speak at home with your family?</p>
<div class="chart-graphic" id="LanguageAtHome">
</div>
<p class="footnote">13,582 respondents</p>
</article>
</div>
<div class="charts medium">
<h3>Career & Money</h3>
<article class="chart">
<p>Would you prefer to work...</p>
<div class="chart-graphic" id="JobWherePref">
</div>
<p class="footnote">6,739 respondents</p>
</article>
<article class="chart">
<p>Would you prefer to work for a...</p>
<div class="chart-graphic" id="JobPref">
</div>
<p class="footnote">11,189 respondents</p>
</article>
</div>
<div class="charts large">
<article class="chart">
<p>Which one of these roles are you most interested in?</p>
<div class="chart-graphic" id="JobRoleInterest">
</div>
<p class="footnote">6,503 respondents</p>
</article>
</div>
<div class="charts medium">
<article class="chart">
<p>When do you plan to start applying for developers jobs?</p>
<div class="chart-graphic" id="JobApplyWhen">
</div>
<p class="footnote">6,747 respondents</p>
</article>
<article class="chart">
<p>About how much money do you expect to earn per year at your first
developer job (in US Dollars)?</p>
<div class="chart-graphic" id="ExpectedEarning">
</div>
<p class="footnote">6,077 respondents</p>
</article>
</div>
<div class="charts medium">
<h3>Bootcamp</h3>
<article class="chart">
<p>Have you attended a full-time coding bootcamp?</p>
<div class="chart-graphic" id="BootcampYesNo">
</div>
<p class="footnote">15,380 respondents</p>
</article>
<article class="chart">
<p>Have you finished yet?</p>
<div class="chart-graphic" id="BootcampFinish">
</div>
<p class="footnote">933 respondents</p>
</article>
</div>
<div class="charts large">
<article class="chart">
<p>Which bootcamp did you attend?</p>
<div class="chart-graphic" id="BootcampName">
</div>
<p class="footnote">895 respondents</p>
</article>
</div>
<div class="charts medium">
<article class="chart">
<p>How many months ago did you finish your bootcamp?</p>
<div class="chart-graphic" id="BootcampMonthsAgo">
</div>
<p class="footnote">631 respondents</p>
</article>
<article class="chart">
<p>Based on your experience, would you recommend this bootcamp to your
friends?</p>
<div class="chart-graphic" id="BootcampRecommend">
</div>
<p class="footnote">937 respondents</p>
</article>
</div>
<div class="charts small">
<article class="chart">
<p>Were you able to get a full time developer job afterwards?</p>
<div class="chart-graphic" id="BootcampFullJobAfter">
</div>
<p class="footnote">635 respondents</p>
</article>
<article class="chart">
<p>How much was your salary (in US Dollars)?</p>
<div class="chart-graphic" id="BootcampPostSalary">
</div>
<p class="footnote">330 respondents</p>
</article>
<article class="chart">
<p>Did you take out a loan to pay for the bootcamp?</p>
<div class="chart-graphic" id="BootcampLoan">
</div>
<p class="footnote">934 respondents</p>
</article>
</div>
<div class="charts small">
<h3>Learning to Code</h3>
<article class="chart">
<p>About how many months have you been programming for?</p>
<div class="chart-graphic" id="MonthsProgramming">
</div>
<p class="footnote">15,014 respondents</p>
</article>
<article class="chart">
<p>About how many hours do you spend learning each week?</p>
<div class="chart-graphic" id="HoursLearning">
</div>
<p class="footnote">14,942 respondents</p>
</article>
<article class="chart">
<p>Aside from the university tuition, about how much money have you
spent on learning to code so far (in US Dollars)?</p>
<div class="chart-graphic" id="MoneyForLearning">
</div>
<p class="footnote">14,679 respondents</p>
</article>
</div>
<div class="charts large">
<article class="chart">
<p>Which learning resources have you found helpful?</p>
<div class="chart-graphic" id="Resources">
</div>
<p class="footnote">15,269 respondents</p>
</article>
</div>
<div class="charts large">
<article class="chart">
<p>Which types of in-person coding events have you attended?</p>
<div class="chart-graphic" id="CodeEvent">
</div>
<p class="footnote">15,055 respondents</p>
</article>
</div>
</section>
<footer>
<div class="faqs" id="faqs">
<h2>FAQs</h2>
<p class="question">How many people filled out the survey?</p>
<p class="answer">We had over 15K responses from all over the world!</p>
<p class="question">Where can we find the data?</p>
<p class="answer">You can get the raw data at <a
href="https://github.com/FreeCodeCamp/2016-new-coder-survey"
target="_blank">this github link</a>. Download it, look at
the results, and build your own app using it!</p>
<p class="question">I want to contribute to this site. How can I do that?</p>
<p class="answer">
Great! Go to <a
href="https://github.com/FreeCodeCamp/2016-new-coder-survey" target="_blank">this github link</a>, and follow the README on how to
contribute. Have any questions? Email us at hello@newcodersurvey.com.
</p>
<p class="question">What was the methodology of the survey?</p>
<p class="answer">
This questionnaire was publicized by a wide variety of technology
education organizations through social media and mailing lists. Data
was collected throughout April 2016. All questions were formatted as
multiple response questions or free numeric input. Its questions
employed branching logic, and all were questions optional, allowing
participants to skip questions.
</p>
<p class="answer">The questionnaire took approximately
5-10 minutes to complete and comprised 2 sections
assessing:
A) Demographic information (age, gender, ethnicity, education and country)
B) Information about participant's approaches toward learning to program,
and their expectations of future work.
</p>
</div>
<div>
<h2 id="about">About</h2>
<h3><a href="http://www.codenewbie.org/" target="_blank">CodeNewbie</a></h3>
<p>
CodeNewbie is the most supportive group of programmers and people
learning to code. Listen to the weekly CodeNewbie Podcast and join us
for our weekly #CodeNewbie Twitter chat.
</p>
<h3><a href="https://www.freecodecamp.com/" target="_blank">Free Code Camp</a></h3>
<p>
Free Code Camp is an open source community that helps you learn to
code, then practice by building projects for nonprofits. Each month,
more than 200,000 people use its free, self-paced curriculum to learn
programming.
</p>
<h2>Press</h2>
<p>
Feel free to email press@newcodersurvey.com to get in touch with the
creators of the survey.
</p>
</div>
</footer>
<div class="raw-data">
<a href="#" class="close">x</a>
<p>Data for the New Coder Survey is available <a
href="https://github.com/FreeCodeCamp/2016-new-coder-survey/tree/master/data"
target="_blank">in .csv format here</a>.</p>
</div>
</body>
</html>