Types of Data Professionals

---

The field of data offers a diverse array of job titles, making it challenging to navigate without getting lost in the jargon and uncertainty about which roles to pursue.

The charts below offer deeper insights into the competencies needed, salary ranges, and popularity trends for the four primary job titles.

It's a good opportunity to learn how to make a little application with React and D3.js, featuring 3 inter-connected chart types with smooth animated transition: radar chart, line chart and lollipop.

Useful links

inspirationd3 galleryAbout this chart

The plot

Here is what we want to build. It is highly inspired by a work from Kevin Rosamont Prombo.

Four buttons are provided, one for each type of data professional. Clicking on it will update the 3 following charts.

Data

The radar chart explains what competencies are required to be a Data Engineer, a Machine Learning Engineer, a Data Scientist or a Data Analyst. The data and the representation have been first suggested by Kevin Rosamont Prombo.

The little lollipop plot provides the estimated salary range for the job. Data from review n prep and glassdoor.

The line chart gives an estimate of the job popularity based on its google trend score in the last ~10 years.

Click the Show code button above to get a sandbox with the 3 datasets at json format.

Global state

The first thing that is required here is a global state.

The root file of the application computes all the available groups in the dataset (allGroups) and use the first group to state the initial state of the application.

const allGroups = data.map((d) => d.name);
const [selectedGroup, setSelectedGroup] = useState(allGroups[0]);

When the user clicks a button, the state is updated thanks to the setSelectedGroup() function. The newly selected group (selectedGroup) is then passed to the graphing component as a prop.

Charts

Then we need to build 3 charts based on the 3 filtered dataset.

The React graph gallery already provides in-depth tutorials for those 3 chart types. So please refer to the radar chart, line chart and lollipop sections to learn how to build them.

+

Lollipop

+

Spider / Radar

+

Line chart

Animation

Most of the fun here comes from the smooth, animated transition between groups. It is also the trickiest part to implement.

As always in this gallery, the animation is computed thanks to react-spring, a javascript library for spring animation in React.

It would be way too long to explain how to implement it properly in this page. But to put it in a nutshell, you need to render animated elements instead of usual SVG elements. Here is how the line is rendered for instance:

const LineItem = ({ path, color }: LineItemProps) => {
  const springProps = useSpring({
    to: {
      path,
      color,
    },
    config: {
      friction: 100,
    },
  });

  return (
    <animated.path
      d={springProps.path}
      fill={'none'}
      stroke={color}
      strokeWidth={2}
    />
  );
};

I plan to write some complete tutorials on this passionating and complicated topic. You can subscribe to the project to know when it's ready!

Ranking

+

Barplot

+

Wordcloud

+

Parallel

+

Lollipop

+

Circular Barplot

+

Spider / Radar