From d56cee1f7217eb871f81311d15a97087cdc9391c Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Thu, 11 Jun 2015 15:01:21 -0700 Subject: [PATCH 1/6] update challenge map and news nav --- views/challengeMap/show.jade | 37 ++++++++++++++++++------------------ views/stories/news-nav.jade | 9 +++++---- 2 files changed, 23 insertions(+), 23 deletions(-) diff --git a/views/challengeMap/show.jade b/views/challengeMap/show.jade index f8adbff6c1..bc65012fb2 100644 --- a/views/challengeMap/show.jade +++ b/views/challengeMap/show.jade @@ -83,22 +83,21 @@ block content li.large-p.negative-10 a(href="/challenges/#{challenge.name}")= challenge.name - //#announcementModal.modal(tabindex='-1') - // .modal-dialog.animated.fadeInUp.fast-animation - // .modal-content - // .modal-header.challenge-list-header Join our Saturday Summit! - // a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') × - // .modal-body - // h3.text-left Saturday at Noon EDT: We'll live-stream our Saturday Summit on Twitch.tv. - // h3.text-left We'll announce our new Front End Development Certificate Program (it's free, of course) and our new "Free Code Camp On The Go" app.   - // a(href='http://www.freecodecamp.com/twitch', target='_blank') Add us to your calendar here - // | . - // a.btn.btn-lg.btn-info.btn-block(name='_csrf', value=_csrf, aria-hidden='true', href='http://twitch.tv/freecodecamp', target='_blank') Follow us on Twitch.tv - // a.btn.btn-lg.btn-primary.btn-block(href='#', data-dismiss='modal', aria-hidden='true') Thanks for the heads-up! - //script. - // $(document).ready(function () { - // if (!localStorage || !localStorage.day234) { - // $('#announcementModal').modal('show'); - // localStorage.day234 = "true"; - // } - // }); + #announcementModal.modal(tabindex='-1') + .modal-dialog.animated.fadeInUp.fast-animation + .modal-content + .modal-header.challenge-list-header Add us on LinkedIn + a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') × + .modal-body + img.img-responsive-img-center(src='https://www.evernote.com/l/AHTzkHwtg-BHj57bqqDL7WFF8WgrI5V8cxwB/image.png') + h3.text-left LinkedIn now recognizes Free Code Camp as a university. + h3.text-left Add Free Code Camp to your LinkedIn profile - it takes less than a minute. + a.btn.btn-lg.btn-info.btn-block(name='_csrf', value=_csrf, aria-hidden='true', href='/freecodecamp/linkedin', target='_blank') + a.btn.btn-lg.btn-primary.btn-block(href='#', data-dismiss='modal', aria-hidden='true') Thanks for the heads-up! + script. + $(document).ready(function () { + if (!localStorage || !localStorage.linkedIn) { + $('#announcementModal').modal('show'); + localStorage.linkedIn = "true"; + } + }); diff --git a/views/stories/news-nav.jade b/views/stories/news-nav.jade index 6408520a20..c032a640e4 100644 --- a/views/stories/news-nav.jade +++ b/views/stories/news-nav.jade @@ -15,10 +15,11 @@ .spacer .row .col-xs-12.col-sm-8.col-sm-offset-2.well - h4.text-center Which Coders are Worth Following on Twitter? - img.img-responsive(src='https://www.evernote.com/l/AHQLuyBNcVpKj5TRhNzWssVuCvbRIEylm3oB/image.png') - p Share a link to the Twitter profile of your choice, and tell us in 140 characters or less why this person is a "Coder Worth Following". - p Use the headline: "Coder Worth Following: (their Twitter handle)". We'll publish a list of the 25 most-upvoted submissions (and the campers who submitted them) in Wednesday's blog post. Also - as always - you'll get 1 point every time someone upvotes your post. + h4.text-center Which other free resources do you use? + img.img-responsive(src='https://www.evernote.com/l/AHRNhlwViM1Kh5qCm6iy7MSWrbdyxYbRkWkB/image.png') + p Link us to your favorite free coding resources. + p These books, video series and podcasts should be be legally available for free. + p Use the headline: "Awesome Free Resource: (the book/podcast/video series name)". We'll publish a list of the 25 most-upvoted resources (and the campers who submitted them) in Wednesday's blog post. Also - as always - you'll get 1 point every time someone upvotes your post. .spacer #search-results From 1e8d58068c6d1608c635617454cf7d0772af95f4 Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Thu, 11 Jun 2015 15:34:06 -0700 Subject: [PATCH 2/6] add LinkedIn easy route --- app.js | 4 ++++ seed_data/field-guides.json | 17 +++++++++++++++++ views/challengeMap/show.jade | 2 +- views/partials/footer.jade | 3 +++ views/stories/news-nav.jade | 3 +-- 5 files changed, 26 insertions(+), 3 deletions(-) diff --git a/app.js b/app.js index 6ec67f2611..a265e530de 100755 --- a/app.js +++ b/app.js @@ -227,6 +227,10 @@ app.get('/nonprofit-project-instructions', function(req, res) { res.redirect(301, '/field-guide/how-do-free-code-camps-nonprofit-projects-work'); }); +app.get('/linkedin', function(req, res) { + res.redirect(301, '/field-guide/can-i-add-free-code-camp-to-my-linkedin-profile'); +}); + app.post('/get-help', resourcesController.getHelp); app.post('/get-pair', resourcesController.getPair); diff --git a/seed_data/field-guides.json b/seed_data/field-guides.json index 56ad3be106..61513d28c7 100644 --- a/seed_data/field-guides.json +++ b/seed_data/field-guides.json @@ -231,6 +231,23 @@ "" ] }, + { + "_id": "bd7158d9c436eddfaeb5bd2e", + "name": "Can I add Free Code Camp to my LinkedIn profile?", + "dashedName": "can-i-add-free-code-camp-to-my-linkedin-profile", + "description": [ + "
", + "

