Plot carousel

frontend/src/App.js

@@ -6,6 +6,8 @@ import LanguageTable from './components/LanguageTable'
 import DatasetTable from './components/DatasetTable'
 import WorldMap from './components/WorldMap'
 import AutoComplete from './components/AutoComplete'
+import LanguagePlot from './components/LanguagePlot'
+import { Carousel } from 'primereact/carousel'
 
 function App () {
   const [data, setData] = useState(null)
@@ -33,9 +35,30 @@ function App () {
 
   useEffect(() => {
     if (data) {
-      const models = data.model_table.map(item => ({ type: 'Model', value: item.model, detail: item.provider, searchText: item.provider.toLowerCase() + ' ' + item.model.toLowerCase() }))
-      const languages = data.language_table.map(item => ({ type: 'Language', value: item.autonym, detail: item.language_name, searchText: item.language_name.toLowerCase() + ' ' + item.autonym.toLowerCase() }))
-      const datasets = data.dataset_table.map(item => ({ type: 'Dataset', value: item.name, detail: item.tasks, searchText: item.author.toLowerCase() + ' ' + item.name.toLowerCase() + ' ' + item.tasks.map(task => task.toLowerCase()).join(' ') }))
+      const models = data.model_table.map(item => ({
+        type: 'Model',
+        value: item.model,
+        detail: item.provider,
+        searchText: item.provider.toLowerCase() + ' ' + item.model.toLowerCase()
+      }))
+      const languages = data.language_table.map(item => ({
+        type: 'Language',
+        value: item.autonym,
+        detail: item.language_name,
+        searchText:
+          item.language_name.toLowerCase() + ' ' + item.autonym.toLowerCase()
+      }))
+      const datasets = data.dataset_table.map(item => ({
+        type: 'Dataset',
+        value: item.name,
+        detail: item.tasks,
+        searchText:
+          item.author.toLowerCase() +
+          ' ' +
+          item.name.toLowerCase() +
+          ' ' +
+          item.tasks.map(task => task.toLowerCase()).join(' ')
+      }))
       const allSuggestions = [...models, ...languages, ...datasets]
       setAllSuggestions(allSuggestions)
     }
@@ -43,89 +66,103 @@ function App () {
 
   return (
     <PrimeReactProvider>
-    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-      <header
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          padding: '5vh 0'
-        }}
-      >
-        <div>
-          <span
-            role='img'
-            aria-label='Globe Emoji'
-            style={{ fontSize: '70px' }}
-          >
-            🌍
-          </span>
-        </div>
-        <h1 style={{ fontSize: '2.5rem', fontWeight: '700' }}>
-          Global AI Language Monitor
-        </h1>
-        <p style={{ fontSize: '1.15rem', color: '#555', marginTop: '0' }}>
-          Tracking language proficiency of AI models for every language
-        </p>
-        <AutoComplete allSuggestions={allSuggestions} onComplete={item => setFilters(prevFilters => [item])} />
-      </header>
-      <main
-            style={{
-              display: 'flex',
-              flexDirection: 'row',
-              flexWrap: 'wrap',
-              gap: '2rem',
-              alignItems: 'center',
-              width: '100%',
-              height: '100%',
-              justifyContent: 'center',
-              paddingBottom: '5vh'
-            }}
-          >
-        {loading && <i className='pi pi-spinner pi-spin' style={{ fontSize: '4rem' }} />}
-        {error && <p>Error: {error}</p>}
-        {data && (
-          <>
-            <div
-              id='figure'
-              style={{
-                flex: '100vw 100vw 100vw',
-                maxWidth: 'min(100vw, 800px)',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
+      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+        <header
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '5vh 0'
+          }}
+        >
+          <div>
+            <span
+              role='img'
+              aria-label='Globe Emoji'
+              style={{ fontSize: '70px' }}
             >
-                <WorldMap data={data} />
-            </div>
-            <div
-              style={{
-                flex: '60vw 100vw 40vw',
-                maxWidth: 'min(100vw, 800px)',
-              }}
-            >
-              <ModelTable data={data} />
-            </div>
-            <div
-              style={{
-                flex: '60vw 100vw 40vw',
-                maxWidth: 'min(100vw, 800px)'
-              }}
-            >
-              <LanguageTable data={data} />
-            </div>
-            <div
-              style={{
-                flex: '60vw 100vw 40vw',
-                maxWidth: 'min(100vw, 800px)'
-              }}
-            >
-              <DatasetTable data={data} />
-            </div>
+              🌍
+            </span>
+          </div>
+          <h1 style={{ fontSize: '2.5rem', fontWeight: '700' }}>
+            Global AI Language Monitor
+          </h1>
+          <p style={{ fontSize: '1.15rem', color: '#555', marginTop: '0' }}>
+            Tracking language proficiency of AI models for every language
+          </p>
+          <AutoComplete
+            allSuggestions={allSuggestions}
+            onComplete={item => setFilters(prevFilters => [item])}
+          />
+        </header>
+        <main
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            gap: '2rem',
+            alignItems: 'center',
+            width: '100%',
+            height: '100%',
+            justifyContent: 'center',
+            paddingBottom: '5vh'
+          }}
+        >
+          {loading && (
+            <i className='pi pi-spinner pi-spin' style={{ fontSize: '4rem' }} />
+          )}
+          {error && <p>Error: {error}</p>}
+          {data && (
+            <>
+              <div
+                style={{
+                  flex: '60vw 100vw 40vw',
+                  maxWidth: 'min(100vw, 800px)'
+                }}
+              >
+                <ModelTable data={data} />
+              </div>
+              <div
+                style={{
+                  flex: '60vw 100vw 40vw',
+                  maxWidth: 'min(100vw, 800px)'
+                }}
+              >
+                <LanguageTable data={data} />
+              </div>
+              <div
+                style={{
+                  flex: '60vw 100vw 40vw',
+                  maxWidth: 'min(100vw, 800px)'
+                }}
+              >
+                <DatasetTable data={data} />
+              </div>
+              <div
+                id='figure'
+                style={{
+                  flex: '100vw 100vw 100vw',
+                  maxWidth: 'min(100vw, 800px)',
+                  alignItems: 'center',
+                  justifyContent: 'center'
+                }}
+              >
+                <Carousel
+                  value={[
+                    <WorldMap data={data} />,
+                    <LanguagePlot data={data} />
+                  ]}
+                  numScroll={1}
+                  numVisible={1}
+                  itemTemplate={item => item}
+                  circular
+                />
+              </div>
             </>
-        )}
-      </main>
-    </div>
+          )}
+        </main>
+      </div>
     </PrimeReactProvider>
   )
 }

