Visualising data

As a backend engineer, I always wanted to build graphs to show some data interactively. I look up a few libraries but they are not quite easy to use as a relatively new React dev. So I ask my si-fu @_denb again, he recommended me to look at visx/xychar. And yea, it was surprising neat!

Step 1: display a simple line chart
https://codesandbox.io/s/visx-xychart-00-qp99f

The main thing to display the data is just this piece of code. Simple enough!

      <XYChart height={300} 
        xScale={{ type: 'band' }} 
        yScale={{ type: 'linear' }}>
          <Axis orientation="bottom" />
          <Axis orientation="left" />
          <LineSeries data={data} dataKey="line" {...accessors} />
      </XYChart>

Step Final: custom y axis, adding glyph and toolstips, etc

In the final code, I tried to represent a team match position. Since position 1 means the team is a top, I will need to reverse the y-axis. And to make it the graph interactive, I added some icons on the data points and tools tip

visx has other lower level libraries, but I found xychart is really battery included and simple to use :D