File size: 1,171 Bytes
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 |
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
|