mvclark

Thanks very much. I really appreciate the feedback.

Another Blabr dev here. This is a really nice blab. We'd targeted Blabr for scientific computing (and, in particular, for STEM and conceptual modelling), but you've demonstrated that it also works well for other kinds of online, interactive computation.

Based on your work, it occurs to us that we need to improve some things for non-scientific applications, e.g., number formatting (dollars/cents, thousands separators). Please let us know if there are any other features that would help you do this kind of financial modelling work. Or any feedback in general. Thanks!

Here's a way to use an iframe to embed a blab in a web page:

https://news.ycombinator.com/item?id=10529079

For WordPress, you could use an iframe plugin.

Dev here. This is a follow up to a previous HN post:

https://news.ycombinator.com/item?id=10481316

Thanks for this great question. To answer it, a good place to start is with why we wanted to build Blabr.

Some months ago, we were working with interactive spreadsheets from the Space Math @ NASA website: http://spacemath.gsfc.nasa.gov/ILabs.html. These are all Excel spreadsheets, with interactive 'sliders' that let students experiment with a variety of mathematical models for planetary structure, heat flow and rotation among other modeled properties.

The author of the spreadsheets (Dr Sten Odenwald, NASA) wanted to create online versions of these modules. He wanted a way for students to easily access and interact with the modules directly in a browser, on a range of devices used in today's classrooms (e.g., Chromebook, iPad). Using Google Docs (Sheets) was a possibility, but it didn't have support for the kind of sliders and plots that the modules required.

But there was a more fundamental issue with spreadsheets: it's hard to understand the math. Mathematical formulas are cryptic because they (usually) use cell references, and are buried behind the results in cells. Consider, for example, the Excel file for the module "Basic Properties of Mars as a Planetary Body" (ILab11marsmodel.xlsx on the ILabs page above). It includes this formula for modeled center distance:

  =($J$5+$J$8*COS(6.242*(B8+16)/$J$11))

Something like this would be clearer:

  m = r + a*cos(6.242*(t+16)/p)

  r = slider "radius"
  a = slider "amplitude"
  p = slider "orbital-period"

Note also that m is a vector dependent on the time vector t. In the Excel spreadsheet, this is accomplished by:

1. specifying t values (17 of them) in column B.

2. specifying the formula in a cell of another column.

3. copying the formula (16 times) in the new column.

But how does the student know that the formula is the same for each row? That's very tedious to do by inspection. Typically, you look at the copied formulas and--based on a quick perusal of formulas and cell references--you assume that they are all the same formula. But this can be dangerous. We found that sometimes the formulas do differ as you move down a column. But what's worse, sometimes that's what the spreadsheet author intended, and other times it's a bug! For example, the spreadsheet author might have edited a formula and forgotten to copy it over all cells in a column.

We felt that there's got to be a better way for these kinds of science/engineering/math spreadsheets. And that was the focus of the Blabr design. For the Mars spreadsheet, here's the blab equivalent we came up with: http://blabr.io/?3df6e2368e89a8c3f780. (More examples: http://spacemath.github.io) The math is much easier to follow than it is in the Excel spreadsheet. Moreover, a vector formula is specified in one place, rather than copied across a column of cells.

In summary, we'd say that the following are reasonable criteria for using Blabr, rather than using a spreadsheet:

1. You want to create an online, interactive computational worksheet (web page) with sliders, tables, and plots.

2. A key focus of the worksheet is the math itself. You want the math to be easy to follow, and to edit.

These are typical criteria for a range of scientific computing applications (especially for education and mathematical modeling), which is why we're focusing Blabr (for now) on the notion of "scientific computing for the web".

Clearly there will be many use cases where a spreadsheet is more suitable than a blab. We'll give that part of the question more thought, and reply soon.

Thank you. Easily setting up "tunable" parameters (e.g., sliders) in a computation was a key requirement for Blabr.

