Published
Edited
Apr 5, 2021
3 forks
22 stars
params = new URL(location).searchParams
initial_url = params.get('url') || 'https://github-to-sqlite.dogsheep.net/github'
tables = [...new Set(fks.map(x => x.table_from))]
columns = fks.map(x => ({ table: x.table_from, column: x.column_from }))
sql = `
select
sqlite_master.name as table_from,
fk_info.[from] as column_from,
fk_info.[table] as table_to,
fk_info.[to] as column_to
from
sqlite_master
join pragma_foreign_key_list(sqlite_master.name) as fk_info
order by
sqlite_master.name
`;
fks = await fetch(`${form_input.database_url}.json?sql=${encodeURIComponent(sql)}&_shape=array`).then(r => r.json())
data = {
let nodes = new Set();
let edges = new Set();
fks.forEach(fk => {
nodes.add(fk.table_from);
nodes.add(fk.table_to);
edges.add(`${fk.table_from}:${fk.table_to}`);
});
return {
"nodes": Array.from(nodes).map(n => ({id: n})),
"links": Array.from(edges).map(e => ({source: e.split(':')[0], target: e.split(':')[1]}))
}
}
drag = simulation => {
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
d3 = require("d3@5")
import {form} from "@mbostock/form-input"
dot = require("@observablehq/graphviz@0.2")
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.
