major improvements to calculator logic
This commit is contained in:
Quincy Larson
@ -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
|
||||
<!--Live Logging for Testing-->
|
||||
<div id="target" class="step"></div>
|
||||
<div class="header">
|
||||
<!--Step 1-->
|
||||
<div id="one" class="step">Step 1: Choose your City</div>
|
||||
<div id="city-buttons">
|
||||
<ul>
|
||||
<li><span id="New York City">New York City</span></li>
|
||||
<li><span id="San Fransisco">San Fransisco</span></li>
|
||||
<li><span id="Austin">Austin</span></li>
|
||||
<li><span id="Los Angeles">Los Angeles</span></li>
|
||||
<li><span id="Chicago">Chicago</span></li>
|
||||
<li><span id="Other">Other</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!--Step 2-->
|
||||
<div id="two" class="step">Step 2: Enter last Year's Income</div>
|
||||
<div id="income">
|
||||
<label>Last Years Income in $$:</label>
|
||||
<input type="number" placeholder="52000" class="form-control" id="lastYearIncome">
|
||||
<!--Step 1-->
|
||||
<div id="one" class="step">Where do you live?</div>
|
||||
<div id="city-buttons">
|
||||
<button class='btn btn-primary btn-block' href='#' id="New York City">New York City</button>
|
||||
<button class='btn btn-primary btn-block' href='#' id="San Fransisco">San Fransisco</button>
|
||||
<button class='btn btn-primary btn-block' href='#' id="Austin">Austin</button>
|
||||
<button class='btn btn-primary btn-block' href='#' id="Los Angeles">Los Angeles</button>
|
||||
<button class='btn btn-primary btn-block' href='#' id="Chicago">Chicago</button>
|
||||
<button class='btn btn-primary btn-block' href='#' id="Other">Other</button>
|
||||
</div>
|
||||
|
||||
<!--Step 2-->
|
||||
<div id="two" class="step">How much money did you make last year (in USD)?</div>
|
||||
<div id="income">
|
||||
<button class='btn btn-primary btn-block' href='#' id="0">$0</button>
|
||||
<button class='btn btn-primary btn-block' href='#' id="20000">$20,000</button>
|
||||
<button class='btn btn-primary btn-block' href='#' id="40000">$40,000</button>
|
||||
<button class='btn btn-primary btn-block' href='#' id="60000">$60,000</button>
|
||||
<button class='btn btn-primary btn-block' href='#' id="80000">$80,000</button>
|
||||
<button class='btn btn-primary btn-block' href='#' id="100000">$100,000</button>
|
||||
</div>
|
||||
<!--Step 3-->
|
||||
<div id="three" class="step">Step 3: Calculate</div>
|
||||
<button id="calculate" type="submit" class="btn btn-default">Calculate</button>
|
||||
<!--Check Outputs Temp-->
|
||||
<!--Step 4-->
|
||||
<!--<div id="four" class="step">Clear the Chart and Start Over?</div>-->
|
||||
<svg class="chart"></svg>
|
||||
@ -89,153 +87,7 @@ block content
|
||||
</form>
|
||||
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'});
|
||||
});
|
||||
<!--Graph it-->
|
||||
$('#calculate').on("click", function () {
|
||||
//Make data logger visible
|
||||
$('#four').css({opacity: '1'});
|
||||
<!--Prep the data for D3 -->
|
||||
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)
|
||||
|
||||
Reference in New Issue
Block a user