For example, it is very instructive/insightful to adjust the variable k in this compressive sensing blab to see the abrupt transition between sparsity and non-sparsity: http://blabr.io/?e8a066234715f21c21fd

Regarding packaging a blab: yes, it's very simple to share a blab on the web. After editing the blab, just click "Save" at the top right. This will save the blab to a Github Gist. You'll then get a link to the blab, like the one above (for the compressive sensing blab). Share the link with anyone. There are two ways to save a blab:

1. Anonymous Gist - easiest way, no need for GitHub account, but no revision control (new gist for each save).

2. Gist under your GitHub username - full revision control (gist revision each time you edit and save your blab); can make gist public or private.

Currently, no. But this is our #1 priority. We're aiming for a simple embedding solution, e.g., 1) an html div with gist id attribute (plus loading a JavaScript file); and 2) a WordPress plugin. Stay tuned...

We think so, too. Here's an example of a blab gallery based on modules from the popular Space Math @ NASA educational website: http://spacemath.github.io

We would love to work with educators to create interactive blab galleries for math and science.

Yes - STEM is a primary focus of Blabr. In fact, an initial application we had in mind was to convert interactive Excel spreadsheets from the Space Math @ NASA website (http://spacemath.gsfc.nasa.gov). We have several examples here: http://spacemath.github.io. These are all for educational purposes.

The advantage for students is that they can view the modules directly in a browser (desktop, Chromebook, iPad, etc.), and interact with the modules immediately. No need to download spreadsheet documents that require compatible spreadsheet software.

However, we also see Blabr as a candidate in other science/engineering areas. For example, these blabs are for phase locked loop design:

* http://blabr.io/?01bec2bf0256d05f5b2d. * http://blabr.io/?0d6aa64641772d438350

We think that these are viable alternatives to using Excel. They could serve as online, interactive data sheets for semiconductor company websites.

Thanks! By the way, if you click "Doc & Examples" (at bottom of blab), you'll see several of these dynamic demos under the "Demos" column.

For the main demo on the home page, the editable table returns a vector x containing the values of the editable column.

You could also have it return the computed values (kxx). Here's an example of how to do this: http://blabr.io/?70b9f256088478e4d861

Edit the first column (x) and you see both x and y (x*x) displayed in the computation eval box. Down arrow in the last cell extends the table. Backspace in an empty cell removes the row.

For more table examples, see links in http://blabr.io/?0a248098997a6f95635c.

Blabr currently supports pasting a string of values (space-separated, or comma+space-separated) into a table column. (Conversely, if you copy a table column to the clipboard, its values are stored in the clipboard as a comma+space-separated string.) We plan to expand this functionality to support other import/export formats, including CSV and JSON.

Meantime, you can use the numericjs library's parseCSV function. Here's a quick example: http://blabr.io/?9219b0773716623aef5e

Developed a demo scripting tool ourselves. We plan to make it available for anyone to script their blab demos.

Here's an example of a demo script: https://gist.github.com/mvclark/0a248098997a6f95635c

Thanks very much! Please let us know if you have any questions or feedback. We have several new blab examples to share, too.

Martin and Gary - Blabr developers

Beautiful, fast interactive graphics. Would be good to have link to source on the page.

Nice post. Another one I find useful is to define your own log function, e.g.,

function log(x) {console.log(x);};

You'd use log instead of console.log for debugging your code. Then, to turn off logging, you set

function log(x) {};

or have a boolean switch in log function to do a similar thing. You could even use this approach to define debug levels to enable/disable.

Setting n=12 for mass/springs shows some pretty nice dynamics in animated d3 graph. Loving the new in-code links, too.

Reposting after significant improvements.

Yes, we want to add support for editing JavaScript directly in Puzlet Web Lab (it's particularly useful for copy/pasting snippets). We've found, however, that writing scientific computing code is much more succinct in CoffeeScript. Moroever, it is fully compatible with all JS libraries.

Note also that you can see generated JS by clicking the "JS" toggle button in Puzlet Web Lab.