frontend/src/components/LanguagePlot.js

@@ -0,0 +1,51 @@
+import { useRef, useEffect } from 'react'
+import * as Plot from '@observablehq/plot'
+
+const LanguagePlot = ({ data }) => {
+  const containerRef = useRef()
+  const languages = data.language_table.filter (a => a.average > 0)
+  const families = [...new Set(languages.map(a => a.family))]
+
+  useEffect(() => {
+    const plot = Plot.plot({
+      width: 750,
+      height: 500,
+      // title: 'Proficiency of Languages by Number of Speakers',
+      x: {
+        label: 'Number of Speakers',
+        type: 'log'
+      },
+      y: {
+        label: 'Language Proficiency Score',
+      },
+      marks: [
+        Plot.dot(languages, {
+          x: 'speakers',
+          y: d => d.average,
+          r: "speakers",
+          fill: 'family',
+          fillOpacity: 0.5,
+          title: d => d.language_name,
+          tip: true
+        }),
+      ],
+    })
+    containerRef.current.append(plot)
+    return () => plot.remove()
+  }, [])
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    />
+  )
+}
+
+export default LanguagePlot

frontend/src/components/WorldMap.js

@@ -1,15 +1,29 @@
 import { useRef, useEffect, useState } from 'react'
-import * as topojson from 'topojson-client'
 import * as Plot from '@observablehq/plot'
 
