Tangle is a JavaScript library for creating reactive documents.

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.

When you eat 3 cookies, you consume 150 calories.

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.

Proposition 21: Vehicle License Fee for State Parks

The way it is now:

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.

What Prop 21 would do:

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.

Analysis:

Suppose that an extra $18 was charged to 100% of vehicle registrations. Park admission would be free forthose 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 next7 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.

This topology is particularly useful for embedded audio processing, because F_c (cutoff frequency) andQ (resonance) are controlled by independent coefficients, k_f and k_q. (With most filters, the coefficients are functions of both parameters, which precludes pre-calculated lookup tables.)

The coefficients and transfer function are:

Some example frequency responses:

F_c = 2 KHz
Q = 0.8

F_c = 1.2 KHz
Q = 3.5

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.