viewof sql = Inputs.textarea({
label: "SQL query",
value:
"with a as (select * from commits limit 10000)\nselect json_group_array(author_date) as dates from a"
})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.rectY(
data,
Plot.binX({ y: "count" }, { x: "dt", thresholds: "sturges" })
),
Plot.axisX({
ticks: 20,
tickFormat: (
(formatYear, formatMonth) => (x) =>
d3.utcMonth.count(d3.utcYear(x), x) < 1
? `${formatMonth(x)}\n${formatYear(x)}`
: formatMonth(x)
)(d3.utcFormat("%Y"), d3.utcFormat("%b"))
})
]
})
viewof bins = Inputs.range([3, 30], { step: 1, label: "Bins" })
Plot.plot({
y: {
grid: true
},
marks: [
Plot.rectY(data, Plot.binX({ y: "count" }, { x: "dt", thresholds: bins }))
]
})
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.
