[ Launch: Tributary inlet ] 5891393 by hemulin
-
-
Save hemulin/5891393 to your computer and use it in GitHub Desktop.
bursa dream
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"description":"bursa dream","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
rect { | |
stroke: white; | |
fill: steelblue; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//################################################################## | |
//########## Initial parameters - PLAY WITH THE VALUES ############ | |
//################################################################## | |
var animate = 0; // change between 0-1 | |
var startAmount = 10000; // Start amount in $ | |
var annualReturn = 2.8; // Annual return in % | |
var years = 5; // Running years | |
var USDTOILS = 3.64; // USD -> ILS rate | |
//############################# | |
//########## CODE ############ | |
//############################# | |
var endAmount = startAmount; | |
var data = []; | |
var vis = d3.select("svg").append("svg"); | |
var inputCont = vis.append("g"); | |
var outputCont = vis.append("g"); | |
var chart = vis.append("g").attr("transform", "translate(10,15)"); | |
var textAmount = inputCont.append("g:text") | |
.attr("x", 20) | |
.attr("y", 20) | |
.text("the start amount is "+startAmount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") +"$"); | |
for (var i = 0; i < years; i++) { | |
outputCont.append("g:text") | |
.attr("x", function(){return 20}) | |
.attr("y", 70+i*20) | |
.style("font-size", 15) | |
.text("year "+i+": "+endAmount.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",")+"$") | |
endAmount *= annualReturn; | |
data.push(endAmount); | |
} | |
endAmount /= annualReturn; | |
data.pop(); | |
var textResult = outputCont.append("g:text") | |
.attr("x", 20) | |
.attr("y", 45) | |
.text("the end amount is "+endAmount.toFixed().replace(/\B(?=(\d{3})+(?!\d))/g, ",") +"$. "); | |
//₪ | |
shekelAmount = endAmount*USDTOILS; | |
var shekel = outputCont.append("text") | |
.attr("x", 310) | |
.attr("y", 45) | |
.text("which is "+shekelAmount.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",")+" in shekels"); | |
var each = outputCont.append("text") | |
.attr("x", 30) | |
.attr("y", 250) | |
.text((shekelAmount/4).toFixed().replace(/\B(?=(\d{3})+(?!\d))/g, ",")+" shekels each. (return of "+(((shekelAmount/4)/(startAmount*USDTOILS/4))*101).toFixed().replace(/\B(?=(\d{3})+(?!\d))/g, ",")+"%)"); | |
var years = inputCont.append("g:text") | |
.attr("x", 250) | |
.attr("y", 20) | |
.text(", running for "+years +" years"); | |
anuRet = (annualReturn*100)-100; | |
var anReturn = inputCont.append("g:text") | |
.attr("x", 420) | |
.attr("y", 20) | |
.text(", annual return of "+anuRet +"%/year"); | |
var x = d3.scale.linear() | |
.domain([d3.min(data), d3.max(data)]) | |
.range([20, 420]); | |
var y = d3.scale.ordinal() | |
.domain(data) | |
.rangeBands([400, 550]); | |
if (animate) { | |
chart.selectAll("rect") | |
.data(data) | |
.enter().append("rect") | |
.transition() | |
.duration(2000) | |
.delay(500) | |
.attr("y", y) | |
.attr("x", 10) | |
.attr("width", x) | |
.attr("height", y.rangeBand()) | |
.attr("class", "myRect"); | |
chart.selectAll("text") | |
.data(data) | |
.enter().append("text") | |
.transition() | |
.duration(2000) | |
.delay(500) | |
.attr("x", x) | |
.attr("y", function(d) { return y(d) + y.rangeBand() / 2; }) | |
.attr("dx", 100) // padding-right | |
.attr("dy", ".35em") // vertical-align: middle | |
.attr("text-anchor", "end") // text-align: right | |
.text(String) | |
.attr("class", "myText"); | |
} | |
/* else { | |
chart.selectAll("rect") | |
.data(data) | |
.enter().append("rect") | |
.attr("y", y) | |
.attr("x", 10) | |
.attr("width", x) | |
.attr("height", y.rangeBand()) | |
.attr("class", "myRect"); | |
chart.selectAll("text") | |
.data(data) | |
.enter().append("text") | |
.attr("x", x) | |
.attr("y", function(d) { return y(d) + y.rangeBand() / 2; }) | |
.attr("dx", 100) // padding-right | |
.attr("dy", ".35em") // vertical-align: middle | |
.attr("text-anchor", "end") // text-align: right | |
.text(String) | |
.attr("class", "myText"); | |
}; | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment