Forked from puzzler10's block: Moving Rectangle
forked from henryjameslau's block: Trade Balances
Created
February 8, 2018 08:54
-
-
Save henryjameslau/dea8bd34fd88cd001cd1bf475bbe32a2 to your computer and use it in GitHub Desktop.
Trade Balances ii
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