File size: 1,582 Bytes
7cdde63 a9e6b9b 7cdde63 a9e6b9b 7cdde63 a9e6b9b 7cdde63 a9e6b9b 7cdde63 a9e6b9b 7cdde63 a9e6b9b de40d0a a9e6b9b 7cdde63 a9e6b9b 7cdde63 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
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,
subtitle: 'Proficiency scores by language',
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',
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 > 1e8),
{
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()
}, [])
return (
<div
ref={containerRef}
style={{
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
/>
)
}
export default LanguagePlot
|