Group the requests by preprint language

package.json

@@ -9,7 +9,8 @@
     "@observablehq/framework": "^1.9.0",
     "d3-dsv": "^3.0.1",
     "d3-time-format": "^4.1.0",
-    "effect": "^3.3.5"
+    "effect": "^3.3.5",
+    "iso-639-1": "^3.1.2"
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",

src/data/requests.json.ts

@@ -2,9 +2,15 @@ import { HttpClient, Terminal } from '@effect/platform'
 import { NodeTerminal } from '@effect/platform-node'
 import { Schema } from '@effect/schema'
 import { Effect } from 'effect'
+import * as LanguageCode from '../lib/LanguageCode.js'
 import * as Temporal from '../lib/Temporal.js'
 
-const Requests = Schema.Array(Schema.Struct({ timestamp: Temporal.InstantFromStringSchema }))
+const Requests = Schema.Array(
+  Schema.Struct({
+    timestamp: Temporal.InstantFromStringSchema,
+    language: Schema.optional(LanguageCode.LanguageCodeSchema, { nullable: true }),
+  }),
+)
 
 const program = Effect.gen(function* () {
   const terminal = yield* Terminal.Terminal

src/lib/LanguageCode.ts

@@ -0,0 +1,10 @@
+import { Schema } from '@effect/schema'
+import type { Predicate } from 'effect'
+import iso6391, { type LanguageCode } from 'iso-639-1'
+
+export { type LanguageCode } from 'iso-639-1'
+
+export const isLanguageCode: Predicate.Refinement<unknown, LanguageCode> = (u): u is LanguageCode =>
+  typeof u === 'string' && iso6391.validate(u)
+
+export const LanguageCodeSchema: Schema.Schema<LanguageCode, string> = Schema.String.pipe(Schema.filter(isLanguageCode))

src/requests.md

@@ -8,6 +8,7 @@ toc: false
 
 ```js
 const parseTimestamp = d3.utcParse('%Y-%m-%dT%H:%M:%S.%LZ')
+const languageNames = new Intl.DisplayNames(['en-US'], { type: 'language' })
 
 const requests = FileAttachment('./data/requests.json')
   .json()
@@ -27,13 +28,24 @@ function requestsTimeline({ width } = {}) {
     title: 'Requests per week',
     width: Math.max(width, 600),
     height: 400,
-    color: {},
+    color: {
+      legend: true,
+      tickFormat: d => (d ? languageNames.of(d) : 'Not yet detected'),
+    },
     y: { grid: true, label: 'Requests' },
     x: { label: '' },
     marks: [
       Plot.rectY(
         requests,
-        Plot.binX({ y: 'count' }, { x: 'timestamp', interval: d3.utcWeek, fill: 'var(--theme-foreground-focus)' }),
+        Plot.binX(
+          { y: 'count' },
+          {
+            x: 'timestamp',
+            interval: d3.utcWeek,
+            fill: 'language',
+            order: ['en', 'es', 'pt'],
+          },
+        ),
       ),
       Plot.ruleY([0]),
     ],