{"id":17772964,"url":"https://github.com/radames/jupyter_observable_widget","last_synced_at":"2025-04-01T16:18:07.990Z","repository":{"id":137671820,"uuid":"245298286","full_name":"radames/jupyter_observable_widget","owner":"radames","description":"Experiment embedding Observablehq notebook inside a jupyter notebook ","archived":false,"fork":false,"pushed_at":"2020-07-24T01:11:55.000Z","size":31,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-24T10:51:32.616Z","etag":null,"topics":["jupyter","jupyter-notebook","observable-notebook","observablehq"],"latest_commit_sha":null,"homepage":"https://observablehq.com/@radames/umap-jupyter-notebook-scattergl","language":"Jupyter Notebook","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/radames.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-06T00:44:04.000Z","updated_at":"2023-03-08T23:02:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"c0294128-4c05-42cd-9628-63427ca8fbf0","html_url":"https://github.com/radames/jupyter_observable_widget","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radames%2Fjupyter_observable_widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radames%2Fjupyter_observable_widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radames%2Fjupyter_observable_widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radames%2Fjupyter_observable_widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/radames","download_url":"https://codeload.github.com/radames/jupyter_observable_widget/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246668904,"owners_count":20814744,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jupyter","jupyter-notebook","observable-notebook","observablehq"],"created_at":"2024-10-26T21:41:46.590Z","updated_at":"2025-04-01T16:18:07.974Z","avatar_url":"https://github.com/radames.png","language":"Jupyter Notebook","funding_links":[],"categories":[],"sub_categories":[],"readme":"# UMAP + Jupyter Notebook + ScatterGL \n[![Open In Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/drive/1KGhHdfbCzmlt4HTGPy7P9XOa1EloPkmf#scrollTo=1BfZota4SLpH)\n\nOrignal notebook here https://observablehq.com/@radames/umap-jupyter-notebook-scattergl\n\nInspired by [Thomas](https://observablehq.com/@ballingt) notebook [visualize-a-data-frame-with-observable-in-jupyter](https://observablehq.com/@observablehq/visualize-a-data-frame-with-observable-in-jupyter)\n\nCould the dataframe be re-rendered inside jupyter and have observable updated the visualization?\n\nYou can read a discussion on the topic [Observable Forum](https://talk.observablehq.com/t/jupyter-observable/2912)\n\nHere is the [Jupyter notebook source code and preview](https://colab.research.google.com/drive/1KGhHdfbCzmlt4HTGPy7P9XOa1EloPkmf#scrollTo=1BfZota4SLpH) on google collab. Please change parameters and re-run cells to see it in action.\n\n![](https://static.observableusercontent.com/files/ed5cfb60c553495d60d2dabd62e1c40075ba1648dcadf237d67eb36e4ac3d1afa6cc600ee5690b4c96d50d7d743b4c481c4002cf6afee34e6d79ae0e73ff9473)\n\n### How it works\n\nThis Observable notebook is used as a reference vizualization. Using ScatterGL to plot 2D/3D points as a scatter plot.\n\nYou have to pass an array of 2D or 3D points to the HTML embed code. Then use Observable runtime to redefine the variables from your jupyter notebook.\n\nHere is the jupyter python code with redifines. The data is serialize and dumped as string into the embed code.😛    \n\n```python\ndef make_viz_embed(data, colors = [], labels = []):\n  embed = f\"\"\"\n    \u003cdiv id=\"observablehq-0842ed87\"\u003e\u003c/div\u003e\n    \u003cscript type=\"module\"\u003e\n    import {{Runtime, Inspector }} from \"https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js\";\n    import define from \"https://api.observablehq.com/d/8bcaee9a68db388d.js?v=3\";\n    const inspect = Inspector.into(\"#observablehq-0842ed87\");\n    const notebook = (new Runtime).module(define, name =\u003e (name === \"containerEl\") \u0026\u0026 inspect());\n    notebook.redefine('points', {json.dumps(data)})\n    notebook.redefine('colors', {json.dumps(colors)})\n    notebook.redefine('labels', {json.dumps(labels)})\n    \u003c/script\u003e\n  \"\"\"\n  return embed\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fradames%2Fjupyter_observable_widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fradames%2Fjupyter_observable_widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fradames%2Fjupyter_observable_widget/lists"}