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'
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.
