Public
Edited
Sep 3, 2024
1 fork
Insert cell
Insert cell
mermaid`graph TD
api --> iso
api --> models
api --> server-shared
chatgpt --> models
core-server --> api
core-server --> dash
core-server --> hub
core-server --> models
core-server --> server-shared
dash --> chatgpt
dash --> cloudflare-worker
dash --> models
dash --> oas-examples
dash --> react
dash --> server-shared
hub --> chatgpt
hub --> dash
hub --> iso
hub --> models
hub --> oas-to-snippet
hub --> react
hub --> server-shared
iso --> models
jest-preset --> dash
jest-preset --> models
jest-preset --> server-shared
models --> chatgpt
models --> oas-extensions
models --> server-shared
models --> testing-utils
react --> api
react --> http-status-codes
react --> iso
react --> jest-preset
react --> metrics-sdk-snippets
react --> models
react --> oas-extensions
react --> oas-to-har
react --> oas-to-snippet
react --> server-shared
server-shared --> http-status-codes
server-shared --> json-schema-ref-parser
server-shared --> models
server-shared --> oas-extensions
server-shared --> ssri
testing-utils --> dash
testing-utils --> oas-examples
testing-utils --> types
`
Insert cell
dot`digraph G {
"api" -> "iso"
"api" -> "models"
"api" -> "server-shared"
"chatgpt" -> "models"
"core-server" -> "api"
"core-server" -> "dash"
"core-server" -> "hub"
"core-server" -> "models"
"core-server" -> "server-shared"
"dash" -> "chatgpt"
"dash" -> "cloudflare-worker"
"dash" -> "models"
"dash" -> "oas-examples"
"dash" -> "react"
"dash" -> "server-shared"
"hub" -> "chatgpt"
"hub" -> "dash"
"hub" -> "iso"
"hub" -> "models"
"hub" -> "oas-to-snippet"
"hub" -> "react"
"hub" -> "server-shared"
"iso" -> "models"
"jest-preset" -> "dash"
"jest-preset" -> "models"
"jest-preset" -> "server-shared"
"models" -> "chatgpt"
"models" -> "oas-extensions"
"models" -> "server-shared"
"models" -> "testing-utils"
"react" -> "api"
"react" -> "http-status-codes"
"react" -> "iso"
"react" -> "jest-preset"
"react" -> "metrics-sdk-snippets"
"react" -> "models"
"react" -> "oas-extensions"
"react" -> "oas-to-har"
"react" -> "oas-to-snippet"
"react" -> "server-shared"
"server-shared" -> "http-status-codes"
"server-shared" -> "json-schema-ref-parser"
"server-shared" -> "models"
"server-shared" -> "oas-extensions"
"server-shared" -> "ssri"
"testing-utils" -> "dash"
"testing-utils" -> "oas-examples"
"testing-utils" -> "types"
}`
Insert cell
// Observable changed how you use the neato layout, it used to be:
// neato`digraph G {
//
// https://observablehq.com/@mbostock/how-graphviz-thinks-the-usa-is-laid-out
// https://talk.observablehq.com/t/request-for-enhancement-improve-graphviz-support/8059
//
// Now, this is what mbostock's example is, but it fails here with
// "Layout was not done", whatever _that_ means
//
// Answer: It turned out that I needed to import `dot` from
// `"@mbostock/hello-viz-js"`, no idea why but that made it work
//
// but now you do:
dot.options({ engine: "neato" })`digraph G {
node[fontsize=9]
overlap=prism; //false, compress, ...
sep="+0.1";
"api" -> "iso"
"api" -> "models"
"api" -> "server-shared"
"chatgpt" -> "models"
"core-server" -> "api"
"core-server" -> "dash"
"core-server" -> "hub"
"core-server" -> "models"
"core-server" -> "server-shared"
"dash" -> "chatgpt"
"dash" -> "cloudflare-worker"
"dash" -> "models"
"dash" -> "oas-examples"
"dash" -> "react"
"dash" -> "server-shared"
"hub" -> "chatgpt"
"hub" -> "dash"
"hub" -> "iso"
"hub" -> "models"
"hub" -> "oas-to-snippet"
"hub" -> "react"
"hub" -> "server-shared"
"iso" -> "models"
"jest-preset" -> "dash"
"jest-preset" -> "models"
"jest-preset" -> "server-shared"
"models" -> "chatgpt"
"models" -> "oas-extensions"
"models" -> "server-shared"
"models" -> "testing-utils"
"react" -> "api"
"react" -> "http-status-codes"
"react" -> "iso"
"react" -> "jest-preset"
"react" -> "metrics-sdk-snippets"
"react" -> "models"
"react" -> "oas-extensions"
"react" -> "oas-to-har"
"react" -> "oas-to-snippet"
"react" -> "server-shared"
"server-shared" -> "http-status-codes"
"server-shared" -> "json-schema-ref-parser"
"server-shared" -> "models"
"server-shared" -> "oas-extensions"
"server-shared" -> "ssri"
"testing-utils" -> "dash"
"testing-utils" -> "oas-examples"
"testing-utils" -> "types"
}`
Insert cell
Insert cell
import { dot } from "@mbostock/hello-viz-js"
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more