penumbra1 / skill-radar Goto Github PK

I love data visualisation, and I've started to explore how to do it in React. For this job profile dashboard, I'm using the awesome react-vis library.

The data comes from the Open Skills API.

The input populates asynchronously. I started out with react-select, but switched to Ant design (Antd) as its select component is better at handling long lists.

Antd came in useful for the rest of the UI as well. I rewired CRA to override Antd's default theme via craco-antd.

There's an open issue with Antd importing the entire icon pack), which will probably be fixed soon. I'm grabbing the icons manually for now, as suggested here.

I added a custom loader to the input and the graphs. It receives the colors for @keyframes as locally scoped CSS variables via props.

I wanted the illustration to dim along with the text when data is loading, but to stay in place when tabs change. As antd tab animation relies on margins, I had to render the illustration via a React portal to keep it from moving and constrain it to the content area.

Ideally, jobs should be compared across the same subset of skills, e.g. top 10 skills across all jobs. Looks like there is no way to get a list of top skills by overall frequency (except for crunching the dataset myself). Currently the profile graph shows top 15 skills by importance for each particular job. However, as top skills differ across jobs, the y-axis ticks change almost every time the job is updated. The smooth bar chart transition essentially makes no sense when dimensions change. I really don't like it, but I'm not up to data analysis for now:)

Related jobs have the same skill profile, but I show profiles for them anyway (it would be nice to have more granular data).

• job comparison via a parallel coordinates chart
• related jobs

Todo:

• memoization & pure components
• intersection observer for related jobs animation + collapsible groups by field
• routing by occupation
• move compare button out of controls into compare tab
• investigate rerendering in Parallel Chart label series
• turn parallel chart into radar chart