From 775fe1d2102c4507dca123621479dee929136ae4 Mon Sep 17 00:00:00 2001
From: Chris Wilkinson <c.wilkinson@elifesciences.org>
Date: Fri, 12 Jul 2024 10:18:18 +0100
Subject: [PATCH] Show users publishing the most reviews

Refs #43
---
 src/users.md | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/src/users.md b/src/users.md
index b1fe62e..9f17ca8 100644
--- a/src/users.md
+++ b/src/users.md
@@ -12,6 +12,7 @@ import i18nIsoCountries from 'npm:i18n-iso-countries'
 ```
 
 ```js
+const parseDate = d3.utcParse('%Y-%m-%d')
 const parseTimestamp = d3.utcParse('%Y-%m-%dT%H:%M:%SZ')
 
 const regionNames = new Intl.DisplayNames(['en-US'], { type: 'region' })
@@ -45,6 +46,9 @@ const careerStage = id => {
 const users = FileAttachment('./data/users.json')
   .json()
   .then(data => data.map(user => ({ ...user, timestamp: parseTimestamp(user.timestamp) })))
+const reviews = FileAttachment('./data/reviews.json')
+  .json()
+  .then(data => data.map(review => ({ ...review, createdAt: parseDate(review.createdAt) })))
 ```
 
 ```js
@@ -63,6 +67,9 @@ const chosenYear = view(
 
 ```js
 const usersInTimePeriod = chosenYear ? users.filter(user => user.timestamp.getUTCFullYear() === chosenYear) : users
+const reviewsInTimePeriod = chosenYear
+  ? reviews.filter(review => review.createdAt.getUTCFullYear() === chosenYear)
+  : reviews
 
 const careerStageColor = Plot.scale({
   color: {
@@ -80,6 +87,32 @@ const careerStageColor = Plot.scale({
   </div>
 </div>
 
+```js
+function mostAuthored({ width } = {}) {
+  const userReviews = reviewsInTimePeriod.flatMap(({ authors, ...review }) =>
+    authors.map(author => ({ ...review, ...author })),
+  )
+
+  return Plot.plot({
+    title: `PREreviewers by number of PREreviews${chosenYear ? ` published in ${chosenYear}` : ''}`,
+    width: Math.max(width, 600),
+    height: 500,
+    marginBottom: 150,
+    y: { grid: true, label: 'PREreviews', tickFormat: Math.floor, interval: 1 },
+    x: { label: 'PREreviewer', tickRotate: -90 },
+    marks: [
+      Plot.rectY(userReviews, Plot.groupX({ y: 'count' }, { x: 'author', y: 'x', sort: { x: '-y', limit: 25 } })),
+    ],
+  })
+}
+```
+
+<div class="grid grid-cols-1">
+  <div class="card">
+    ${resize((width) => mostAuthored({width}))}
+  </div>
+</div>
+
 ```js
 function usersTimeline({ width } = {}) {
   return Plot.plot({