start refactoring calculator logic
This commit is contained in:
Quincy Larson
@ -1121,6 +1121,34 @@ hr {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Calculator styles
|
||||||
|
#income, #calculate {
|
||||||
|
visibility:hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#four p{
|
||||||
|
font-size: .6em;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart rect {
|
||||||
|
fill: steelblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart text {
|
||||||
|
fill: #121401;
|
||||||
|
font: 13px sans-serif;
|
||||||
|
text-anchor: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.axis path,
|
||||||
|
.axis line {
|
||||||
|
fill: none;
|
||||||
|
stroke: #121401;
|
||||||
|
stroke-width: 2px;
|
||||||
|
shape-rendering: crispEdges;
|
||||||
|
}
|
||||||
|
|
||||||
//uncomment this to see the dimensions of all elements outlined in red
|
//uncomment this to see the dimensions of all elements outlined in red
|
||||||
//* {
|
//* {
|
||||||
// border-color: red;
|
// border-color: red;
|
||||||
|
|||||||
@ -5,91 +5,49 @@ block content
|
|||||||
.panel-body
|
.panel-body
|
||||||
.row
|
.row
|
||||||
.col-xs-12.col-sm-10.col-sm-offset-1
|
.col-xs-12.col-sm-10.col-sm-offset-1
|
||||||
style.
|
h2#one Where do you live?
|
||||||
#lastYearIncome{
|
#city-buttons
|
||||||
clear:both;
|
button#austin.btn.btn-primary.btn-block Austin
|
||||||
margin: 2% 0;
|
button#brisbane.btn.btn-primary.btn-block Brisbane
|
||||||
width: 110px;
|
button#boulder.btn.btn-primary.btn-block Boulder
|
||||||
}
|
button#chicago.btn.btn-primary.btn-block Chicago
|
||||||
#income, #calculate {
|
button#denver.btn.btn-primary.btn-block Denver
|
||||||
visibility:hidden;
|
button#hong-kong.btn.btn-primary.btn-block Hong Kong
|
||||||
}
|
button#london.btn.btn-primary.btn-block London
|
||||||
.step {
|
button#los-angeles.btn.btn-primary.btn-block Los Angeles
|
||||||
font-size: 2em;
|
button#manchester.btn.btn-primary.btn-block Manchester
|
||||||
padding: 1%;
|
button#melbourne.btn.btn-primary.btn-block Melbourne
|
||||||
clear: both;
|
button#san-francisco.btn.btn-primary.btn-block San Fransisco
|
||||||
}
|
button#new-york-city.btn.btn-primary.btn-block New York City
|
||||||
.city-buttons {
|
button#portland.btn.btn-primary.btn-block Portland
|
||||||
display: block;
|
button#singapore.btn.btn-primary.btn-block Singapore
|
||||||
clear: right;
|
button#seattle.btn.btn-primary.btn-block Seattle
|
||||||
}
|
button#toronto.btn.btn-primary.btn-block Toronto
|
||||||
#four p{
|
button#other.btn.btn-primary.btn-block Other
|
||||||
font-size: .6em;
|
h2#two How much money did you make last year (in USD)?
|
||||||
color: black;
|
#income
|
||||||
}
|
button#0.btn.btn-primary.btn-block(href='#') $0
|
||||||
.chart rect {
|
button#20000.btn.btn-primary.btn-block(href='#') $20,000
|
||||||
fill: steelblue;
|
button#40000.btn.btn-primary.btn-block(href='#') $40,000
|
||||||
}
|
button#60000.btn.btn-primary.btn-block(href='#') $60,000
|
||||||
.chart text {
|
button#80000.btn.btn-primary.btn-block(href='#') $80,000
|
||||||
fill: #121401;
|
button#100000.btn.btn-primary.btn-block(href='#') $100,000
|
||||||
font: 13px sans-serif;
|
svg.chart
|
||||||
text-anchor: end;
|
| Sources:
|
||||||
}
|
a(href='#') Link to Data Sources Here
|
||||||
.axis path,
|
form
|
||||||
.axis line {
|
label
|
||||||
fill: none;
|
input(type='radio', name='mode', value='grouped')
|
||||||
stroke: #121401;
|
| Grouped
|
||||||
stroke-width: 2px;
|
label
|
||||||
shape-rendering: crispEdges;
|
input(type='radio', name='mode', value='stacked')
|
||||||
}
|
| Stacked
|
||||||
html.
|
|
||||||
<!--Live Logging for Testing-->
|
|
||||||
<div id="target" class="step"></div>
|
|
||||||
<div class="header">
|
|
||||||
<!--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 4-->
|
|
||||||
<!--<div id="four" class="step">Clear the Chart and Start Over?</div>-->
|
|
||||||
<svg class="chart"></svg>
|
|
||||||
</div>
|
|
||||||
<!--container-->
|
|
||||||
<div class="footer">
|
|
||||||
Sources: <a href="#">Link to Data Sources Here</a>
|
|
||||||
<form>
|
|
||||||
<label>
|
|
||||||
<input type="radio" name="mode"
|
|
||||||
value="grouped">Grouped
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<input type="radio" name="mode"
|
|
||||||
value="stacked" checked>
|
|
||||||
Stacked
|
|
||||||
</label>
|
|
||||||
</form>
|
|
||||||
script.
|
script.
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
var city = "";
|
var city = "";
|
||||||
//major cities array to check against users location for housing costs
|
//major cities array to check against users location for housing costs
|
||||||
var cityArray = ["San Fransisco", "Los Angeles", "Chicago", "Austin", "New York City"];
|
var cityArray = ["san-fransisco", "los-angeles", "chicago", "austin", "new-york-city"];
|
||||||
//this is the raw bootcamps file allowing easy addition of new code camps
|
//this is the raw bootcamps file allowing easy addition of new code camps
|
||||||
var bootcamps = [{
|
var bootcamps = [{
|
||||||
"name": "App Academy",
|
"name": "App Academy",
|
||||||
@ -98,8 +56,8 @@ block content
|
|||||||
"finance": false,
|
"finance": false,
|
||||||
"housing": "500",
|
"housing": "500",
|
||||||
"cities": [
|
"cities": [
|
||||||
"New York",
|
"new-york-city",
|
||||||
"San Francisco"
|
"san-francisco"
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
"name": "Viking Code School",
|
"name": "Viking Code School",
|
||||||
@ -117,8 +75,8 @@ block content
|
|||||||
"weeks": "12",
|
"weeks": "12",
|
||||||
"finance": true,
|
"finance": true,
|
||||||
"cities": [
|
"cities": [
|
||||||
"New York",
|
"new-york-city",
|
||||||
"San Francisco"
|
"san-francisco"
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
"name": "Hack Reactor Online",
|
"name": "Hack Reactor Online",
|
||||||
@ -127,8 +85,7 @@ block content
|
|||||||
"weeks": "12",
|
"weeks": "12",
|
||||||
"finance": true,
|
"finance": true,
|
||||||
"cities": [
|
"cities": [
|
||||||
"New York",
|
"online"
|
||||||
"San Francisco"
|
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
"name": "Hackbright Academy",
|
"name": "Hackbright Academy",
|
||||||
@ -137,7 +94,7 @@ block content
|
|||||||
"weeks": "10",
|
"weeks": "10",
|
||||||
"finance": true,
|
"finance": true,
|
||||||
"cities": [
|
"cities": [
|
||||||
"San Francisco"
|
"san-francisco"
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
"name": "Dev Bootcamp",
|
"name": "Dev Bootcamp",
|
||||||
@ -146,9 +103,9 @@ block content
|
|||||||
"housing": "500",
|
"housing": "500",
|
||||||
"weeks": "19",
|
"weeks": "19",
|
||||||
"cities": [
|
"cities": [
|
||||||
"New York",
|
"new-york-city",
|
||||||
"San Francisco",
|
"san-francisco",
|
||||||
"Chicago"
|
"chicago"
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
"name": "General Asssembly",
|
"name": "General Asssembly",
|
||||||
@ -157,18 +114,18 @@ block content
|
|||||||
"finance": true,
|
"finance": true,
|
||||||
"weeks": "12",
|
"weeks": "12",
|
||||||
"cities": [
|
"cities": [
|
||||||
"Washington, DC",
|
"washington-dc",
|
||||||
"Austin",
|
"austin",
|
||||||
"Boston",
|
"boston",
|
||||||
"Chicago",
|
"chicago",
|
||||||
"Hong Kong",
|
"hong-kong",
|
||||||
"London",
|
"london",
|
||||||
"Los Angeles",
|
"los-angeles",
|
||||||
"Melbourne",
|
"melbourne",
|
||||||
"New York cities",
|
"new-york-city",
|
||||||
"San Francisco",
|
"san-francisco",
|
||||||
"Seattle",
|
"seattle",
|
||||||
"Singapore"
|
"singapore"
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
"name": "Angel Hack",
|
"name": "Angel Hack",
|
||||||
@ -177,7 +134,7 @@ block content
|
|||||||
"finance": true,
|
"finance": true,
|
||||||
"weeks": "12",
|
"weeks": "12",
|
||||||
"cities": [
|
"cities": [
|
||||||
"San Francisco"
|
"san-francisco"
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
"name": "Bitmaker Labs",
|
"name": "Bitmaker Labs",
|
||||||
@ -186,7 +143,7 @@ block content
|
|||||||
"finance": true,
|
"finance": true,
|
||||||
"weeks": "12",
|
"weeks": "12",
|
||||||
"cities": [
|
"cities": [
|
||||||
"Toronto"
|
"toronto"
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
"name": "CoderVox",
|
"name": "CoderVox",
|
||||||
@ -195,7 +152,7 @@ block content
|
|||||||
"finance": true,
|
"finance": true,
|
||||||
"weeks": "12",
|
"weeks": "12",
|
||||||
"cities": [
|
"cities": [
|
||||||
"Austin"
|
"austin"
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
"name": "Coding Dojo",
|
"name": "Coding Dojo",
|
||||||
@ -204,9 +161,9 @@ block content
|
|||||||
"finance": true,
|
"finance": true,
|
||||||
"weeks": "12",
|
"weeks": "12",
|
||||||
"cities": [
|
"cities": [
|
||||||
"New York",
|
"new-york-city",
|
||||||
"San Francisco",
|
"san-francisco",
|
||||||
"Chicago"
|
"chicago"
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
"name": "Epicodus",
|
"name": "Epicodus",
|
||||||
@ -215,7 +172,7 @@ block content
|
|||||||
"finance": false,
|
"finance": false,
|
||||||
"weeks": "15",
|
"weeks": "15",
|
||||||
"cities": [
|
"cities": [
|
||||||
"Portland"
|
"portland"
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
"name": "Flat Iron School",
|
"name": "Flat Iron School",
|
||||||
@ -224,7 +181,7 @@ block content
|
|||||||
"finance": true,
|
"finance": true,
|
||||||
"weeks": "12",
|
"weeks": "12",
|
||||||
"cities": [
|
"cities": [
|
||||||
"New York"
|
"new-york-city"
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
"name": "Galvanize",
|
"name": "Galvanize",
|
||||||
@ -233,11 +190,10 @@ block content
|
|||||||
"finance": true,
|
"finance": true,
|
||||||
"weeks": "24",
|
"weeks": "24",
|
||||||
"cities": [
|
"cities": [
|
||||||
"Boulder",
|
"boulder",
|
||||||
"Denver",
|
"denver",
|
||||||
"Seattle",
|
"seattle",
|
||||||
"San Francisco",
|
"san-francisco"
|
||||||
"Fort Collins"
|
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
"name": "The Iron Yard",
|
"name": "The Iron Yard",
|
||||||
@ -246,19 +202,8 @@ block content
|
|||||||
"finance": true,
|
"finance": true,
|
||||||
"weeks": "19",
|
"weeks": "19",
|
||||||
"cities": [
|
"cities": [
|
||||||
"Atlanta",
|
"austin",
|
||||||
"Austin",
|
"washington-dc"
|
||||||
"Colombia, SC",
|
|
||||||
"Charleston, SC",
|
|
||||||
"Houston",
|
|
||||||
"Greenville, SC",
|
|
||||||
"Las Vegas",
|
|
||||||
"Little Rock",
|
|
||||||
"Nashville",
|
|
||||||
"Orlando",
|
|
||||||
"Raleigh - Durham",
|
|
||||||
"Tampa - St. Petersburg",
|
|
||||||
"Washington DC"
|
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
"name": "Launch Academy",
|
"name": "Launch Academy",
|
||||||
@ -267,7 +212,7 @@ block content
|
|||||||
"finance": true,
|
"finance": true,
|
||||||
"weeks": "10",
|
"weeks": "10",
|
||||||
"cities": [
|
"cities": [
|
||||||
"Boston"
|
"boston"
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
"name": "Maker Square",
|
"name": "Maker Square",
|
||||||
@ -276,9 +221,9 @@ block content
|
|||||||
"finance": true,
|
"finance": true,
|
||||||
"weeks": "12",
|
"weeks": "12",
|
||||||
"cities": [
|
"cities": [
|
||||||
"Los Angeles",
|
"los-angeles",
|
||||||
"San Francisco",
|
"san-francisco",
|
||||||
"Austin"
|
"austin"
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
"name": "Refactor U",
|
"name": "Refactor U",
|
||||||
@ -287,7 +232,7 @@ block content
|
|||||||
"finance": true,
|
"finance": true,
|
||||||
"weeks": "10",
|
"weeks": "10",
|
||||||
"cities": [
|
"cities": [
|
||||||
"Boulder"
|
"boulder"
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
"name": "Rocket U",
|
"name": "Rocket U",
|
||||||
@ -296,9 +241,9 @@ block content
|
|||||||
"finance": true,
|
"finance": true,
|
||||||
"weeks": "12",
|
"weeks": "12",
|
||||||
"cities": [
|
"cities": [
|
||||||
"New York",
|
"new-york-city",
|
||||||
"San Francisco",
|
"san-francisco",
|
||||||
"Chicago"
|
"chicago"
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
"name": "Sabio",
|
"name": "Sabio",
|
||||||
@ -307,7 +252,7 @@ block content
|
|||||||
"finance": true,
|
"finance": true,
|
||||||
"weeks": "12",
|
"weeks": "12",
|
||||||
"cities": [
|
"cities": [
|
||||||
"Los Angeles"
|
"los-angeles"
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
"name": "Shillington School",
|
"name": "Shillington School",
|
||||||
@ -316,12 +261,12 @@ block content
|
|||||||
"finance": true,
|
"finance": true,
|
||||||
"weeks": "12",
|
"weeks": "12",
|
||||||
"cities": [
|
"cities": [
|
||||||
"New York",
|
"new-york-city",
|
||||||
"Sydney",
|
"sydney",
|
||||||
"Brisbane",
|
"brisbane",
|
||||||
"London",
|
"london",
|
||||||
"Manchester",
|
"manchester",
|
||||||
"Melbourne"
|
"melbourne"
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
"name": "The Tech Academy",
|
"name": "The Tech Academy",
|
||||||
@ -330,7 +275,7 @@ block content
|
|||||||
"finance": true,
|
"finance": true,
|
||||||
"weeks": "20",
|
"weeks": "20",
|
||||||
"cities": [
|
"cities": [
|
||||||
"Portland"
|
"portland"
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
"name": "Turing School",
|
"name": "Turing School",
|
||||||
@ -339,7 +284,7 @@ block content
|
|||||||
"finance": true,
|
"finance": true,
|
||||||
"weeks": "27",
|
"weeks": "27",
|
||||||
"cities": [
|
"cities": [
|
||||||
"Denver"
|
"denver"
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
"name": "Free Code Camp",
|
"name": "Free Code Camp",
|
||||||
@ -348,11 +293,9 @@ block content
|
|||||||
"finance": false,
|
"finance": false,
|
||||||
"weeks": "0",
|
"weeks": "0",
|
||||||
"cities": [
|
"cities": [
|
||||||
"Online"
|
"online"
|
||||||
]
|
]
|
||||||
}];
|
}];
|
||||||
//reduce opacity for steps 2 through 4
|
|
||||||
//the actual elements start out hidden via CSS
|
|
||||||
$('#two').css({opacity: '0.25'});
|
$('#two').css({opacity: '0.25'});
|
||||||
$('#three').css({opacity: '0.25'});
|
$('#three').css({opacity: '0.25'});
|
||||||
$('#four').css({opacity: '0.25'});
|
$('#four').css({opacity: '0.25'});
|
||||||
@ -491,9 +434,13 @@ block content
|
|||||||
return xScale((d.x1) - (d.x0));
|
return xScale((d.x1) - (d.x0));
|
||||||
});
|
});
|
||||||
d3.selectAll("input").on("change", change);
|
d3.selectAll("input").on("change", change);
|
||||||
var timeout = setTimeout(function () {
|
var timeout= setTimeout(function () {
|
||||||
d3.select("input[value=\"grouped\"]").property("checked", true).each(change);
|
d3.select("input[value=\"stacked\"]").property("checked",true).each(change);
|
||||||
}, 2000);
|
// d3.select("input[value=\"stacked\"]").property("checked",true).each(change);
|
||||||
|
}, 4000);
|
||||||
|
var timeout= setTimeout(function () {
|
||||||
|
d3.select("input[value=\"grouped\"]").property("checked",true).each(change);
|
||||||
|
}, 1500);
|
||||||
|
|
||||||
function change() {
|
function change() {
|
||||||
clearTimeout(timeout);
|
clearTimeout(timeout);
|
||||||
|
|||||||
Reference in New Issue
Block a user