LinkedIn recognizes Free Code Camp as a university.

", + "

You can explore our alumni activity here.

", + "

You should add Free Code Camp to your LinkedIn profile. Here's how:

", + "
    ", + "
  1. Follow this link: https://www.linkedin.com/profile/edit-education?school=Free+Code+Camp
    2. ", + "
  2. Follow these instructions:
    3. ", + "
", + "

Once you complete our curriculum (or complete at least one Nonprofit Project and then get a coding job), we will issue you an official Full Stack Web Development certificate that you can also add to your LinkedIn profile.

", + "
" + ] + }, { "_id": "bd7158d9c436eddfaeb5bd3f", "name": "Can I jump around in this guide?", diff --git a/views/challengeMap/show.jade b/views/challengeMap/show.jade index bc65012fb2..e7b8e8c969 100644 --- a/views/challengeMap/show.jade +++ b/views/challengeMap/show.jade @@ -92,7 +92,7 @@ block content img.img-responsive-img-center(src='https://www.evernote.com/l/AHTzkHwtg-BHj57bqqDL7WFF8WgrI5V8cxwB/image.png') h3.text-left LinkedIn now recognizes Free Code Camp as a university. h3.text-left Add Free Code Camp to your LinkedIn profile - it takes less than a minute. - a.btn.btn-lg.btn-info.btn-block(name='_csrf', value=_csrf, aria-hidden='true', href='/freecodecamp/linkedin', target='_blank') + a.btn.btn-lg.btn-info.btn-block(name='_csrf', value=_csrf, aria-hidden='true', href='/freecodecamp/linkedin', target='_blank') a.btn.btn-lg.btn-primary.btn-block(href='#', data-dismiss='modal', aria-hidden='true') Thanks for the heads-up! script. $(document).ready(function () { diff --git a/views/partials/footer.jade b/views/partials/footer.jade index 6230b178ad..fe25c7723a 100644 --- a/views/partials/footer.jade +++ b/views/partials/footer.jade @@ -3,6 +3,7 @@ a.ion-speakerphone(href='http://blog.freecodecamp.com', target='_blank')  Blog   a.ion-social-github(href="http://github.com/freecodecamp", target='_blank')  GitHub   a.ion-social-twitch-outline(href="/twitch")  Twitch  + a.ion-social-linkedin(href="/linkedin")  LinkedIn  a.ion-social-facebook(href="/field-guide/how-can-i-find-other-free-code-camp-campers-in-my-city")  Facebook   a.ion-social-twitter(href="http://twitter.com/freecodecamp", target='_blank')  Twitter   a.ion-locked(href="/privacy")  Privacy   @@ -13,6 +14,8 @@ span.sr-only Free Code Camp on GitHub a.ion-social-twitch-outline(href="/twitch") span.sr-only Free Code Camp Live Pair Programming on Twitch.tv + a.ion-social-linkedin(href="/linkedin") + span.sr-only Free Code Camp LinkedIn Alumni Network a.ion-social-facebook(href="/field-guide/how-can-i-find-other-free-code-camp-campers-in-my-city") span.sr-only Free Code Camp local groups on Facebook a.ion-social-twitter(href="http://twitter.com/freecodecamp", target='_blank') diff --git a/views/stories/news-nav.jade b/views/stories/news-nav.jade index c032a640e4..48f64ae561 100644 --- a/views/stories/news-nav.jade +++ b/views/stories/news-nav.jade @@ -18,8 +18,7 @@ h4.text-center Which other free resources do you use? img.img-responsive(src='https://www.evernote.com/l/AHRNhlwViM1Kh5qCm6iy7MSWrbdyxYbRkWkB/image.png') p Link us to your favorite free coding resources. - p These books, video series and podcasts should be be legally available for free. - p Use the headline: "Awesome Free Resource: (the book/podcast/video series name)". We'll publish a list of the 25 most-upvoted resources (and the campers who submitted them) in Wednesday's blog post. Also - as always - you'll get 1 point every time someone upvotes your post. + p Use the headline: "Awesome Free Resource: (the name of the book, podcast, or video series)". We'll publish a list of the 25 most-upvoted resources (and the campers who submitted them) in Wednesday's blog post, and in an upcoming Field Guide article. Also - as always - you'll get 1 point every time someone upvotes your post. .spacer #search-results From 66d4ffba320dc48d892acdd3ebad8721bb292c36 Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Thu, 11 Jun 2015 15:46:41 -0700 Subject: [PATCH 3/6] update modal --- views/challengeMap/show.jade | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/views/challengeMap/show.jade b/views/challengeMap/show.jade index e7b8e8c969..594793fbc2 100644 --- a/views/challengeMap/show.jade +++ b/views/challengeMap/show.jade @@ -86,14 +86,14 @@ block content #announcementModal.modal(tabindex='-1') .modal-dialog.animated.fadeInUp.fast-animation .modal-content - .modal-header.challenge-list-header Add us on LinkedIn + .modal-header.challenge-list-header Add us to your LinkedIn profile a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') × .modal-body - img.img-responsive-img-center(src='https://www.evernote.com/l/AHTzkHwtg-BHj57bqqDL7WFF8WgrI5V8cxwB/image.png') h3.text-left LinkedIn now recognizes Free Code Camp as a university. - h3.text-left Add Free Code Camp to your LinkedIn profile - it takes less than a minute. - a.btn.btn-lg.btn-info.btn-block(name='_csrf', value=_csrf, aria-hidden='true', href='/freecodecamp/linkedin', target='_blank') - a.btn.btn-lg.btn-primary.btn-block(href='#', data-dismiss='modal', aria-hidden='true') Thanks for the heads-up! + img.img-responsive.img-center(src='https://www.evernote.com/l/AHTzkHwtg-BHj57bqqDL7WFF8WgrI5V8cxwB/image.png') + h3.text-left It takes less than a minute to add Free Code Camp to your LinkedIn profile. + a.btn.btn-lg.btn-info.btn-block(name='_csrf', value=_csrf, aria-hidden='true', href='/linkedin', target='_blank') Show me how to do this + a.btn.btn-lg.btn-primary.btn-block(href='#', data-dismiss='modal', aria-hidden='true') Thanks for the heads-up script. $(document).ready(function () { if (!localStorage || !localStorage.linkedIn) { From 7077b1848041cd7974f0fd9003cb3c31bbd6f427 Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Thu, 11 Jun 2015 18:57:22 -0700 Subject: [PATCH 4/6] fix twitch view --- views/resources/twitch.jade | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/views/resources/twitch.jade b/views/resources/twitch.jade index 678d983411..1b89b17432 100644 --- a/views/resources/twitch.jade +++ b/views/resources/twitch.jade @@ -34,32 +34,32 @@ block content .col-xs-12.col-sm-12.col-md-6 .embed-responsive.embed-responsive-16by9.big-break iframe.embed-responsive-item(src='//www.youtube.com/embed/Z_43xApGB9Y') - p.wrappable.negative-45 link:   + p.wrappable.negative-30 link:   a(href="http://www.youtube.com/watch/Fn9HMn79KH0") http://www.youtube.com/watch/Z_43xApGB9Y .col-xs-12.col-sm-12.col-md-6 .embed-responsive.embed-responsive-16by9.big-break iframe.embed-responsive-item(src='//www.youtube.com/embed/PvWHzcebjjQ') - p.wrappable.negative-45 link:   + p.wrappable.negative-30 link:   a(href="http://www.youtube.com/watch/Fn9HMn79KH0") http://www.youtube.com/watch/PvWHzcebjjQ .col-xs-12.col-sm-12.col-md-6 .embed-responsive.embed-responsive-16by9.big-break iframe.embed-responsive-item(src='//www.youtube.com/embed/yHL6mEr-LGY') - p.wrappable.negative-45 link:   + p.wrappable.negative-30 link:   a(href="http://www.youtube.com/watch/Fn9HMn79KH0") http://www.youtube.com/watch/yHL6mEr-LGY .col-xs-12.col-sm-12.col-md-6 .embed-responsive.embed-responsive-16by9.big-break iframe.embed-responsive-item(src='//www.youtube.com/embed/dolG-yRMcPs') - p.wrappable.negative-45 link:   + p.wrappable.negative-30 link:   a(href="http://www.youtube.com/watch/Fn9HMn79KH0") http://www.youtube.com/watch/dolG-yRMcPs .col-xs-12.col-sm-12.col-md-6 .embed-responsive.embed-responsive-16by9.big-break iframe.embed-responsive-item(src='//www.youtube.com/embed/YMz_vrK_KlQ') - p.wrappable.negative-45 link:   + p.wrappable.negative-30 link:   a(href="http://www.youtube.com/watch/_BErpDdmBOw") http://www.youtube.com/watch/YMz_vrK_KlQ .col-xs-12.col-sm-12.col-md-6 .embed-responsive.embed-responsive-16by9.big-break iframe.embed-responsive-item(src='//www.youtube.com/embed/bbFVxaza8Ik') - p.wrappable.negative-45 link:   + p.wrappable.negative-30 link:   a(href="http://www.youtube.com/watch/S7iRBZJwOAs") http://www.youtube.com/watch/bbFVxaza8Ik br br From 03df5cf492f4267c4801f4e28e1c913068fed14e Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Thu, 11 Jun 2015 19:01:31 -0700 Subject: [PATCH 5/6] remove reference to original alumni network --- seed_data/field-guides.json | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/seed_data/field-guides.json b/seed_data/field-guides.json index 61513d28c7..136433aab4 100644 --- a/seed_data/field-guides.json +++ b/seed_data/field-guides.json @@ -518,16 +518,6 @@ "" ] }, - { - "_id": "bd7158d9c436eddfaeb5bd3e", - "name": "Does Free Code Camp have an alumni network?", - "dashedName": "does-free-code-camp-have-an-alumni-network", - "description": [ - "
", - "

