Public
Edited
May 7, 2024
vega({
data: {values: solved_sundays},
transform: [{density: 'elapsed_minutes', bandwidth: bandwidth}],
width: 400, height: 200,
mark: 'area',
encoding: {
x: { field: 'value', type: 'quantitative', title: 'solve time (mins)'},
y: { field: 'density', type: 'quantitative', scale: {domainMax: 0.06}},
},
title: "Sunday solve times",
})
data = data_raw.map(d => ({
...d,
elapsed_seconds: +d.elapsed_seconds,
elapsed_minutes: +d.elapsed_seconds / 60,
solved: !!+d.solved,
}))
solved_sundays = data.filter(d => d.day === "Sun" && d.solved)
cumulative = sql`
SELECT
ROW_NUMBER() AS cum,
elapsed_minutes
FROM ${{solved_sundays}}
ORDER BY elapsed_minutes
`
cumulative
X
elapsed_minutes
Y
cum
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
vega({
data: {values: cumulative},
width: 400, height: 200,
mark: 'line',
encoding: {
x: { field: 'elapsed_minutes', type: 'quantitative', title: 'solve time (mins)'},
y: { field: 'cum', type: 'quantitative', scale: {domainMax: 100}},
},
title: "Sunday solve times",
})
vega({
data: {values: solved_sundays},
width: width * 0.9,
mark: {type: "circle", size: 70},
encoding: {
x: { type: 'temporal', field: 'date', title: 'date'},
y: { type: 'quantitative', field: 'elapsed_minutes'},
tooltip: { field: 'date', type: 'temporal' },
},
})
import {sql} from '@joshuahhh/sql'
import {table} from '@tmcw/tables/2'
table(data, {pageSize: 5})
mondayCumulativeTimes = sql`
WITH mondays AS (
SELECT *, ROWNUM() AS num
FROM ${{data}}
WHERE day == 'Mon' AND solved == true
ORDER BY elapsed_seconds
)
SELECT
mondays.date, mondays.elapsed_minutes
FROM mondays, mondays AS mon2
GROUP BY mondays.date
`
vega({
data: {values: mondayCumulativeTimes},
width: 400, height: 200,
mark: 'area',
encoding: {
x: { field: 'elapsed_minutes', type: 'quantitative', title: 'solve time (mins)'},
y: { field: 'cum', type: 'quantitative', scale: {domainMax: 100}},
},
title: "Monday solve times",
})
vega({
data: {values: data.filter(d => d.day === "Mon" && d.solved)},
transform: [{
sort: [{field: "elapsed_minutes"}],
window: [{op: "count", field: "count", as: "cum"}],
frame: [null, 0]
}],
width: 400, height: 200,
mark: 'area',
encoding: {
x: { field: 'elapsed_minutes', type: 'quantitative', title: 'solve time (mins)'},
y: { field: 'cum', type: 'quantitative', scale: {domainMax: 100}},
},
title: "Monday solve times",
})
import {Table} from "@observablehq/inputs"
Table(solved_sundays)
vega = {
const v = window.vega = await require("vega@3");
const vl = window.vl = await require("vega-lite@2");
const ve = await require("vega-embed@6");
async function vega(spec, options) {
const div = document.createElement("div");
div.value = (await ve(div, spec, options)).view;
return div;
}
vega.changeset = v.changeset;
return vega;
}
import {slider} from "@jashkenas/inputs"
d
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.