-function smoothProgressBar(fraction, { color = false } = {}) {
-  const blocks = ['▏','▎','▍','▌','▋','▊','▉','█'];
-  const width = 10;
-  const totalUnits = width * 8;
-  const filledUnits = Math.round(fraction * totalUnits);
-  const fullBlocks = Math.floor(filledUnits / 8);
-  const remainder = filledUnits % 8;
-  return '█'.repeat(fullBlocks) + (remainder > 0 ? blocks[remainder - 1] : '')
+const smoothProgressBar = fraction => {
+  const blocks = ['▏', '▎', '▍', '▌', '▋', '▊', '▉', '█']
+  const width = 10
+  const totalUnits = width * 8
+  const filledUnits = Math.round(fraction * totalUnits)
+  const fullBlocks = Math.floor(filledUnits / 8)
+  const remainder = filledUnits % 8
+  return ('█'.repeat(fullBlocks) + (remainder > 0 ? blocks[remainder - 1] : '')) || '▏'
+}
+
+const makeTitle = data => d => {
+  const languages = data.countries[
+    d.properties?.ISO_A2_EH
+  ]?.languages.toSorted((a, b) => b.population - a.population)
+  const pop = languages
+    ?.map(a => a.population)
+    .reduce((prev, a) => prev + a, 0)
+  const langstring =
+    languages
+      ?.slice(0, 10)
+      .map(a => `${smoothProgressBar(a.population / pop)} ${a.name}`)
+      .join('\n\n') + (languages?.length > 10 ? `\n\n...` : '')
+  return `${d.properties.ADMIN}\n\n${langstring}`
 }
 
 const WorldMap = ({ data }) => {
@@ -25,42 +39,44 @@ const WorldMap = ({ data }) => {
   useEffect(() => {
     if (mapData === undefined) return
     const countries = mapData
-    // const countries = topojson.feature(mapData, mapData.objects["world.geo"])
-    console.log(countries)
-    const codes = countries.features.map(d => d.properties?.ISO_A2_EH)
-    console.log(codes.toSorted().join(', '))
     const plot = Plot.plot({
       width: 750,
-      height: 400,
+      height: 500,
       projection: 'equal-earth',
       marks: [
         Plot.geo(countries, {
-          fill: d => {
-            const score = data.countries[d.properties?.ISO_A2_EH]?.score
-            return score
-          },
-          title: d => {
-            const languages = data.countries[d.properties?.ISO_A2_EH]?.languages.toSorted((a, b) => b.population - a.population)
-            const pop = languages?.map(a => a.population).reduce((prev, a) => prev + a, 0)
-            const langstring = languages?.slice(0, 10).map(a=> `${smoothProgressBar(a.population / pop)} ${a.name}`).join('\n\n') + (languages?.length > 10 ? `\n\n...` : '')
-            return `${d.properties.ADMIN}\n\n${langstring}`
-          },
+          fill: d => data.countries[d.properties?.ISO_A2_EH]?.score,
+          title: makeTitle(data),
           tip: true
         })
       ],
       color: {
-        scheme: 'Blues',
+        scheme: 'Greens',
         unknown: 'gray',
         label: 'Score',
         legend: true,
         domain: [0, 0.5]
+      },
+      style: {
+        fontFamily: 'monospace'
       }
     })
     containerRef.current.append(plot)
     return () => plot.remove()
   }, [mapData])
 
-  return <div ref={containerRef} style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }} />
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    />
+  )
 }
 
 export default WorldMap

frontend/src/index.css

@@ -74,3 +74,10 @@ html, body, #root {
   border: 1px solid rgba(0, 0, 0, 0.7);
   box-shadow: 3px 3px 1px 0px rgba(0, 0, 0, 0.2);;
 }
+
+.p-carousel-indicators button.p-link {
+  border-radius: 5px;
+  width: 10px;
+  height: 10px;
+  background-color: #000000;
+}