We have a growing alumni network on LinkedIn. Once you've finished Free Code Camp and have gotten a coding job, we'd love to include you in this group, too!

", - "
" - ] - }, { "_id": "bd7158d9c442eddfaeb5bdef", "name": "How do I best use the Global Control Shortcuts for Mac?", From 3979dc42b9d611f6a2c96d03de022198262626e3 Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Fri, 12 Jun 2015 11:59:07 -0700 Subject: [PATCH 6/6] start importing calculator --- app.js | 2 + controllers/resources.js | 6 + views/resources/calculator.jade | 656 ++++++++++++++++++++++++++++++++ 3 files changed, 664 insertions(+) create mode 100644 views/resources/calculator.jade diff --git a/app.js b/app.js index a265e530de..1819529515 100755 --- a/app.js +++ b/app.js @@ -239,6 +239,8 @@ app.get('/chat', resourcesController.chat); app.get('/twitch', resourcesController.twitch); +app.get('/calculator', resourcesController.calculator); + app.get('/cats.json', function(req, res) { res.send( [ diff --git a/controllers/resources.js b/controllers/resources.js index 0bf414954b..2b156dbbce 100644 --- a/controllers/resources.js +++ b/controllers/resources.js @@ -283,6 +283,12 @@ module.exports = { }); }, + calculator: function calculator(req, res) { + res.render('resources/calculator', { + title: "Coding Bootcamp Cost Calculator" + }); + }, + unsubscribe: function unsubscribe(req, res, next) { User.findOne({ email: req.params.email }, function(err, user) { if (user) { diff --git a/views/resources/calculator.jade b/views/resources/calculator.jade new file mode 100644 index 0000000000..7db81dab2a --- /dev/null +++ b/views/resources/calculator.jade @@ -0,0 +1,656 @@ +extends ../layout +block content + .panel.panel-info + .panel-heading.text-center Coding Bootcamp Cost Calculator + .panel-body + .row + .col-xs-12.col-sm-10.col-sm-offset-1 + style. + #lastYearIncome{ + clear:both; + margin: 2% 0; + width: 110px; + } + #income, #calculate { + visibility:hidden; + } + .step { + font-size: 2em; + padding: 1%; + clear: both; + } + .city-buttons { + display: block; + clear: right; + } + #four p{ + font-size: .6em; + color: black; + } + .chart rect { + fill: steelblue; + } + .chart text { + fill: #121401; + font: 10px sans-serif; + text-anchor: end; + } + .axis path, + .axis line { + fill: none; + stroke: #121401; + stroke-width: 2px; + shape-rendering: crispEdges; + } + html. + +
+
+ +
Step 1: Choose your City
+
+
    +
  • New York City
    • +
  • San Fransisco
    • +
  • Austin
    • +
  • Los Angeles
    • +
  • Chicago
    • +
  • Other
    • +
