unoficial api notebooks graph visualizer

in case you ever need an index page for all the notebooks you’ve forked or created…

just plugin your login name in ?userName param or input field. Here is @fil’s

use it as one pager for navigating your notebooks, or download it as svg and share it with your colleagues. all the notebook graph nodes are properly linked

:hugs:

1 Like

I refined notebooks stats display and added Revisions count to the userBio for better idea of how busy devs get on this sys

@tom you’ve been busy past 10 month? :slight_smile:

I just find it interesting comparing how other devs code in the wild. Pulled up @tom’s notebooks stats just to see what his days are like. Looks like much more reserved in terms of created notebooks and posted revisions. I am with you on quality vs. quantity there.

Will add some notebooks tags display next since this site doesn’t provide them yet and I was curious what other devs code about

P.S.: also I hope you guys can add some of those user bio stats :point_up_2: in the next user dash update whenever that happens. I’d like to see more than just a list of notebooks and a link to github repos when I click on dev profiles

this is actually the best part of my notebooks visualizer. I just wish we had better solution to get around cors issues for api calls so everyone can see their work on this site like this:

not bragging! sharing is caring :hugs:

some new prelim. notebooks api explore share. I know tag clouds are so 1999 but I like 'em :slight_smile: https://beta.observablehq.com/@randomfractals/notebooks?userName=randomfractals#codesAbout


what’s your dev story? mine is still in the works… hit us up! we up for hire :slight_smile:

P.S.: also so wish this site added decent notebooks tagging features on publish.

@mbostock & @tom? when ???

I added new collections info, switched to using more responsive Glitch proxy for those observable api calls, added more prominent Get Stats user input, and refined notebooks document section titles. might add forked from others info to the notebooks graph next.

Do take it for a spin and see how you like this unofficial notebooks api explorer:

:hugs:

we tried :slight_smile: How to get a cell’s name?

I think the only good thing that came out of that thread was me adding named cells and notebook functions parse to this guy. see #notebookNodes:


:hugs:

I know this is starting to look like some wicked inception but I’ve decided to refactor my unofficial Observable api notebooks explorer and created new notebook info js notebook for specific notebook info display:

Notebook Info Visualizer extracts user bio, notebook functions, named and markup cells, and provides plain notebook cells code view:

I’ll add notebook graph today for easy linking to named cells and functions in a notebook.

notebooks.js api is still in the Notebooks Visualizer, if you want to import some of those api hooks and use it elsewhere for collection master notebooks like I’ve done for Chicago Crimes EDA, or for other user/notebook introspection means.

You can play with them to check your Observable user stats or notebook info using this collection:

Have fun!

:hugs:

I’ve updated my unofficial observable api notebook inspector to show notebook cell stats and linked notebook graph for named cells, functions, and imports. All in under 100 lines of code with docs :slight_smile:

https://beta.observablehq.com/@randomfractals/notebook-info

Can be used for quick lookup of imported functions from other notebooks. For example, here are the stats and notebook graph for the popular inputs notebook @jashkenas created:

it gets more interesting if you try large observable JS notebook w/plenty of other tricks imports. Here is what my Hello, NLP! notebook looks like in this notebook inspector:

P.S.: could be fun to update that graph with links to dependent cells. I’ll leave it for some other time.

Have Fun!

:hugs:

Also, no reason this Notebook Inspector can’t be converted to a custom Chrome dev extension for navigating observable notebook code similar to how most front-end frameworks have extensions for custom DOM inspection, data binding and events propagation tracking, etc :slight_smile:

I could give that a shot if there is interest in a tool like that from this dev community.

:thinking:

see vue-devtools for example: GitHub - vuejs/vue-devtools: ⚙️ Browser devtools extension for debugging Vue.js applications.