Observable and Creative Coding | Hacker News Reader

Observable and Creative Coding

observablehq.com

157 pointsgrzm15 comments

Amazingly cool SVGs. Checked Obeservable and wondering about their pitch. I do quite some data exploration and visualization using jupyter, yet given my data is sensitive (privacy / sovereignty of the users/ study participants), it's impossible to upload them onto a server.

Seems their platform is nice for playing, yet unable to use for professional purposes?

On Observable, you have the option to keep notebooks and the data inside private.

You can give Starboard Notebook [0] a shot (a tool I'm building). It doesn't have reactivity which is as powerful as Observable - it's closer to normal web programming.

Here's an example notebook that shows p5.js use (with Python interop as a bonus): https://starboard.gg/nb/n3DYopT

It supports local or self-hosted editing and viewing [1] and is all open source.

[0]: https://starboard.gg [1]: https://github.com/gzuidhof/starboard-notebook and https://github.com/gzuidhof/starboard-cli

I have tried solving that problem https://observablehq.com/@tomlarkworthy/secret-manager

EDIT: actually you probably want https://observablehq.com/@tmcw/using-observable-with-a-local... which allows you to retreive data from localhost

If you want to share results from your Python analysis (such as visualizations, tables, datasets, files), check out what we're doing at Datapane. It's a Python framework and API for building and sharing reports.

Some people use it to build text-heavy reports which are more like observable notebooks [1], and some folks use it for more grid-like dashboards [2].

We have private support for hosting - or you can just export and self-host your HTML report using our open source library: https://github.com/datapane/datapane

[1] https://datapane.com/u/khuyentran1401/reports/interactive-pl...

[2] https://datapane.com/u/kaan/reports/stock-report/

What professional purposes are you imagining?

Cool! However the title is a bit misleading, I read "observable" as another adjective to "coding" (same as "creative") - "Creative Coding in Observable" would be clearer...

I wonder how long it takes from getting started with this (as a software engineer), to being able to create graphics like the svg examples presented here.

Mind-blowing. Especially those printed using a plotter.

It is not that hard. The notebooks are all open sourced and you can learn it just like the ways you learned HTML (view source).

As a software engineer, you also have an advantage of having the curiosity to explore and understand how it actually works.

https://observablehq.com/collection/@observablehq/notebook-f...

I am stunned by the fact that such seemingly complex and beautiful patterns we could see in the nature[0] can be generated with simple and elegant code, when the coder is well-versed in math and data structure.

Gets me thinking: our sophisticated world is created using layers upon layers of derived probabilistic algorithms, and the top layer may well be just one simple algorithm.

[0] https://observablehq.com/@makio135/confined-trees

You may like this pattern too:

    10 PRINT CHR$(205.5+RND(1)); : GOTO 10

There's a whole book about it!

https://10print.org/

Thank you This looks amazing!

This way of creating SVG with JS template strings is really nice:

  svg`<svg width="${w}" height="${h}">...
  ${array(500).map(i => `<circle 
    transform="translate(${w / 2}, ${h / 2}) rotate(${randInt(360)})"
    cx="0"
    cy="0" 
    r="${50 + i * 3}"
    fill="none"
    stroke="${palette[randInt(1, palette.length)]}"
    stroke-width="${randInt(2, 32)}"
    stroke-dasharray="${array(200).map(() => randInt(800)).join(' ')}"
  />`).join('\n')}
  ...

https://observablehq.com/@makio135/generating-svgs/4

Also, if anyone is doing creative/visual coding on another platform and tracking their work with Git, check out Git Gallery. It integrates with the code revisions to let you visually track changes: https://github.com/thatcort/git-gallery

I didn't know about Observable before. Seems like really powerful platform. Zelda WFC [1] mentioned in article is quite powerful.

[1] https://observablehq.com/@makio135/zelda-wfc

The artwork done in this article using math and code is magnificent. Truly impressive!

Reply on news.ycombinator.com