I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Public
Edited
Sep 20, 2024
Importers
2 stars
Visualize ERD SQLITE3 (WIP)
Also listed in…
Reactive Widgets and Inputs
visualizeSqlite(db, { showAttributes, showFKs, returnStr: false })
db = SQLiteDatabaseClient.open(
file?.url() || FileAttachment("chinook.db").url()
)
db.describeTables()
async function visualizeSqlite(
db,
{ showAttributes = true, showFKs = true, returnStr = false } = {}
) {
const tables = (await db.describeTables()).map((d) => d.name);
const fks = (
await Promise.all(
tables.map(async (tableName) => {
const fk = await db.query(
`SELECT * FROM pragma_foreign_key_list('${tableName}')`
);
return fk.map((fkResult) => ({ tableFrom: tableName, ...fkResult }));
})
)
).flat();
const attribNames = await Promise.all(
tables.map(async (tableName) => {
const columns = await db.describeColumns({ table: tableName });
return { tableName, columns };
// return columns.map((c) => ({ tableName, ...c }));
})
);
// ${fks
// .map(({ tableFrom, table, from }) => `${tableFrom} --> ${table} : ${from}`)
// .join("\n")}
// ${tables.join("\n")}
// ${attribNames
// .map(({ tableName, name, type }) => `${tableName} : ${name} `)
// .join("\n")}
const str = `erDiagram ${
showFKs
? "\n " +
fks
.map(
({ tableFrom, table, from }) =>
`${tableFrom} }o--|| ${table} : ${from}`
)
.join("\n ")
: ""
}
${attribNames
.map(
({ tableName, columns }) => `${tableName} {
${
showAttributes
? "\n " +
columns
.map((c) => `${c.databaseType.split("(")[0]} ${c.name}`)
.join("\n ")
: ""
}
}`
)
.join("\n ")}
`;
return returnStr ? str : mermaid`${str}`;
}
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.
