From fdeef4ed073f0f75b24556ba8aea47f7aa3149a6 Mon Sep 17 00:00:00 2001
From: Chris Wilkinson <c.wilkinson@elifesciences.org>
Date: Thu, 4 Jul 2024 15:59:06 +0100
Subject: [PATCH] Show the number of new users over time

Refs #31
---
 src/users.md | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 src/users.md

diff --git a/src/users.md b/src/users.md
new file mode 100644
index 0000000..06889b6
--- /dev/null
+++ b/src/users.md
@@ -0,0 +1,62 @@
+---
+theme: dashboard
+title: PREreviewers
+toc: false
+---
+
+# PREreviewers 🫅
+
+```js
+const parseTimestamp = d3.utcParse('%Y-%m-%dT%H:%M:%SZ')
+
+const users = FileAttachment('./data/users.json')
+  .json()
+  .then(data => data.map(user => ({ ...user, timestamp: parseTimestamp(user.timestamp) })))
+```
+
+```js
+const now = new Date()
+const firstUser = d3.min(users, user => user.timestamp)
+```
+
+<div class="grid grid-cols-4">
+  <div class="card">
+    <h2>PREreviewers</h2>
+    <span class="big">${users.length.toLocaleString("en-US")}</span>
+  </div>
+</div>
+
+```js
+console.log(users)
+function usersTimeline({ width } = {}) {
+  return Plot.plot({
+    title: 'PREreviewers joining per month',
+    width: Math.max(width, 600),
+    height: 400,
+    y: { grid: true, label: 'PREreviewers', tickFormat: Math.floor, interval: 1 },
+    x: {
+      label: '',
+      domain: [d3.utcMonth.floor(firstUser), d3.utcMonth.ceil(now)],
+    },
+    marks: [
+      Plot.rectY(
+        users,
+        Plot.binX(
+          { y: 'count' },
+          {
+            x: 'timestamp',
+            interval: d3.utcMonth,
+            tip: true,
+          },
+        ),
+      ),
+    ],
+  })
+}
+```
+
+<div class="grid grid-cols-1">
+  <div class="card">
+    ${resize((width) => usersTimeline({width}))}
+  </div>
+</div>