+
+   + +
Step 2: Enter last Year's Income
+
+ + +
+ +
Step 3: Calculate
+ + + + + +
+ +
+ Sources: Link to Data Sources Here +
+ + +
+ script. + $(document).ready(function () { + var n = 4, // number of layers + m = 58, // number of samples per layer + stack = d3.layout.stack(), + layers = stack(d3.range(n).map(function () { + return bumpLayer(m, .1); + })), + yGroupMax = d3.max(layers, function (layer) { + return d3.max(layer, function (d) { + return d.y; + }); + }), + yStackMax = d3.max(layers, function (layer) { + return d3.max(layer, function (d) { + return d.y0 + d.y; + }); + }); + var margin = { + top: 40, + right: 10, + bottom: 20, + left: 10 + }, + width = 960 - margin.left - margin.right, + height = 500 - margin.top - margin.bottom; + var x = d3.scale.ordinal() + .domain(d3.range(m)) + .rangeRoundBands([0, width], .08); + var y = d3.scale.linear() + .domain([0, yStackMax]) + .range([height, 0]); + var color = d3.scale.linear() + .domain([0, n - 1]) + .range(["#aad", "#556"]); + var xAxis = d3.svg.axis() + .scale(x) + .tickSize(0) + .tickPadding(6) + .orient("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 + ")"); + var layer = svg.selectAll(".layer") + .data(layers) + .enter().append("g") + .attr("class", "layer") + .style("fill", function (d, i) { + return color(i); + }); + var rect = layer.selectAll("rect") + .data(function (d) { + return d; + }) + .enter().append("rect") + .attr("x", function (d) { + return x(d.x); + }) + .attr("y", height) + .attr("width", x.rangeBand()) + .attr("height", 0); + rect.transition() + .delay(function (d, i) { + return i * 10; + }) + .attr("y", function (d) { + return y(d.y0 + d.y); + }) + .attr("height", function (d) { + return y(d.y0) - y(d.y0 + d.y); + }); + svg.append("g") + .attr("class", "x axis") + .attr("transform", "translate(0," + height + ")") + .call(xAxis); + d3.selectAll("input").on("change", change); + var timeout = setTimeout(function () { + d3.select("input[value=\"grouped\"]").property("checked", true).each(change); + }, 2000); + + function change() { + clearTimeout(timeout); + if (this.value === "grouped") transitionGrouped(); + else transitionStacked(); + } + + function transitionGrouped() { + y.domain([0, yGroupMax]); + rect.transition() + .duration(500) + .delay(function (d, i) { + return i * 10; + }) + .attr("x", function (d, i, j) { + return x(d.x) + x.rangeBand() / n * j; + }) + .attr("width", x.rangeBand() / n) + .transition() + .attr("y", function (d) { + return y(d.y); + }) + .attr("height", function (d) { + return height - y(d.y); + }); + } + + function transitionStacked() { + y.domain([0, yStackMax]); + rect.transition() + .duration(500) + .delay(function (d, i) { + return i * 10; + }) + .attr("y", function (d) { + return y(d.y0 + d.y); + }) + .attr("height", function (d) { + return y(d.y0) - y(d.y0 + d.y); + }) + .transition() + .attr("x", function (d) { + return x(d.x); + }) + .attr("width", x.rangeBand()); + } + + // Inspired by Lee Byron's test data generator. + function bumpLayer(n, o) { + function bump(a) { + var x = 1 / (.1 + Math.random()), + y = 2 * Math.random() - .5, + z = 10 / (.1 + Math.random()); + for (var i = 0; i < n; i++) { + var w = (i / n - y) * z; + a[i] += x * Math.exp(-w * w); + } + } + + var a = [], i; + for (i = 0; i < n; ++i) a[i] = o + o * Math.random(); + for (i = 0; i < 5; ++i) bump(a); + return a.map(function (d, i) { + return {x: i, y: Math.max(0, d)}; + }); + } + var city = ""; + var lastYearincome = 52000; + //major cities array to check against users location for housing costs + var cityArray = ["San Fransisco", "Los Angeles", "Chicago", "Austin", "New York City"]; + //this is the raw bootcamps file allowing easy addition of new code camps + var bootcamps = [{ + "name": "App Academy", + "cost": "18000", + "weeks": "12", + "finance": false, + "cities": [ + "New York", + "San Francisco" + ] + }, { + "name": "Viking Code School", + "cost": "18000", + "weeks": "14", + "finance": false, + "cities": [ + "online" + ] + }, { + "name": "Hack Reactor", + "cost": "17780", + "weeks": "12", + "finance": true, + "cities": [ + "New York", + "San Francisco" + ] + }, { + "name": "Hackbright Academy", + "cost": "15000", + "weeks": "10", + "finance": true, + "cities": [ + "San Francisco" + ] + }, { + "name": "Dev Bootcamp", + "cost": "13950", + "finance": true, + "weeks": "19", + "cities": [ + "New York", + "San Francisco", + "Chicago" + ] + }, { + "name": "General Asssembly", + "cost": "11500", + "finance": true, + "weeks": "12", + "cities": [ + "Washington, DC", + "Austin", + "Boston", + "Chicago", + "Hong Kong", + "London", + "Los Angeles", + "Melbourne", + "New York cities", + "San Francisco", + "Seattle", + "Singapore" + ] + }, { + "name": "Angel Hack", + "cost": "14250", + "finance": true, + "weeks": "12", + "cities": [ + "San Francisco" + ] + }, { + "name": "Bitmaker Labs", + "cost": "12000", + "finance": true, + "weeks": "12", + "cities": [ + "Toronto" + ] + }, { + "name": "CoderVox", + "cost": "9980", + "finance": true, + "weeks": "12", + "cities": [ + "Austin" + ] + }, { + "name": "Coding Dojo", + "cost": "12500", + "finance": true, + "weeks": "12", + "cities": [ + "New York", + "San Francisco", + "Chicago" + ] + }, { + "name": "Epicodus", + "cost": "4500", + "finance": false, + "weeks": "15", + "cities": [ + "Portland" + ] + }, { + "name": "Flat Iron School", + "cost": "15000", + "finance": true, + "weeks": "12", + "cities": [ + "New York" + ] + }, { + "name": "Galvanize", + "cost": "21000", + "finance": true, + "weeks": "24", + "cities": [ + "Boulder", + "Denver", + "Seattle", + "San Francisco", + "Fort Collins" + ] + }, { + "name": "The Iron Yard", + "cost": "12000", + "finance": true, + "weeks": "19", + "cities": [ + "Atlanta", + "Austin", + "Colombia, SC", + "Charleston, SC", + "Houston", + "Greenville, SC", + "Las Vegas", + "Little Rock", + "Nashville", + "Orlando", + "Raleigh - Durham", + "Tampa - St. Petersburg", + "Washington DC" + ] + }, { + "name": "Launch Academy", + "cost": "12500", + "finance": true, + "weeks": "10", + "cities": [ + "Boston" + ] + }, { + "name": "Maker Square", + "cost": "16920", + "finance": true, + "weeks": "12", + "cities": [ + "Los Angeles", + "San Francisco", + "Austin" + ] + }, { + "name": "Refactor U", + "cost": "13500", + "finance": true, + "weeks": "10", + "cities": [ + "Boulder" + ] + }, { + "name": "Rocket U", + "cost": "12500", + "finance": true, + "weeks": "12", + "cities": [ + "New York", + "San Francisco", + "Chicago" + ] + }, { + "name": "Sabio", + "cost": "13450", + "finance": true, + "weeks": "12", + "cities": [ + "Los Angeles" + ] + }, { + "name": "Shillington School", + "cost": "12950", + "finance": true, + "weeks": "12", + "cities": [ + "New York", + "Sydney", + "Brisbane", + "London", + "Manchester", + "Melbourne" + ] + }, { + "name": "The Tech Academy", + "cost": "9000", + "finance": true, + "weeks": "20", + "cities": [ + "Portland" + ] + }, { + "name": "Turing School", + "cost": "17500", + "finance": true, + "weeks": "27", + "cities": [ + "Denver" + ] + }, { + "name": "Free Code Camp", + "cost": "0", + "finance": true, + "weeks": "0", + "cities": [ + "Online" + ] + }]; + //reduce opacity for steps 2 through 4 + //the actual elements start out hidden via CSS + $('#two').css({opacity: '0.25'}); + $('#three').css({opacity: '0.25'}); + $('#four').css({opacity: '0.25'}); + //step one event listener + $('#city-buttons').on("click", "span", function () { + $(this).addClass('animated tada'); + city = $(this).attr("id"); + //make next step visible + $('#two').css({opacity: '1'}); + $('#income').css({visibility: 'visible'}); + //console.log(city); + }); + //step two event listener + $('#income').on("change", function () { + console.log("Income Updated"); + lastYearincome = parseInt($('#lastYearIncome').val()); + //make next step visible + $('#three').css({opacity: '1'}); + $('#calculate').css({visibility: 'visible'}); + }); + + $('#calculate').on("click", function () { + //Make data logger visible + $('#four').css({opacity: '1'}); + + var categoryNames = ['Tuition', 'Finance', 'Housing', 'Working Cost']; + bootcamps.forEach(function (camp) { + var x0 = 0; + //this just checks against main city array. + //when we refactor, this should check against this camp's cities array + //should not be a difficult change + if (cityArray.indexOf(city) >= 0) { + weeklyHousing = 0; + } else { + weeklyHousing = 500; + } + camp.mapping = [{ + name: camp.name, + label: 'Tuition', + x0: x0, + x1: x0 += +camp.cost + }, { + name: camp.name, + label: 'Finance', + x0: +camp.cost, + x1: x0 += +Math.floor(camp.cost * .09519) + }, { + name: camp.name, + label: 'Housing', + x0: +Math.floor(camp.cost * 1.09519), + x1: x0 += weeklyHousing * camp.weeks + }, { + name: camp.name, + label: 'Working Cost', + x0: +(Math.floor(camp.cost * 1.09519) + weeklyHousing * camp.weeks), + x1: x0 += +(Math.floor(camp.weeks * lastYearincome / 50)) + }]; + camp.total = camp.mapping[camp.mapping.length - 1].x1; + }); + console.log(bootcamps[0]); + var margin = { + top: 30, + right: 60, + bottom: 50, + left: 140 + }, + width = 800 - margin.left - margin.right, + height = 600 - margin.top - margin.bottom; + var barHeight = 20; + var xScale = d3.scale.linear() + .domain([0, d3.max(bootcamps, function (d) { + return d.total; + })]) + .rangeRound([0, width]); + var yScale = d3.scale.ordinal() + .domain(bootcamps.map(function (d) { + return d.name; + })) + .rangeRoundBands([0, height], .1); + console.log("yrangeroundband", yScale.rangeBand()); + var color = d3.scale.ordinal() + .range(["#f0ad4e", "#4A2B0F", "#215f1e", "#457E86"]) + .domain(['Tuition', 'Finance', 'Housing', 'Working Cost']); + var svg = d3.select("svg") + .attr("width", width + margin.left + margin.right) + .attr("height", height + margin.top + margin.bottom) + .append("g") + .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); + var selection = svg.selectAll(".series") + .data(bootcamps) + .enter().append("g") + .attr("class", "series") + .attr("transform", function (d) { + return "translate(0," + yScale(d.name) + ")"; + }); + ; + selection.selectAll("rect") + .data(function (d) { + return d.mapping; + }) + .enter().append("rect") + .attr("width", function (d) { + return xScale((d.x1) - (d.x0)); + }) + .attr("x", function (d) { + return xScale(d.x0); + }) + .attr("height", yScale.rangeBand()) + .style("fill", function (d) { + return color(d.label); + }) + .style("stroke", "white") + .on("mouseover", function (d) { + showPopover.call(this, d); + }) + .on("mouseout", function (d) { + removePopovers(); + }); + //axes + //axes + var xAxis = d3.svg.axis() + .scale(xScale) + .orient("bottom"); + var yAxis = d3.svg.axis() + .scale(yScale) + .orient("left"); + svg.append("g") + .attr("class", "y axis") + .call(yAxis); + svg.append("g") + .attr("class", "x axis") + .attr("transform", "translate(0," + height + ")") + .call(xAxis) + .append("text") + .attr("x", 300) + .attr("y", 35) + .attr("dy", ".35em") + .style("text-anchor", "middle") + .text("Cost in $USD"); + //tooltips + function removePopovers() { + $('.popover').each(function () { + $(this).remove(); + }); + } + + function showPopover(d) { + $(this).popover({ + title: d.name, + placement: 'auto top', + container: 'body', + trigger: 'manual', + html: true, + content: function () { + return d.label + + "
$" + + d3.format(",")(d.value ? d.value : d.x1 - d.x0); + } + }); + $(this).popover('show') + } + + //legends + var legend = svg.selectAll(".legend") + .data(categoryNames.slice().reverse()) + .enter().append("g") + .attr("class", "legend") + .attr("transform", function (d, i) { + return "translate(30," + i * yScale.rangeBand() * 1.1 + ")"; + }); + legend.append("rect") + .attr("x", width - yScale.rangeBand()) + .attr("width", yScale.rangeBand()) + .attr("height", yScale.rangeBand()) + .style("fill", color) + .style("stroke", "white"); + legend.append("text") + .attr("x", width - yScale.rangeBand() * 1.2) + .attr("y", 12) + .attr("dy", ".35em") + .style("text-anchor", "end") + .text(function (d) { + return d; + }); + }); + });