Software engineer dabbling in data viz
{
const sha = (commit) => commit.sha.substring(0, 6);
return html`
<div style="max-height: 600px; overflow-y:scroll;">
${md`## The last ${commits.length} commits in the [${repoName}](https://github.com/${repoName}) repository`}
${dot`
digraph {
rankdir=TB
${commits
.map((x) => {
const name = sha(x);
const dateWeight = scale(new Date(x.commit.committer.date));
const color = d3.interpolateMagma(dateWeight);
const textColor = dateWeight < 0.5 ? "white" : "black";
return `"${name}"[style="filled", fillcolor="${color}", fontcolor="${textColor}"];`;
})
.join("\n")}
${commits
.map((x) => x.parents.map((p) => `"${sha(p)}" -> "${sha(x)}"`).join("\n"))
.join("\n")}}
}`}
`;
}
commits = {
const count = 6;
let i = 0;
const data = [];
let commits = await github3`repos/getsentry/sentry-docs/commits`;
commits.map((c) => data.push(c));
let next = commits.__meta.link.next.url;
while (next && i < count) {
commits = await github3(next);
commits.map((c) => data.push(c));
next = commits.__meta.link.next.url;
++i;
}
return data;
}
ghKey = "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"
github4`query {
repository(owner: "observablehq", name: "runtime") {
forkCount
stargazers {
count: totalCount
}
}
}`
ghEmojis = github3`emojis`
{
const rate = (await github3`rate_limit`).rate
const msRemaining = ((new Date(rate.reset*1000))- new Date())
const minsRemaining = (msRemaining/1000/60).toFixed(1)
return md` You have ${rate.remaining} api calls left! Restarts in ${minsRemaining} minutes!`
}
github3 = function(strings) {
let path = '';
if(Array.isArray(strings)) {
path = strings[0] + ""
let i = 0, n = arguments.length;
while (++i < n) path += arguments[i] + "" + strings[i];
}else
path = strings
let ghToken = ghKey
const opts = {
headers: {
Accept: `application/vnd.github.v3+json`
}
};
if (ghToken)
opts.headers.Authorization = `token ${ghToken}`
const url = path.indexOf('https://api.github.com') >= 0
? path
: `https://api.github.com/${path}`
return fetch(url, opts).then(async r=>{
const data = await r.json()
const meta = {}
const rate_limit = {}
if(r.headers.has('Link'))
meta.link = parseLH(r.headers.get('Link'))
rate_limit.limit = +r.headers.get('X-RateLimit-Limit')
rate_limit.remaining = +r.headers.get('X-RateLimit-Remaining')
rate_limit.reset = new Date ( (+r.headers.get('X-RateLimit-Reset')) * 1000 )
meta.rate_limit = rate_limit;
data.__meta = meta
return data
})
}
github4 = function (strings){
let query = strings[0] + "", i = 0, n = arguments.length;
while (++i < n) query += arguments[i] + "" + strings[i];
let ghToken = ghKey
const opts = {
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
method: 'post',
body: JSON.stringify({query})
};
if (ghToken)
opts.headers.Authorization = `token ${ghToken}`
const url = `https://api.github.com/graphql`
return fetch(url, opts).then(r=>r.json())
}
import {secret} from "@tmcw/secret"
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.
