With keyed (indexed) data/um.
xxxxxxxxxx<html lang="en-ca"><head> <title>Million dollar TFSA - The Globe and Mail</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="expires" content="0"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="window-target" content="_top"> <meta http-equiv="Content-Language" content="en-ca"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="https://beta.images.theglobeandmail.com/bundle-css/gzip_N511008540/www-css-core.css"> </head> <body><!-- EMBED --><link rel="stylesheet" type="text/css" media="screen" href="main.css"><div class="gi" id="gi-milion-dollar-tfsa"> <h2 class="gi-title">Million dollar TFSA Calculator</h2> <div class="gi-worksheet" id="tfsa-worksheet"> <div class="gi-viz hidden" id="tfsa-results-viz"> <div class="gi-detail" id="tfsa-results-detail"> <b>Contribution <span class="detail_value" id="detail_total_contribution"></span></b> <b>Investment return <span class="detail_value" id="detail_total_investment_return"></span></b> <b>Total value <span class="detail_value" id="detail_total_value"></span></b> <button class="gi-btn" id="btn_showData" style="float: right;">Show data</button> </div></div> <div class="gi-calc initial" id="tfsa-calculator"> <div class="gi-question-grp" id="gi-retirement-ratio-part1"> <h3 class="note">The TFSA contribution limit grows with inflation.</h3> <div class="gi-question"> <label for="fld_contribution_annual_limit_initial" class="gi-question__label"> <input type="text" id="fld_contribution_annual_limit_initial" class="gi-question__field value_preset" disabled="" value="$5,500"> <span class="label-text">2016 contribution limit</span> <span class="note"></span> </label> </div> <div class="gi-question"> <label for="fld_contribution_increase_interval_inflationrate" class="grid-label"> <input type="text" id="fld_contribution_increase_interval_inflationrate" class="gi-question__field value_preset" disabled="" value="2%"> <span class="label-text">Annual inflation rate</span> <span class="note"></span></label> </div> <div class="gi-question"> <label for="fld_contribution_increase_amount" class="grid-label"> <input type="text" id="fld_contribution_increase_amount" class="gi-question__field value_preset" disabled="" value="$500"> <span class="label-text">Each limit increase</span> <span class="note"></span></label> </div> </div> <div class="gi-question-grp" id="gi-retirement-ratio-part2"> <h3 class="note">Make your million</h3> <div class="gi-question" id="fld-grp_contribution_years"> <label for="fld_contribution_years" class="grid-label"> <input type="text" id="fld_contribution_years"class="gi-question__field value_input" value=""> <span class="label-text">Number of years that I will contribute</span> <span class="note"></span></label> </div> <div class="gi-question" id="fld-grp_contribution_expected_ror"> <label for="fld_contribution_expected_ror" class="grid-label"> <input type="text" id="fld_contribution_expected_ror"class="gi-question__field value_input" value="5.5%"> <span class="label-text">Expected annual rate of return</span> <span class="note"></span></label> </div> <div class="gi-question" id="fld-grp_contribution_existing"> <label for="fld_contribution_existing" class="grid-label"> <input type="text" id="fld_contribution_existing"class="gi-question__field value_input" value=""> <span class="label-text">Dollar amount I will start with</span> <span class="note"></span></label> </div> <div class="gi-question _fullwidth" id="fld-grp_contribution_annual_max"> <label for="fld_contribution_annual_max" class="grid-label">I will maximize my annual contribution. <input type="checkbox" id="fld_contribution_annual_max" checked="checked" > <span class="note"></span></label> </div> </div> <div class="gi-question-grp" id="gi-retirement-ratio-part3"> <div class="gi-question " id="fld-grp_contribution_annual"> <label for="fld_contribution_annual" class="grid-label"> <input type="text" id="fld_contribution_annual"class="gi-question__field value_input" value=""> <span class="label-text">Dollar amount I will contribute annually</span> <span class="note"></span></label> </div> <div class="gi-question " id="fld-grp_contribution_annual_percentage_increase"> <label for="fld_contribution_annual_percentage_increase" class="grid-label"> <input type="text" id="fld_contribution_annual_percentage_increase"class="gi-question__field value_input" value=""> <span class="label-text">Percentage my contributions will rise annually on average</span> <span class="note"></span></label> </div> </div> </div> <div class="gi-table hidden" id="tfsa-results-table"> <button class="gi-btn" id="btn_showDataTable" style="float: right;">Hide data</button> <table class="gi-datatable" id="tableInvestmentGrowth"></table></div> </div> <script>var fieldsConfig = [ { "section" : 1, "label" : "How it works", "unit" : "", "unit_label" : "", "note" : "The TFSA contribution limit grows with inflation.", "fields" : [ { "name" : "contribution_annual_limit_initial", "type" : "text", "value" : "5500", "unit" : "dollars", "unit_label" : "$", "note" : "", "label" : "The 2016 contribution limit" }, // { // "name" : "contribution_increase_interval_time", "type" : "text", "value" : "4", "unit" : "years", "unit_label" : "", "note" : "", "label" : "We estimate the limit will rise every fourth year" // }, { "name" : "contribution_increase_interval_inflationrate", "type" : "text", "value" : "2", "unit" : "inflationRat", "unit_label" : "", "note" : "", "label" : "Annual inflation rate" }, { "name" : "contribution_increase_amount", "type" : "text", "value" : "500", "unit" : "dollars", "unit_label" : "$", "note" : "", "label" : "Amount of each increase in the limit" } ] }, { "section" : 2, "label" : " ", "unit" : "", "unit_label" : "", "note" : "Make your million", "fields" : [ { "name" : "contribution_years", "type" : "text", "value" : "", "unit" : "countYears", "unit_label" : "", "note" : "", "label" : "Number of years I will contribute" }, { "name" : "contribution_expected_ror", "type" : "text", "value" : "", "unit" : "percentage", "unit_label" : "", "note" : "", "label" : "Expected annual rate of return" }, { "name" : "contribution_existing", "type" : "text", "value" : "", "unit" : "$", "unit_label" : "", "note" : "", "label" : "Dollar amount I will start with" }, { "name" : "contribution_annual_max", "type" : "checkbox", "value" : "checked", "unit" : "", "unit_label" : "", "note" : "", "label" : "I will maximize my annual contribution." }, { "name" : "contribution_annual", "type" : "text", "value" : "", "unit" : "$", "unit_label" : "", "note" : "", "label" : "Dollar amount I will contribute annually" }, { "name" : "contribution_annual_percentage_increase", "type" : "text", "value" : "", "unit" : "percentage", "unit_label" : "", "note" : "", "label" : "Percentage my contributions will rise annually on average" } ] }];</script></div><script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script><script src="main.js"></script><!-- EMBED --> </body></html> https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js