Improve plots and dataset table

frontend/src/components/DatasetTable.js

@@ -140,13 +140,13 @@ const DatasetTable = ({ data }) => {
         body={linkBodyTemplate}
       />
       <Column
-        field='tasks'
-        header='Tasks'
+        field='n_languages'
+        header='Languages'
+        headerTooltip='Number of languages in the dataset'
         filter
-        filterElement={tasksRowFilterTemplate}
-        showFilterMatchModes={false}
-        style={{ minWidth: '10rem', maxWidth: '10rem' }}
-        body={tasksBodyTemplate}
+        sortable
+        style={{ minWidth: '5rem', maxWidth: '10rem' }}
+        body={nLanguagesBodyTemplate}
       />
       <Column
         field='translation'
@@ -158,13 +158,13 @@ const DatasetTable = ({ data }) => {
         body={translationBodyTemplate}
       />
       <Column
-        field='n_languages'
-        header='Languages'
-        headerTooltip='Number of languages in the dataset'
+        field='tasks'
+        header='Tasks'
         filter
-        sortable
-        style={{ minWidth: '5rem', maxWidth: '10rem' }}
-        body={nLanguagesBodyTemplate}
+        filterElement={tasksRowFilterTemplate}
+        showFilterMatchModes={false}
+        style={{ minWidth: '10rem', maxWidth: '15rem' }}
+        body={tasksBodyTemplate}
       />
     </DataTable>
   )

frontend/src/components/LanguagePlot.js

@@ -3,32 +3,46 @@ import * as Plot from '@observablehq/plot'
 
 const LanguagePlot = ({ data }) => {
   const containerRef = useRef()
-  const languages = data.language_table.filter (a => a.average > 0)
+  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',
+      subtitle: 'Proficiency scores by language',
       x: {
         label: 'Number of Speakers',
         type: 'log'
       },
       y: {
-        label: 'Language Proficiency Score',
+        label: 'Language Proficiency Score'
       },
       marks: [
         Plot.dot(languages, {
           x: 'speakers',
           y: d => d.average,
-          r: "speakers",
+          r: 'speakers',
           fill: 'family',
-          fillOpacity: 0.5,
-          title: d => d.language_name,
+          title: d =>
+            `${d.language_name}\n${d.speakers.toLocaleString('en-US', {
+              notation: 'compact'
+            })} speakers\nScore: ${d.average.toFixed(2)}`,
           tip: true
         }),
-      ],
+        Plot.text(
+          languages.filter(a => a.speakers > 5e8),
+          {
+            x: 'speakers',
+            y: d => d.average,
+            text: d => d.language_name,
+            fill: 'black',
+            frameAnchor: 'left',
+            dx: 10,
+            marginRight: 100
+          }
+        )
+      ]
     })
     containerRef.current.append(plot)
     return () => plot.remove()
@@ -42,7 +56,7 @@ const LanguagePlot = ({ data }) => {
         height: '100%',
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'center',
+        justifyContent: 'center'
       }}
     />
   )

frontend/src/components/SpeakerPlot.js

