diff --git a/server/views/resources/calculator.jade b/server/views/resources/calculator.jade index 7db81dab2a7..ed6e4d89de3 100644 --- a/server/views/resources/calculator.jade +++ b/server/views/resources/calculator.jade @@ -32,7 +32,7 @@ block content } .chart text { fill: #121401; - font: 10px sans-serif; + font: 13px sans-serif; text-anchor: end; } .axis path, @@ -46,29 +46,27 @@ block content
- -
Step 1: Choose your City
-
- -
-   - -
Step 2: Enter last Year's Income
-
- - + +
Where do you live?
+
+ + + + + + +
+   + +
How much money did you make last year (in USD)?
+
+ + + + + +
- -
Step 3: Calculate
- - @@ -89,153 +87,7 @@ block content 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 @@ -244,6 +96,7 @@ block content "cost": "18000", "weeks": "12", "finance": false, + "housing": "500", "cities": [ "New York", "San Francisco" @@ -252,6 +105,7 @@ block content "name": "Viking Code School", "cost": "18000", "weeks": "14", + "housing": "0", "finance": false, "cities": [ "online" @@ -259,6 +113,17 @@ block content }, { "name": "Hack Reactor", "cost": "17780", + "housing": "500", + "weeks": "12", + "finance": true, + "cities": [ + "New York", + "San Francisco" + ] + }, { + "name": "Hack Reactor Online", + "cost": "17780", + "housing": "0", "weeks": "12", "finance": true, "cities": [ @@ -268,6 +133,7 @@ block content }, { "name": "Hackbright Academy", "cost": "15000", + "housing": "500", "weeks": "10", "finance": true, "cities": [ @@ -277,6 +143,7 @@ block content "name": "Dev Bootcamp", "cost": "13950", "finance": true, + "housing": "500", "weeks": "19", "cities": [ "New York", @@ -286,6 +153,7 @@ block content }, { "name": "General Asssembly", "cost": "11500", + "housing": "500", "finance": true, "weeks": "12", "cities": [ @@ -305,6 +173,7 @@ block content }, { "name": "Angel Hack", "cost": "14250", + "housing": "500", "finance": true, "weeks": "12", "cities": [ @@ -313,6 +182,7 @@ block content }, { "name": "Bitmaker Labs", "cost": "12000", + "housing": "500", "finance": true, "weeks": "12", "cities": [ @@ -321,6 +191,7 @@ block content }, { "name": "CoderVox", "cost": "9980", + "housing": "400", "finance": true, "weeks": "12", "cities": [ @@ -329,6 +200,7 @@ block content }, { "name": "Coding Dojo", "cost": "12500", + "housing": "500", "finance": true, "weeks": "12", "cities": [ @@ -339,6 +211,7 @@ block content }, { "name": "Epicodus", "cost": "4500", + "housing": "400", "finance": false, "weeks": "15", "cities": [ @@ -347,6 +220,7 @@ block content }, { "name": "Flat Iron School", "cost": "15000", + "housing": "500", "finance": true, "weeks": "12", "cities": [ @@ -355,6 +229,7 @@ block content }, { "name": "Galvanize", "cost": "21000", + "housing": "500", "finance": true, "weeks": "24", "cities": [ @@ -367,6 +242,7 @@ block content }, { "name": "The Iron Yard", "cost": "12000", + "housing": "500", "finance": true, "weeks": "19", "cities": [ @@ -387,6 +263,7 @@ block content }, { "name": "Launch Academy", "cost": "12500", + "housing": "500", "finance": true, "weeks": "10", "cities": [ @@ -395,6 +272,7 @@ block content }, { "name": "Maker Square", "cost": "16920", + "housing": "500", "finance": true, "weeks": "12", "cities": [ @@ -405,6 +283,7 @@ block content }, { "name": "Refactor U", "cost": "13500", + "housing": "400", "finance": true, "weeks": "10", "cities": [ @@ -413,6 +292,7 @@ block content }, { "name": "Rocket U", "cost": "12500", + "housing": "500", "finance": true, "weeks": "12", "cities": [ @@ -423,6 +303,7 @@ block content }, { "name": "Sabio", "cost": "13450", + "housing": "500", "finance": true, "weeks": "12", "cities": [ @@ -431,6 +312,7 @@ block content }, { "name": "Shillington School", "cost": "12950", + "housing": "500", "finance": true, "weeks": "12", "cities": [ @@ -444,6 +326,7 @@ block content }, { "name": "The Tech Academy", "cost": "9000", + "housing": "400", "finance": true, "weeks": "20", "cities": [ @@ -452,6 +335,7 @@ block content }, { "name": "Turing School", "cost": "17500", + "housing": "400", "finance": true, "weeks": "27", "cities": [ @@ -460,7 +344,8 @@ block content }, { "name": "Free Code Camp", "cost": "0", - "finance": true, + "housing": "0", + "finance": false, "weeks": "0", "cities": [ "Online" @@ -472,7 +357,7 @@ block content $('#three').css({opacity: '0.25'}); $('#four').css({opacity: '0.25'}); //step one event listener - $('#city-buttons').on("click", "span", function () { + $('#city-buttons').on("click", "button", function () { $(this).addClass('animated tada'); city = $(this).attr("id"); //make next step visible @@ -481,53 +366,44 @@ block content //console.log(city); }); //step two event listener - $('#income').on("change", function () { - console.log("Income Updated"); - lastYearincome = parseInt($('#lastYearIncome').val()); + $('#income').on("click", "button", function() { + $(this).addClass('animated tada'); + var lastYearincome = parseInt($(this).attr("id")); //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']; + var categoryNames = ['Opportunity Cost at Current Wage', 'Housing Cost', 'Financing Cost', 'Tuition / Wage Garnishing']; 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) { + if (camp.cities.indexOf(city) > -1) { weeklyHousing = 0; } else { - weeklyHousing = 500; + weeklyHousing = +camp.housing; } camp.mapping = [{ name: camp.name, - label: 'Tuition', + label: 'Tuition or Wage Garnishing', x0: x0, x1: x0 += +camp.cost }, { name: camp.name, - label: 'Finance', + label: 'Financing Cost', x0: +camp.cost, - x1: x0 += +Math.floor(camp.cost * .09519) + x1: camp.finance ? x0 += +Math.floor(camp.cost * .09519) : 0 }, { name: camp.name, - label: 'Housing', - x0: +Math.floor(camp.cost * 1.09519), + label: 'Housing Cost', + x0: camp.finance ? +Math.floor(camp.cost * 1.09519) : camp.cost, x1: x0 += weeklyHousing * camp.weeks }, { name: camp.name, - label: 'Working Cost', - x0: +(Math.floor(camp.cost * 1.09519) + weeklyHousing * camp.weeks), + label: 'Opportunity Cost at Current Wage', + x0: camp.finance ? +(Math.floor(camp.cost * 1.09519) + weeklyHousing * camp.weeks) : +camp.cost + weeklyHousing * camp.weeks, x1: x0 += +(Math.floor(camp.weeks * lastYearincome / 50)) }]; camp.total = camp.mapping[camp.mapping.length - 1].x1; }); - console.log(bootcamps[0]); + bootcamps.sort(function(a, b) { return a.total - b.total; }); var margin = { top: 30, right: 60, @@ -547,9 +423,8 @@ block content return d.name; })) .rangeRoundBands([0, height], .1); - console.log("yrangeroundband", yScale.rangeBand()); var color = d3.scale.ordinal() - .range(["#f0ad4e", "#4A2B0F", "#215f1e", "#457E86"]) + .range(["#215f1e", "#5f5c1e", "#1e215f", "#5c1e5f"]) .domain(['Tuition', 'Finance', 'Housing', 'Working Cost']); var svg = d3.select("svg") .attr("width", width + margin.left + margin.right)