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