@@ -3,56 +3,81 @@ import * as Plot from '@observablehq/plot'
 
 const SpeakerPlot = ({ data }) => {
   const containerRef = useRef()
-  const allSpeakers = data.language_table.reduce((sum, curr) => sum + curr.speakers, 0)
-  const languages = data.language_table.sort((a, b) => b.speakers - a.speakers).slice(0, 100).reduce((acc, d) => {
-    acc.push({
-      ...d,
-      rank: acc.length + 1,
-      cumSpeakers: acc.reduce((sum, curr) => sum + curr.speakers, 0) + d.speakers,
-      cumSpeakersPercent: (acc.reduce((sum, curr) => sum + curr.speakers, 0) + d.speakers) / allSpeakers
-    })
-    return acc
-  }, [])
+  const allSpeakers = data.language_table.reduce(
+    (sum, curr) => sum + curr.speakers,
+    0
+  )
+  const languages = data.language_table
+    .sort((a, b) => b.speakers - a.speakers)
+    .slice(0, 100)
+    .reduce((acc, d) => {
+      acc.push({
+        ...d,
+        rank: acc.length + 1,
+        cumSpeakers:
+          acc.reduce((sum, curr) => sum + curr.speakers, 0) + d.speakers,
+        cumSpeakersPercent:
+          (acc.reduce((sum, curr) => sum + curr.speakers, 0) + d.speakers) /
+          allSpeakers
+      })
+      return acc
+    }, [])
 
   useEffect(() => {
     const plot = Plot.plot({
       width: 750,
       height: 500,
-      // title: 'Proficiency of Languages by Number of Speakers',
+      subtitle: 'Number of languages vs speakers covered',
       x: {
         label: 'Languages',
-        ticks: [],
+        ticks: []
       },
       y: {
-        label: 'Number of Speakers (millions)',
+        label: 'Number of Speakers (millions)'
       },
       color: {
         legend: true,
-        domain: ["Speakers", "Cumulative Speakers"],
-        range: ["green", "lightgrey"],
+        domain: ['Speakers', 'Cumulative Speakers'],
+        range: ['green', 'lightgrey']
       },
       marks: [
-        Plot.barY(languages,
-          {
-          x: "rank",
+        Plot.barY(languages, {
+          x: 'rank',
           y: d => d.cumSpeakers / 1e6,
-          fill: d => "Cumulative Speakers",
+          fill: d => 'Cumulative Speakers',
           sort: { x: 'y' },
-          title: d => `The ${d.rank} most spoken languages cover\n${d.cumSpeakersPercent.toLocaleString("en-US", { style: 'percent'})} of all speakers`,
+          title: d =>
+            `The ${
+              d.rank
+            } most spoken languages cover\n${d.cumSpeakersPercent.toLocaleString(
+              'en-US',
+              { style: 'percent' }
+            )} of all speakers`,
           tip: true // {y: d => d.cumSpeakers / 1e6 * 2}
         }),
-        Plot.barY(languages,
-          {
-          x: "rank",
+        Plot.barY(languages, {
+          x: 'rank',
           y: d => d.speakers / 1e6,
-          title: d => `${d.language_name}\n(${d.speakers.toLocaleString("en-US", {notation: 'compact', compactDisplay: 'long'})} speakers)`,
+          title: d =>
+            `${d.language_name}\n(${d.speakers.toLocaleString('en-US', {
+              notation: 'compact',
+              compactDisplay: 'long'
+            })} speakers)`,
           tip: true,
-          fill: d => "Speakers",
+          fill: d => 'Speakers',
           sort: { x: '-y' }
         }),
-        Plot.crosshairX(languages, {x: "rank", y: d => d.cumSpeakers / 1e6, textStrokeOpacity: 0, textFillOpacity: 0}),
-        Plot.tip(["The 41 most spoken languages cover 80% of all speakers."], {x: 41, y: languages[40].cumSpeakers / 1e6})
-      ],
+        Plot.crosshairX(languages, {
+          x: 'rank',
+          y: d => d.cumSpeakers / 1e6,
+          textStrokeOpacity: 0,
+          textFillOpacity: 0
+        }),
+        Plot.tip(['The 41 most spoken languages cover 80% of all speakers.'], {
+          x: 41,
+          y: languages[40].cumSpeakers / 1e6
+        })
+      ]
     })
     containerRef.current.append(plot)
     return () => plot.remove()
@@ -66,7 +91,7 @@ const SpeakerPlot = ({ data }) => {
         height: '100%',
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'center',
+        justifyContent: 'center'
       }}
     />
   )

frontend/src/components/WorldMap.js

@@ -44,6 +44,7 @@ const WorldMap = ({ data }) => {
       return acc
     }, {})
     const plot = Plot.plot({
+      subtitle: 'Language Proficiency Score by Country',
       width: 750,
       height: 500,
       projection: 'equal-earth',