Tangle is a JavaScript library for creating reactive documents. Your readers can interactively explore possibilities, play with parameters, and see the document update immediately. Tangle is super-simple and easy to learn.
This is a simple reactive document.
This is the HTML for that example.
When you eat <span data-var="cookies" class="TKAdjustableNumber"> cookies</span>,
you consume <span data-var="calories"> calories</span>.
And this is the JavaScript.
var tangle = new Tangle(document, {
initialize: function () { this.cookies = 3; },
update: function () { this.calories = this.cookies * 50; }
});
Write your document with HTML and CSS, as you normally would. Use special HTML attributes to indicate variables. Write a little JavaScript to specify how your variables are calculated. Tangle ties it all together.
* * *
Try out some examples.
California has 278 state parks, including state beaches and historic parks. The current $400 million budget is insufficient to maintain these parks, and 150 parks will be shut down at least part-time. Most parks charge $12 per vehicle for admission.
Proposes to charge car owners an extra $18 on their annual registration bill, to go into the state park fund. Cars that pay the charge would have free park admission.
Suppose that an extra $18 was charged to 100 % of vehicle registrations. Park admission would be free for those who paid the charge.
This would collect an extra $437 million ($504 million from the tax, minus $67 million lost revenue from admission) for a total state park budget of $837 million. This is sufficient to maintain the parks in their current state, plus fund a program to bring safety and cleanliness up to acceptable standards over the next 7 years.
Park attendance would rise by 34%, to 100 million visits each year.
Below is a simplified digital adaptation of the analog state variable filter.
The coefficients and transfer function are:
Some example frequency responses:
For a more extensive example, see Ten Brighter Ideas.
For the motivation and philosophy behind reactive documents, see Explorable Explanations.
Or learn how to get started with Tangle.