D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
monkeycycle
Full window
Github gist
Compound interest calculator with keyed (index) data
Compound Interest Calculator
With keyed (indexed) data/um.
<!DOCTYPE html> <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