[charts] Use real world data for ScatterChart examples

[JCQuintas]

Added multiple dataset examples, just to try some things out.

I tried to find more interesting datasets, but it's hard to find data that creates nice visualisations 😅

The two best are Life expectancy vs. GDP per capita and an adaptation of Hertzsprung–Russell diagram, which plot stars.

Issues

A recurring issue is that the Scatter chart doesn't support the dataset, which makes it required for us to construct the data as the Scatter chart expects it, which is annoying and time-consuming.

A possibility would be to allow the dataset to be used on scatter charts. We can then ask users to provide a dataKey for x and y axis, as well as some way of filtering the data for sets, eg:

export const lifeExpectancyVsGdpPerCapita = [
  {
    name: 'Afghanistan',
    code: 'AFG',
    lifeExpectancyAtBirth: 62.6587,
    gdpPerCapita: 1928,
    year: 2015,
    continent: 'Asia',
  },
  {
    name: 'Albania',
    code: 'ALB',
    lifeExpectancyAtBirth: 78.6441,
    gdpPerCapita: 10192.529,
    year: 2015,
    continent: 'Europe',
  },
]

<ScatterChart
  height={300}
  yAxis={[{ 
    label: 'Life expectancy at birth',
    dataKey: 'lifeExpectancyAtBirth'
  }]}
  xAxis={[{ 
    scaleType: 'log',label: 'GDP per capita',
    dataKey: 'gdpPerCapita'
  }]}
  dataset={lifeExpectancyVsGdpPerCapita}
  series={[
    {
      label: "Asia",
      dataFilter: (v) => v.continent === 'Asia'
    },
    {
      label: "Europe"
      dataFilter: (v) => v.continent === 'Asia'
    },
  ]}
/>

Examples

https://deploy-preview-14333--material-ui-x.netlify.app/x/react-charts/scatter/#interaction

[mui-bot]

Deploy preview: https://deploy-preview-14333--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 7b75242

[codspeed-hq]

CodSpeed Performance Report

Merging #14333 will not alter performance

_{Comparing JCQuintas:scatter-chart-real-dataset (7b75242) with master (309199a)}

Summary

✅ 3 untouched benchmarks