Software engineer, available for freelance work! • he/him/his
import { DatasetteClient } from '@asg017/datasette-client-core'
faviconDB = DatasetteClient(
'https://datasette-render-images-demo.datasette.io/favicons'
)
faviconDBTable = faviconDB.table.options({
renderCell: (value, column) => {
if (!column.endsWith('_png')) return;
const url = encodedBase64ToUrl(value.encoded, 'image/png', invalidation);
return html`<image src=${url}>`;
}
})
viewof mozillaIcons = faviconDBTable`
SELECT
data as image_png,
icon_url
FROM favicons
WHERE icon_url LIKE "%mozilla%"`
mozillaIcons
faviconDBTable`SELECT data as image_png, icon_url FROM favicons WHERE icon_url LIKE "data%"`
videosDB = DatasetteClient('https://ds.agarcia.dev/pronunciationmanual/videos')
videosDBTable = videosDB.table.options({
renderCell: (value, column) => {
if (!column.endsWith('_mp4')) return;
const url = encodedBase64ToUrl(value.encoded, 'video/mp4', invalidation);
return html`<video src=${url} controls width=400>`;
}
})
videosDBTable`SELECT name, video as video_mp4 FROM videos`
Inspector = (await require('@observablehq/inspector')).Inspector
// The Observable notebook Inspector wasn't really meant to be used this way (it's usually used alongside the Observable runtime), but hey, it works!
inspect = value => {
const i = new Inspector(html`<div>`);
i.fulfilled(value);
return i._node;
}
jsonDB = DatasetteClient('https://datasette-json-html.datasette.io/demo')
jsonDBTable = jsonDB.table.options({
renderCell: (value, column) =>
column.endsWith('_json') && inspect(JSON.parse(value))
})
jsonDBTable`
select
rowid,
package,
url,
json_object('package', package, 'url', url) as pkg_json
from packages`
jsonDBTable`select
json_array(1,2,3,4,5) as arrays_json
union all
select json_array("spongebob", "fairly", "odd", "parents")`
trumpMentionsDB = DatasetteClient(
'https://twitter-mentions-trump.herokuapp.com/trump_mentions'
)
import { tweet } from '@mbostock/tweet'
trumpMentionsDBRenderTweetsTable = trumpMentionsDB.table.options({
renderCell: (value, column) =>
column.endsWith('_tweet') &&
html`<div style="max-width: 200px;">${tweet(value)}`
})
trumpMentionsDBRenderTweetsTable`
SELECT
id as trump_tweet,
account_type,
state,
party,
mention
FROM mentions
WHERE mention = "BetsyDeVos"`
trumpMentionsDBRenderTweetsTable`select id as trump_tweet, account_type, state, party, mention from mentions where mention like "%Ivanka%" limit 1`
powerPlantsDB = {
await visibility();
return DatasetteClient(
'https://global-power-plants.datasettes.com/global-power-plants'
);
}
powerPlantsDBClusterMap`select * from [global-power-plants] where country_long = "Vietnam"`
viewof mexPlants = powerPlantsDBClusterMap`select * from [global-power-plants] where country_long = "Mexico" `
mexPlants
viewof country = select({
options: await powerPlantsDB`select distinct country_long as label, country_long as value from [global-power-plants]`,
value: "Canada"
})
viewof fuel_type = select({
options: await powerPlantsDB`select distinct primary_fuel as label, primary_fuel as value from [global-power-plants] where country_long = ${country}`
})
powerPlantsDBClusterMap`select * from [global-power-plants] where primary_fuel = ${fuel_type} and country_long = ${country}`
githubDB = {
// `visibility` is an builtin cell in Observable, added here to keep initial page loads fast
await visibility();
return DatasetteClient('https://github-to-sqlite.dogsheep.net/github');
}
import { importCell } from '@mbostock/dataflow'
viewof repo = select({
options: await githubDB`select name as label, name as value from repos inner join commits on commits.repo = repos.id group by repos.name`,
value: "datasette"
})
githubDB.render((rows, columns) =>
importCell('chart', '@d3/calendar-view', {
data: rows.map(d => ({ ...d, date: new Date(d.date) }))
})
)`
SELECT
strftime("%Y-%m-%d", committer_date) as date,
count(*) as value
FROM commits
LEFT JOIN repos ON repos.id = commits.repo
WHERE repos.name = ${repo}
GROUP BY date`
import { select } from '@jashkenas/inputs'
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.