Created
February 8, 2013 22:03
-
-
Save koaning/4742316 to your computer and use it in GitHub Desktop.
tangleJS
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> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <title>Tangle document</title> | |
| <!-- Tangle --> | |
| <script type="text/javascript" src="http://worrydream.com/Tangle/Tangle.js"></script> | |
| <!-- TangleKit (optional) --> | |
| <link rel="stylesheet" href="http://worrydream.com/Tangle/TangleKit/TangleKit.css" type="text/css"> | |
| <script type="text/javascript" src="http://worrydream.com/Tangle/TangleKit/mootools.js"></script> | |
| <script type="text/javascript" src="http://worrydream.com/Tangle/TangleKit/sprintf.js"></script> | |
| <script type="text/javascript" src="http://worrydream.com/Tangle/TangleKit/BVTouchable.js"></script> | |
| <script type="text/javascript" src="http://worrydream.com/Tangle/TangleKit/TangleKit.js"></script> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <!-- example --> | |
| <script type="text/javascript"> | |
| var savings, original_cost, costs_left; | |
| function setUpTangle () { | |
| var element = document.getElementById("example"); | |
| var tangle = new Tangle(element, { | |
| initialize: function () { | |
| this.cookies = 4; | |
| this.caloriesPerCookie = 50; | |
| this.min_calories = 20; | |
| this.windows_price = 75; | |
| this.num_people = 50; | |
| this.percent = 50; | |
| }, | |
| update: function () { | |
| this.savings = this.percent * this.windows_price * this.num_people; | |
| this.original_cost = this.num_people * this.windows_price * 100; | |
| this.costs_left = this.original_cost - this.savings; | |
| this.lives_saved = Math.round(this.savings/2.5) } | |
| }); | |
| return tangle | |
| } | |
| </script> | |
| </head> | |
| <body onload="setUpTangle();"> | |
| <style> | |
| .TKAdjustableNumber { | |
| color: #000; | |
| border-bottom: 0px dashed #46f; | |
| cursor: pointer; | |
| font-style: bold; | |
| } | |
| .TKAdjustableNumberHelp { | |
| position:absolute; | |
| color: #00f; | |
| font: 9px "Helvetica-Neue", "Arial", sans-serif; | |
| opacity: 0; | |
| } | |
| p{ | |
| color: black; | |
| font-family: Courier New; | |
| font-size: 13px; | |
| } | |
| </style> | |
| <p font-"arial">This is a reactive political statement. <br> | |
| You can click and drag everything that is bold. </p> | |
| <p id="example" face="Georgia, Arial, Garamond"> | |
| If <b><span data-var="num_people" class="TKAdjustableNumber" data-min="20" data-max="200">00 people</span></b> use a paid version of microsoft office. <br> | |
| If <b><span data-var="windows_price" class="TKAdjustableNumber" data-min="20" data-max="150"> dollars</span></b> is the yearly license cost. <br> | |
| If <b><span data-var="percent" class="TKAdjustableNumber" data-min="0" data-max="100"> percent</span></b> switches to libre office. <br> | |
| Then we might save <i>$<span data-var="savings"></span></i> per year! <br> | |
| If that money was donated for polio shots... | |
| <br>... we might save <i><span data-var="lives_saved"></span></i> lives. | |
| </p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I wonder if you could you perform the same with pure d3 instead, using the mousewheel up and down event?
like in
.call(d3.behavior.zoom()
.on("zoom", function() {
console.log("entering zoom function")
console.log("d3.event.sourceEvent.type: " + d3.event.sourceEvent.type); // we get a DOMMouseScroll
console.log("d3.event.sourceEvent.detail: " + d3.event.sourceEvent.detail);
if (d3.event.sourceEvent.detail > 0)
{
... augment the value
}else{
... decrease the value;
}
}