10 ms·
Tangle: a JavaScript library for reactive documents
- Dirlewanger 13y agoSomething like this is perfect update the horde of egregiously out-of-date STEM examples littered across academics' websites that all look just like this sans fancy JS.
- likeclockwork 13y agoIt seems like it'd be easy to rig this kind of thing up with Angular.
- pmtarantino 13y agoI can imagine this in the science books of the future. I usually check with a few cases to see if I understand the subject correctly, but sometimes I have enough samples to test. This would be great: the student can see the default example, learn the subject and then try to check if he understood it correctly seeing how it behaves changing the parameters!
- _delirium 13y agoIn a physics course I took some years ago, we used Mathematica notebooks for that. The professor had written out explanations of a few subjects we were studying in the style of tutorial notes or a paper handout, but within Mathematica so you could change the parameters and see updates in real time.
- jjsz 13y agoSo which one do you recommend for a first year CS student Mathematica or Tangle?
- count 13y agoPedagogy aside, Mathematica will serve them better from a 'other people use this' perspective over the years.
- thauck 13y agoAt this point, I might argue for IPython Notebook.
- jjsz 13y agoThe question I was going to make has been asked here: http://stackoverflow.com/questions/17483271/is-there-a-way-to-create-interactive-plots-a-la-d3-in-ipython-notebooks http://stackoverflow.com/questions/17483271/is-there-a-way-t...
- hsparikh 13y agoPrecisely. In physics, testing extreme cases and boundary conditions is one of the first ways to get a better understanding of a system. Tangle can be a great tool to empower learners to do this visually.
- nileshtrivedi 13y agoI am currently working on interactive 2-d physics simulation in the browser with much the same ideas. On the desktop we have apps like KDE Step but I haven't found anything similar for the web. Currently I have particles,disks and boxes working with gravitation, coulomb and custom-defined forces. I also implemented Runge-Kutta method of integration instead of horribly inaccurate Euler's method. You can manipulate the objects, their parameters and laws even while the simulation is running. I need to add basic collision detection and things like springs, links, and linear/angular motors and embedding the simulation as a widget before polishing it up and releasing. Email me in case this sounds interesting and you would like to stay updated.
- nkuttler 13y agoThis looks very interesting even if I can't think of a use case yet. It would be nice to see a license file though.
- lccarrasco 13y agoYes, a quick check through the source files indicates a MIT License, though it'd be better if it was made clear in a LICENSE file. This project looks great, I hope it takes off.
- iso8859-1 13y agoIt's a couple of years old... But at least Angular is taking off, which has the same declarative principle...
- memset 13y agoI remember seeing this several years ago, and was thoroughly impressed. The gentleman who wrote this library used it in an interactive essay called "Ladder of Abstraction." [1] Here is its previous HN discussion: [2] [1] http://worrydream.com/LadderOfAbstraction/ http://worrydream.com/LadderOfAbstraction/ [2] https://news.ycombinator.com/item?id=3099595 https://news.ycombinator.com/item?id=3099595
- MWil 13y agoI thought this was a few years old as well but I'm happy to be reminded of it. I really enjoyed this http://worrydream.com/#!/ExplorableExplanations http://worrydream.com/#!/ExplorableExplanations
- DavidChouinard 13y agoThe gentleman who wrote it is Bret Victor. I highly recommend this talk [1] by him (500k views), he's a true visionary. [1] https://vimeo.com/36579366 https://vimeo.com/36579366
- mtrimpe 13y agoAlso consider reading his seminal essay called "Magic Ink" [1] and afterwards take a look at the publication date and try to remember where the web was back then. [1] http://worrydream.com/MagicInk/ http://worrydream.com/MagicInk/
- joshdance 13y agoI have watched this video a few times and periodically revisit it. Sometimes we get to far into the woods and need to be reminded where we can go writing software.
- kolodny 13y agoJust watched that talk... amazing. Do any of the tools that he uses in that talk exist?
- doorhammer 13y ago
- deleted 13y ago[deleted]
- hsparikh 13y agoWe are wholly inspired by Bret's work, and are currently playing around with the tangle library to help students visualize the concept of area, perimeter, and volume. Here is a preview: http://tuvalabs.com/resources/area/ http://tuvalabs.com/resources/area/ We also plan to open source this code in due time. Ignore the mess please.
- bajsejohannes 13y agoA suggestion for the visual area widget: Count the boxes for the user. So in the first box you'd write 1, the second 2, etc. Then it's easy to verify that the numbers are indeed a counting (they increase by 1) and that the calculated are indeed checks out. I'd write the numbers in gray so they don't dominate the image.
- hsparikh 13y agoThanks for the feedback. There is a lot of work that still needs to be done to improve the UI for these tools, but our goal is to build a library of such visual tools for tens of relevant topics.
- tonylemesmer 13y agoDoes it work with touch? (I do not have a touch device)
- hsparikh 13y agoThe numbers should be draggable via touch.
- mcintyre1994 13y agoThey'd be quite small touch targets assuming you wanted to view the shape and calculation as you change them. Have you considered making the shapes resizable by dragging?
- dxbydt 13y ago
- emhart 13y agoI'm in the process of writing my first serious academic paper, and while I'll still put the traditional document together, I think I'll try to make a second version using tangle where appropriate. Very cool, thanks for pointing this out.
- bpierre 13y agoThe GitHub repo https://github.com/worrydream/Tangle https://github.com/worrydream/Tangle
- kozhevnikov 13y agoBar the obvious use in scientific texts I can imagine this being useful in client facing data-driven BDD tests, i.e. tools like Concordion [1], FitNesse [2], etc. [1] http://www.concordion.org/ http://www.concordion.org/ [2] http://fitnesse.org/ http://fitnesse.org/
- WickyNilliams 13y agoI saw this a few years back and was seriously impressed with the idea, not just as a JS library but the concept of interactive (or reactive as Brett calls them) documents. This is where HTML should be going as a form of media, armed with the question, "what can HTML do that other forms of media cannot?" But a lot has changed since then - has this been superseded by client-side libraries with two-way data binding? e.g. angular or knockout. It would probably be quite trivial to duplicate the functionality in either of those libraries.
- RussianCow 13y agoIf what you're looking for is exactly what the example on the website shows (say, an interactive textbook), then I would just use Tangle because it's ready to go without much effort on your part. But if you wanted more flexibility, then of course you should use a move advanced library like Angular.
- jjsz 13y agoHow long would you say it'll take for it to be implemented in AngularJS?
- WickyNilliams 13y agoI don't think it would be a big ask. Dependency tracking/resolution and two-way data binding is baked in, so you'd only have to create some ui components (e.g. a slider) to allow for altering of the values and everything else would just work. Though if you wanted to do it properly you'd probably encapsulate the functionality in a directive of some sort.
- dylanhassinger 13y agoNeat but Knockout.js does this really well, seems to be getting more traction these days. http://knockoutjs.com http://knockoutjs.com
- emehrkay 13y agoThis is very interesting. As an aside: MooTools doesn't get enough love in the JS community. His Live Coding stuff was done with it (http://www.youtube.com/watch?v=-QJytzcd7Wo http://www.youtube.com/watch?v=-QJytzcd7Wo) *it being MooTools and this library
- ppradhan 13y agothis is inspired! I like it.
- deleted 13y ago[deleted]
- pallandt 13y agoVery neat, reminds me of Mathematica Notebooks.
- aroberge 13y agoAfter a previous discussion on HN, I used it as an experiment to visualize the convergence of Fourier and Taylor series http://personnel.usainteanne.ca/aroberge/ http://personnel.usainteanne.ca/aroberge/ I think it would be really neat to have an entire mathematical textbook interactive in this fashion.
- reeses 13y agoThere's at least one textbook based on Wolfram's proprietary CDF format. http://www.wolfram.com/mathematica/customer-stories/developing-interactive-textbooks-with-cdf.html http://www.wolfram.com/mathematica/customer-stories/developi... (I like your visualization page – a nice way to explain that part of wavelet compression.)
- gavinpc 13y agoWow, you taught me something. I've heard of the "Fourier transform" many times and it never clicked what it was for. Thanks!
- davewasmer 13y agoJust an FYI, but your choice of series colors for your graph are very difficult to differentiate as a colorblind person. Might consider changing one of the colors.
- aroberge 13y agoCould you possibly check now? Also, there are two more interactive pages that are "hidden": http://personnel.usainteanne.ca/aroberge/mirror.html http://personnel.usainteanne.ca/aroberge/mirror.html and http://personnel.usainteanne.ca/aroberge/single_lens.html http://personnel.usainteanne.ca/aroberge/single_lens.html
- pjmlp 13y agoReally nice. Rediscovering Lisp and Smalltalk interactive environments.
- iso8859-1 13y agoAccording to Bret in his "Inventing on Principle", a REPL is not enough interactivity :P
- seanmcdirmid 13y agoYa, parent is just living in the past.
- pjmlp 13y agoParent is an old dog that gets amazed how little HN young kids know about computer history.
- seanmcdirmid 13y agoParent really thinks Smalltalk had the capabilities, realized or not, to do the demos that Bret did in Inventing on Principle. Smalltalk and Lisp have never shown the capability, and in fact just can't do it. Time travel was just never a big thing there. The Smalltalkers do this all the time; I had even Ralph Johnson poo hoo my 2007 live programming talk. But you get the feeling that these people really think nothing new can be invented after the 80s. They say "Smalltalk" already does this! And you say "show me" and then they just shut up.
- pjmlp 13y agoWell for starts it is a bit hard to get a Xerox system at the shop around the corner. Second, I mentioned it was a good idea to follow these ideas. My only point is that they aren't new and many live programming advocates sell them as if they were new.
- lightcatcher 13y agoAlthough Bret Victor's ideas behind reactive documents are interesting, I think the first example on this page (regarding the state parks) is particularly unfriendly and difficult to gain any understanding from. My views very closely aligns with (and was influenced by) Evan Miller's blog post [1] on the top that I highly recommend you read. The overall gist is that equations are actually the friendliest way to spread information about the relationships between several (ie more than 3 or 4) variables. The final paragraphs of Evan Miller's essay address this particular webpage (the Tangle demo) in particular. [1] http://www.evanmiller.org/dont-kill-math.html http://www.evanmiller.org/dont-kill-math.html
- hsparikh 13y agoHave yet to go through Evan's post, but as you point out, the equations might be the most accessible way to truly comprehend relationships between 4 or more variables. However, libraries like Tangle are powerful tools to visualize and understand relationships between 2-3 variables.
- dvt 13y agoMaybe visualize, but understand? Doubtful. I don't think the computational overhead justifies a complex subsystem instead of just something like "x = cos(theta)" without some fancy rotating control.
- davorak 13y agoMy take on the best way to write/use such a document would be first present the math, then a reactive example. The user should read the math formulate a hypothesis/visualization/understanding of the system then use the reactive document to verify or falsify the concept. This does not remove mathematical understanding from the document, but adds an opportunity for quick verification of an understanding. And according to my vague understanding of learning and neural connection getting quick feedback is key to forming strong connections.
- glurgh 13y ago
- angersock 13y agoMan, I would've loved something like this going through school--the final example of the performance of an analog filter and watching the root-locus plot change was really really cool.
- hcarvalhoalves 13y agoStuff like this, that explores the document nature of HTML, should be standard on the web, instead of the current crazy trend of reinventing desktop applications in the browser.
- fiatjaf 13y agoWhen I read this a year ago I was very impressed, but now I think (1) this was superseeded by Angular and stuff alike and (2) this is not good user experience, this is experience to experimenters, a restrict kind of user, very restrict. For the common user maybe a simple chart is better.
- nilkn 13y agoThis is a cool implementation, but the idea is not new. In fact, the majority of front-end JavaScript libraries right now are more or less aiming to do the same thing in their own way: AngularJS, Meteor, Ember, KnockoutJS, Bacon ... even d3js. The list goes on. These are all attempts at implementing reactive programming in the web, but they have different data and data binding models, and they may have different front-end goals (e.g., Ember tries to keep a 1-1 correspondence between document state and URLs). There's also Elm, which implements a variant of reactive programming known as FRP.
- hcarvalhoalves 13y agoI don't think AngularJS, Meteor or Ember are close to this though. The result might be the same, depending on the use case, but the philosophy isn't. AngularJS for instance looks like more about components and data-binding (makes me remember the old Delphi days) in an attempt to use the browser as an application framework than "interactive documents".
- nilkn 13y agoThose libraries are ultimately just more sophisticated versions of this on a bigger scale. Meteor in particular takes reactivity to a whole new level: changes are propagated immediately not only to you but to other users as well (if appropriate to the application, e.g., a chat room). The philosophy is more or less the same in all cases: make the page react immediately to what the user is doing without a full refresh. Some of those libraries take it further and tie the page directly to the application back-end or database if desired. I think the main appeal of something like Tangle is to get the benefits of reactive programming while using only a very lightweight and simple library. It provides a very clean interface to a subset of the functionality.
- arms 13y agoVery cool. This is one of those things that makes me wonder "where can I use this next?" Even more impressive is that this is apparently a few years old.
- deleted 13y ago[deleted]
- HNLogInShit 13y agoWhatever "reactive documents" are... Oh, and before "you're posting too fast"... FUCK YOU, HN.
- arikrak 13y agoHe has some great stuff on the site, and I'm thinking of using Tangle to help teach math, but I'm wondering if letting people drag numbers is really so helpful?
- hrktb 13y agoFor a mortgage simulation, or any kind of matrix type calculation, dragging the numbers might be simpler and easier to understand than having a standard form (even with seamless inline text input)