
Tangle is a JavaScript library for creating reactive documents. - jsavimbi
http://worrydream.com/Tangle/
======
methodin
My first thought was "this is pretty cool!" but wondering who actually needs
it. I then had the realization that this is, in fact, a very different way of
data expression. It would force you to think not only about what you are
saying, but how you are saying it and how to demonstrate the ideas within the
text of the document itself and not simply say "Refer to fig 1.1". This could
truly present a new way of displaying data on the web. It could bridge the gap
between complex animations and simple text. 99.9% of all sites I see that
contain some cool animation are completely independent of the content
surrounding them. Having the content and interactions married together in a
simple way is really something I've not seen too often. Kudos.

~~~
dantheman
So must of us are quite familiar with reactive programming, we just don't
realize it. Anytime you've ever made an excel spreadsheet, with functions,
you've done reactive programming. Seeing that the spreadsheet is one of the
few areas where nonprogammers actually program, I'm hoping that as we better
understand reactive programming we'll be able to expose it's power to general
users.

For more information on functional reactive programming, I'd recommend looking
at FlapJax and FatherTime

------
markbao
Another cool experiment with the graph example given there:
<http://worrydream.com/ExplorableExplanations/> — go down to the guitar icon
(or find "incidentally" on the page).

~~~
DavidChouinard
If you missed it, Bret Victor also uses this profusely in Up and Down the
Ladder of Abstraction (<http://worrydream.com/LadderOfAbstraction/>).
Regardless of his use of Tangle, it's a great guide that definitely merits a
thoughtful read.

------
troymc
It's interesting (for me, anyway) to contrast this with Wolfram's Computable
Document Format (CDF, see <http://www.wolfram.com/cdf/> ).

CDF documents can only be written using Mathematica, are only playable using a
special CDF Player (or Mathematica), and you have to license CDF for
commercial use. Tangle is free and open source (under an MIT License), JS is
"playable" in most web browsers, and JS can be written using any text editor.

~~~
xtacy
While I agree with the comparison, it would be unfair to not point out the
wealth of functions that Mathematica exposes:

[http://reference.wolfram.com/mathematica/guide/Mathematica.h...](http://reference.wolfram.com/mathematica/guide/Mathematica.html)

~~~
troymc
Good point! I wonder how much of Mathematica's functionality can be bundled
into stand-alone CDF documents (playable by the CDF Player).

Wolfram|Alpha has an API that can be called using JavaScript (for a fee), so
some mixed solution is also worth considering.

------
andrewflnr
This is one of the ideas I'm working on integrating into my toy
data/programming language, Fern. <https://github.com/andrewf/fern>. It's not
apparent from the README, but if you modify a Fern structure in memory, all
dependent values will (should) be updated, even with name references pointing
back up the hierarchy of data structures. These are mostly lists and maps
(which define names for subsidiary structures), which can be generated by
constructs like conditionals, functions, and (someday) loops.

Besides the ideas I listed, I see it being used in scenarios where you have
formulas based on a few inputs, and want to see what the output looks like
when you mess with stuff, like physical dimensions in a design or financial
stuff.

It's nice to have a real term for this sort of thing in "reactive document" or
"reactive programming" or what have you. Not so nice to realize my idea isn't
unique and brilliant. :)

~~~
Too
Sounds a bit like what they in .NET, especially WPF, call DataBinding? I.e a
control can display a mirror of a variable/property without much manual
intervention.

~~~
andrewflnr
They're similar, but I think Fern takes a pretty different perspective.

------
mcantelon
What's the difference between "reactive" and "interactive"? Just wondering if
we really need a new buzzword...

~~~
michaels0620
I think "Reactive" refers to Reactive Programming where the display values
change automatically when the input values change without the programmer
having to explicitly set them.

~~~
mcantelon
Ah. Thanks... that explains.

------
desigooner
This looks neat. Definitely worth a look for some educational stuff.

It's not clear on the webpage but this was released under a MIT license

~~~
sethish
If you jump into the [code
itself]([https://github.com/worrydream/Tangle/blob/master/TangleKit/T...](https://github.com/worrydream/Tangle/blob/master/TangleKit/TangleKit.js))
it mentions that it is MIT licensed.

------
latch
The graph is neat...I worry that the link is a UI paradigm that my mom or dad
simply wouldn't grok though...I'm not a particularly good son and I don't talk
to them much...so does anyone wanna test my theory out?

~~~
icebraining
It certainly breaks UI expectations. Maybe arrows above and below the number?

~~~
Semiapies
Slider inputs would work better.

------
gregwebs
This is a specific document use of reactive programming, a paradigm where
values are automatically updated when their dependencies change. Flapjax has
offered reactive javascript for a long time now: <http://www.flapjax-
lang.org/>

I think Flapjax didn't gain much traction largely because the website is ugly.
Of course the the other reason is that regular event binding tends to be a
good enough solution.

Some of the new client-side javascript solutions like knockout.js also offer
reactive capabilities.

------
ez77
Take a peek at all of the author's projects [1]. It's amazing, humbling,
depressing...

[1] <http://worrydream.com/>

~~~
Meai
Interesting, his idea about interactive pictures is what was my initial
frustration with programming. "Why can't I just make that stuff go?"

If you are into games, a solution to interactive picture generation by artists
would be akin to a particle editor. You let them define a few parameters and
valid ranges, then the artist supplies graphics in the right places: voila. A
good looking animation. Now restrict the end user to a few well defined ranges
of these parameters as well and you have an interactive picture.

------
gabriele
have I been missing something or this brakes every accessibility rules? how
can I "slide" without a mouse? It seems I can't even tab to the sliding
enabled elements.

~~~
phogster
It works perfectly fine on my android phone.

~~~
gabriele
indeed, but I couldn't find a way to make the sliders work without touching
the mouse. maybe there are some keyboard shortcuts that I couldn't find. also
I believe you should be able to tab over the page to reach any input element,
for consistency.

~~~
icebraining
I can't even scroll his main website[1] with the keyboard if I enable
Javascript. Thankfully it degrades nicely without the latter.

[1]: <http://worrydream.com/>

------
hackDaily
Very cool! This makes for some interesting UI ideas. Also, it's not often that
you see something this unique in the land of JS plugins. Good work.

------
kragen
If you like explanations like these, maybe you'll like the live explanation of
the Burrows-Wheeler Transform that I wrote a few years back:
<http://canonical.org/~kragen/sw/bwt.html>

I keep meaning to put it on the back of a better library so that it doesn't
hang up the page if you type a too-long string.

------
tomlin
I immediately find this useful. An app I am working on for a client allows for
the preparation, setup and intake of candidate interviewees. The app has a few
tools that help the administrator predict how many stations or interviewers
will be required based on other parameters, like time it will take to conduct
the interview process.

------
fomojola
Impressive. It would be really neat if you could tie a variable to an external
input (say, a WebSocket connection retrieving real-time data). Is the only way
to adjust values user input, or could I do something more complex where real-
time data is coming in and the document reacts to that as well?

------
balakk
Similar library from MS : RxJS:

<http://channel9.msdn.com/Events/MIX/MIX11/HTM07>

It's available for the CLR as well:

<http://msdn.microsoft.com/en-us/data/gg577609>

------
DanielRibeiro
Interesting: HN's duplicated post detection seems to be disabled (this was
posted only 9 days ago: <http://news.ycombinator.com/item?id=3101618>)

~~~
superchink
I think it allows reposting after a certain amount of time. I think this
actually makes sense, because just because people missed it the first time
doesn't mean it's not interesting.

------
maxwin
Pretty cool. I will definitely use it in my projects. Thanks for sharing.

------
hanskuder
This wasn't really impressive to me until I started playing around with the
dual pole filter. Awesome! Something like this should have been directly
embedded in my prof's DSP lecture notes.

------
gcv
Nice, a dependency graph library for JavaScript. I wrote something similar for
Clojure: <https://github.com/gcv/dgraph>

------
radarsat1
This is absolutely brilliant for educational uses. Even the front-page filter
example is something I plan to suggest to my prof for the DSP class he
teaches.

~~~
delinka
I'd like to suggest that in the case of audio, adding the ability to
experience changes aurally in addition to visually.

~~~
chwahoo
That page does allow you hear the changes. See the toggle-switch next to the
picture of the guitar.

~~~
delinka
"That page..." - which?

~~~
methodin
Turn on the guitar then go back up to the graph and change it. As you drag you
hear its effect on the audio.

------
zxw
This is pretty cool but it needs to have a more distinctive style. Maybe the
same as it is but green.

------
tamersalama
Any pointers to how it could be tied to a back-end rules engine?

------
hollandaise
Awesome, can you output to .pdf?

------
guyht
This is a really awesome idea

------
ThaddeusQuay2
It seems to me that this would be a good tool to use in an attempt at the
following code challenge, where Wikipedia would like to see article changes
and trends visualized. I saw their challenge yesterday, and made a note of it,
but am too busy on other projects, so I'm just putting the idea out there. Why
not make Wikipedia articles visually reactive?

[http://mediawiki.org/wiki/October_2011_Coding_Challenge/Real...](http://mediawiki.org/wiki/October_2011_Coding_Challenge/Real-
Time)

------
jQueryIsAwesome
This could be really useful in an app that helps people control their finances
(Register a product/service and then slide the quantity and price... and if
you integrate it with wallmart products/price -or something like that- i think
it would be one hell of an app)

edit: typo

------
crizCraig
Chrome dev tools should this type of UI in their CSS editor.

