3 ms·
I would have loved something like this while learning to program as well. I mean ... the Ruby REPL was fun, but this sort of thing is just so much more tactile
by jashkenas 9y ago
I would have loved something like this while learning to program as well. I mean ... the Ruby REPL was fun, but this sort of thing is just so much more tactile and visual.
We haven't had time to produce as many demo notebooks as we might have liked, but these notebooks really aren't D3-specific in the slightest. They're a reactive flavor of JavaScript, and anything that produces a value or can be rendered to the DOM will work.
For example, here are a whole mess of Plotly charts: https://beta.observablehq.com/@jashkenas/plotly-js https://beta.observablehq.com/@jashkenas/plotly-js
Here are some (wild) WebGL, Three.js and regl sketches: https://beta.observablehq.com/collection/webgl https://beta.observablehq.com/collection/webgl
And here are some simple native inputs you can use to control your sketches: https://beta.observablehq.com/@jashkenas/inputs https://beta.observablehq.com/@jashkenas/inputs
Remember — a "slider" here isn't anything special. It's just a chunk of DOM that produces a number as a value. It can be replaced with anything else you can imagine that produces a number as a value. There's no API there ;)
- ryanianian 9y agoOh that's cool I thought there were special hooks with D3. The native inputs demo seems really compelling especially in a learning environment. I'll definitely play with this and bring it into my next mentoring group meeting. (They'll be so glad to get away from scratch!) One cool thing that Swift playgrounds let you do is advance program state through loops and other flow-control line-by-line using a slider. I think they have to have cooperation with the compiler/runtime to make this happen. (I'm also not sure how truly useful it is after a few days of learning the basics.) I suppose you could do something similar with the native inputs but not using native syntax. What I'm thinking would be a massive undertaking I realize - it's cool that this offering generates so many "ooh and what else" ideas.
- jashkenas 9y agoYes, it's absolutely worth exploring further — and we definitely have notions for ways to further expose and make interactive the running state of the notebook. But for starters: You can do something similar to expose the internal state of loops and flow-control constructs by just using JavaScript's generators. Here's an extremely simple example that slowly yields the value of a loop's `i` variable: https://beta.observablehq.com/@jashkenas/flow-control-demo-with-generators https://beta.observablehq.com/@jashkenas/flow-control-demo-w... If you remove the delay, it'll instead yield `i` at 60fps.
- llimllib 9y agoThe sliders on https://beta.observablehq.com/@mbostock/clifford-attractor-iii https://beta.observablehq.com/@mbostock/clifford-attractor-i... don't work for me, the sliders don't move. If I double-click a cell and edit the value, I get an updated graphic, but the sliders won't move. Chrome 63.0.3239.132, OS X 10.13.3
- jasoncrawford 9y agoI had the same problem and it turned out to be because I had the experimental Strict Site Isolation flag set in Chrome. Try turning that off.