Skip to content

Instantly share code, notes, and snippets.

@darndt

darndt/index.html

Created November 21, 2012 01:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save darndt/4122445 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save darndt/4122445 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!-- https://gist.github.com/4122445 -->
<!-- http://bl.ocks.org/d/4122445/ -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 14px sans-serif;
}
#chart {
font: 12px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
/*.x.axis path {
display: none;
}
*/
.line {
fill: none;
/*stroke: steelblue;*/
stroke-width: 2px;
}
</style>
<body>
<form name="myform" onSubmit="return handleClick() onChange="return handleClick()">
Invested Amount:
<select id="investment" onChange="return handleClick()">
<option value="25000">$25,000</option>
<option value="50000">$50,000</option>
<option value="100000" selected>$100,000</option>
<option value="500000">$500,000</option>
<option value="1000000">$1,000,000</option>
</select>
&nbsp;&nbsp;
Projected Annual Return:
<!-- <input type="text" id="marketRate" value = "6.4"/> -->
<select id="marketRate" onChange="return handleClick()">
<option value="1.0">1 %</option>
<option value="2.0">2 %</option>
<option value="3.0">3 %</option>
<option value="4.0">4 %</option>
<option value="5.0" selected>5 %</option>
<option value="6.0">6 %</option>
<option value="7.0">7 %</option>
</select>
&nbsp;&nbsp;
Annual Financial Advisor Fee:
<!-- <input type="text" id="activeFee" value = "1"/> -->
<select id="activeFee" onChange="return handleClick()">
<option value="1.0">1 %</option>
<option value="1.5" selected>1.5 %</option>
<option value="2.0">2 %</option>
</select>
&nbsp;&nbsp;
Annual Flat Fee:
<!-- <input type="text" id="flatFee" value = "50"/> -->
<select id="flatFee" onChange="return handleClick()">
<option value="50.0" selected>$50</option>
<option value="100.0">$100</option>
<option value="150.0">$150</option>
</select>
<!-- <input name="Submit" type="submit" value="Submit" /> -->
</form>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
function handleClick() {
// jQuery('#chart').empty();
document.getElementById('chart').innerHTML = "";
draw();
return false;
}
function draw() {
var margin = {top: 20, right: 80, bottom: 30, left: 70},
width = 550 - margin.left - margin.right,
height = 250 - margin.top - margin.bottom;
// var parseDate = d3.time.format("%Y%m%d").parse;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var data = [];
var market_rate = Number(document.getElementById("marketRate").value)/100.0;
// alert(market_rate)
var active_fee = Number(document.getElementById("activeFee").value)/100.0;
var flat_fee = Number(document.getElementById("flatFee").value);
var investment = Number(document.getElementById("investment").value);
// years.forEach(function(year) {
p = {};
p.date = 0;
p.market = investment;
p.active = investment;
p.flat = investment;
data.push(p);
for (var i=1; i<=30; i++) {
last_year = data[data.length - 1];
p = {};
p.date = i;
p.market = last_year.market * (1 + market_rate);
p.active = last_year.active * (1 + market_rate) * (1 - active_fee);
p.flat = last_year.flat * (1 + market_rate) - flat_fee;
data.push(p);
// d.date = parseDate(d.date);
};
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.amount); });
var svg = d3.select("#chart").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 + ")");
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
var portfolios = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {date: d.date, amount: +d[name]};
})
};
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([
d3.min(portfolios, function(c) { return d3.min(c.values, function(v) { return v.amount; }); }),
d3.max(portfolios, function(c) { return d3.max(c.values, function(v) { return v.amount; }); })
]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
// .attr("transform", "rotate(-90)")
.attr("x", width)
.attr("dy", "-.71em")
.style("text-anchor", "end")
.text("Time (years)");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Amount (USD)");
var portfolio = svg.selectAll(".portfolio")
.data(portfolios)
.enter().append("g")
.attr("class", "portfolio");
portfolio.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });
// portfolio.selectAll('.point')
// .data(function(d) { return d.values; })
// .enter().append('svg:circle')
// .attr('cx', function(d) { return x(d.date); })
// .attr('cy', function(d) { return y(d.amount); })
// .attr('r', 3);
// // .style("stroke", function(d) { return color(d.name); });
portfolio.append("text")
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.amount) + ")"; })
.attr("x", 3)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
}
draw();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment