Forked from puzzler10's block: Moving Rectangle
Last active
February 7, 2018 16:19
-
-
Save henryjameslau/80aca2caedb54a75689492e92b96290e to your computer and use it in GitHub Desktop.
Trade Balances
This file contains 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
license: mit |
This file contains 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
<!DOCTYPE html> | |
<html> | |
<head> | |
<style> | |
</style> | |
</head> | |
<body> | |
Import <input type = "range" min = "25" max = "75" value = "50" id = "imports" > <br> | |
Export <input type = "range" min = "25" max = "75" value = "50" id = "exports" ><br> | |
<div id="tings"></div> | |
<div id="graphic"></div> | |
Import change <input type = "range" min = "-10" max = "10" value = "0" id = "importchange" ><br> | |
Export change <input type = "range" min = "-10" max = "10" value = "0" id = "exportchange" > | |
<div id="tings2"></div> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> | |
<script> | |
// A program that moves around a rectangle using sliders | |
//starting values of rectangle | |
var svg_width = 500 | |
var svg_height = 550 | |
d3.select("#imports").on("input", tradebalance); | |
d3.select("#exports").on("input", tradebalance); | |
d3.select("#importchange").on("input", tradebalance); | |
d3.select("#exportchange").on("input", tradebalance); | |
var svg = d3.select("#graphic").append("svg") | |
.attr("width", svg_width) | |
.attr("height", svg_height); | |
svg.append("rect") | |
.attr("id","importbox") | |
svg.append("rect") | |
.attr("id","exportbox") | |
svg.append("path") | |
.attr("id","beam") | |
svg.append("circle") | |
.attr("cx",svg_width/2) | |
.attr("cy",svg_height/2+10) | |
.attr("r",10) | |
svg.append("text") | |
.attr("id","importtext") | |
.attr("x",10) | |
.attr("y",svg_height/2-20) | |
.text("Imports") | |
.style("fill","grey") | |
svg.append("text") | |
.attr("id","exporttext") | |
.attr("x",svg_width-125) | |
.attr("y",svg_height/2-20) | |
.text("Exports") | |
.style("fill","grey") | |
svg.append("text") | |
.attr("id","itis") | |
.attr("x", svg_width/2) | |
.attr("y", svg_height/4) | |
.attr("text-anchor","middle") | |
.attr("font-weight",700) | |
.attr("font-size","18px") | |
tradebalance(); | |
function tradebalance(){ | |
imports = d3.select("#imports").property("value") | |
exports = d3.select("#exports").property("value") | |
tradebalance=exports-imports | |
d3.select("#tings").selectAll("*").remove() | |
d3.select("#tings2").selectAll("*").remove() | |
// d3.select("body").append("div").attr("id","tings") | |
// d3.select("#tings").append("p").text("Imports are "+ d3.format(".1f")(imports)) | |
// d3.select("#tings").append("p").text("Exports are "+ d3.format(".1f")(exports)) | |
d3.select("#tings").append("p").text("Trade balance is "+ d3.format(".1f")(tradebalance)) | |
importrate = d3.select("#importchange").property("value") | |
exportrate = d3.select("#exportchange").property("value") | |
newimports = imports * ((d3.select("#importchange").property("value")/100)+1) | |
newexports = exports * ((d3.select("#exportchange").property("value")/100)+1) | |
d3.select("#tings2").append("p").text("Imports changed by "+ importrate +"%") | |
d3.select("#tings2").append("p").text("Exports changed by " +exportrate+"%" ) | |
newtradebalance = newexports - newimports | |
d3.select("#tings2").append("p").text("New trade balance is "+ d3.format(".1f")(newtradebalance)) | |
d3.select("#importbox") | |
.transition() | |
.attr("x",0) | |
.attr("y",svg_height/2-newtradebalance*3) | |
.attr("height",newimports) | |
.attr("width",newimports) | |
.style("fill","steelblue"); | |
d3.select("#exportbox") | |
.transition() | |
.attr("x",svg_width-newexports) | |
.attr("y",svg_height/2+newtradebalance*3) | |
.attr("height",newexports) | |
.attr("width",newexports) | |
.style("fill","orange"); | |
d3.select("#importtext").transition() | |
.attr("y",-20+svg_height/2-newtradebalance*3) | |
.text("Imports are "+d3.format(".1f")(newimports)) | |
d3.select("#exporttext").transition() | |
.attr("y",-20+svg_height/2+newtradebalance*3) | |
.text("Exports are "+d3.format(".1f")(newexports)) | |
var lineData = [ { "x": newimports/2, "y": svg_height/2-newtradebalance*3}, { "x": svg_width-exports/2, "y": svg_height/2+newtradebalance*3}]; | |
var lineFunction = d3.svg.line() | |
.x(function(d) { return d.x; }) | |
.y(function(d) { return d.y; }) | |
.interpolate("linear"); | |
d3.select("#beam") | |
.transition() | |
.attr("d", lineFunction(lineData)) | |
.attr("stroke", "lightgrey") | |
.attr("stroke-width", 2) | |
.attr("fill", "none"); | |
d3.select("#itis") | |
.transition() | |
.text(function(){ | |
if(newtradebalance>0){return "Trade Surplus"} | |
else if(newtradebalance<0){return "Trade Deficit"} | |
else{return ""}}) | |
} | |
</script> | |
</body> | |
</html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment