The avatar for @mjbo
Max Bo
Software Engineer @ Canva, ex-Google | music, color theory, Australian democracy, situated software & generative art
Public
Hello, X
Edited
Jan 17, 2023
Fork of Network efficient SQLite querying from static file hosting.
•
1 fork
8 stars
2
Hello, X
Hello, Spectral.js - a permissibly licensed paint mixing algorithmHello, Mixbox - a paint mixing algorithmHello, Sparks - a typeface for creating sparklines in text
Hello, sql.js-httpvfs
Insert cell
Insert cell
Insert cell
db = SQLiteHTTPVFSDatabaseClient.open({
configs: [
{
from: "jsonconfig",
configUrl:
"https://phiresky.github.io/world-development-indicators-sqlite/split-db/config.json"
}
]
})
Insert cell
Insert cell
Insert cell
db.describe()
Insert cell
db
select * from wdi_country
Insert cell
db
select * from indicator_search
Insert cell
db
select indicator_code, short_name, year, value
from wdi_data, wdi_country
where
wdi_data.country_code = wdi_country.country_code
and wdi_data.indicator_code = ${selectedIndicator.indicator_code}
-- gnarly hack to get around the fact we can't interpolate lists for use with IN
and instr(${selectedCountries.map((c) => c.country_code).join(",")}, wdi_data.country_code) > 0
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
dbInline = SQLiteHTTPVFSDatabaseClient.open({
configs: [
{
from: "inline",
config: {
serverMode: "full", // file is just a plain old full sqlite database
url: "https://maxbo.me/chinook.db", // url to the database (relative or full)
requestChunkSize: 4096 // the page size of the sqlite database (by default 4096)
}
}
]
})
Insert cell
dbInline.describe()
Insert cell
dbInline
select * from tracks limit 30
Insert cell
Insert cell
sqlite = require("sql.js-httpvfs")
Insert cell
Insert cell
Insert cell
workerUrl = URL.createObjectURL(
new Blob(
[
await fetch(
"https://cdn.jsdelivr.net/npm/sql.js-httpvfs/dist/sqlite.worker.js"
).then((d) => d.text())
],
{
type: "application/javascript"
}
)
)
Insert cell
class SQLiteHTTPVFSDatabaseClient {
static async open({ configs, maxBytesToRead }) {
const worker = await sqlite.createDbWorker(
// you can also pass multiple config objects which can then be used
// as separate database schemas with `ATTACH virtualFilename as schemaname`,
// where `virtualFilename` is also set in the config object.
configs,
workerUrl,
wasmUrl,
maxBytesToRead // optional, defaults to Infinity
);

return new SQLiteDatabaseClient(worker.db);
}
}
Insert cell
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