HN Explorer

15 comments

[ 1.9 ms ] story [ 47.6 ms ] thread
cube2222
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.

cltsang
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

peterknaggs
The artwork done in this article using math and code is magnificent. Truly impressive!
kgarten
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?

cltsang
On Observable, you have the option to keep notebooks and the data inside private.
protoduction
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

pea
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/

momo_O
What professional purposes are you imagining?
rob74
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...
liminal
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