Train vs Test data chart

scatter-plot.markdown

Scatter plot

A Pen by Vibhansh on CodePen.

License.

scatter_plot.html

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
  <div id="container"></div>
</figure>

script.js

Highcharts.setOptions({
  colors: ["rgba(237,86,27,0.5)","rgba(5,141,199,0.5)"]
});

const series = [
  {
    name: "Test Data",
    id: "test",
    marker: {
      symbol: "square"
    }
  },
  {
    name: "Train Data",
    id: "train",
    marker: {
      symbol: "circle"
    }
  }
];

async function getData() {
  const response = [
    { x: 18.05, y: 62.79, trial: "21-A", category: "test" },
    { x: 18.1, y: 62.44, trial: "45-A", category: "train" },
    { x: 18.01, y: 63.17, trial: "8-A", category: "train" },
    { x: 17.97, y: 62.49, trial: "30-A", category: "test" },
    { x: 18.51, y: 62.98, trial: "41-A", category: "train" },
    { x: 18.51, y: 63.83, trial: "10-A", category: "train" },
    { x: 17.58, y: 61.17, trial: "51-A", category: "train" },
    { x: 18.09, y: 62.74, trial: "17-A", category: "train" },
    { x: 18.22, y: 62.98, trial: "23-A", category: "train" },
    { x: 18.07, y: 62.84, trial: "20-A", category: "train" },
    { x: 17.83, y: 62.32, trial: "36-A", category: "train" },
    { x: 19.22, y: 63.22, trial: "5-A", category: "train" },
    { x: 17.48, y: 62.46, trial: "46-A", category: "train" },
    { x: 17.44, y: 61.19, trial: "58-A", category: "train" },
    { x: 18.12, y: 61.69, trial: "37-A", category: "train" },
    { x: 18.54, y: 63.45, trial: "38-A", category: "train" },
    { x: 17.7, y: 60.4, trial: "Ref1-A", category: "test" },
    { x: 18.71, y: 61.97, trial: "33-A", category: "train" },
    { x: 17.93, y: 60.25, trial: "53-A", category: "train" },
    { x: 17.2, y: 59.57, trial: "Ref2-A", category: "train" },
    { x: 19.2, y: 61.5, trial: "61-A", category: "test" },
    { x: 18.4, y: 62.02, trial: "35-A", category: "train" },
    { x: 18.21, y: 60.79, trial: "48-A", category: "train" },
    { x: 16.14, y: 59.24, trial: "Ref5-A", category: "train" },
    { x: 18.26, y: 63.14, trial: "7-A", category: "train" },
    { x: 18.45, y: 62.79, trial: "26-A", category: "train" },
    { x: 18.48, y: 62.63, trial: "2-A", category: "train" },
    { x: 18.06, y: 63.22, trial: "22-A", category: "train" },
    { x: 18.29, y: 62.42, trial: "40-A", category: "test" },
    { x: 18.01, y: 63.17, trial: "12-A", category: "train" },
    { x: 18.45, y: 62.02, trial: "42-A", category: "train" },
    { x: 18.05, y: 61.29, trial: "31-A", category: "train" },
    { x: 18.18, y: 63.28, trial: "6-A", category: "test" },
    { x: 17.89, y: 63.4, trial: "15-A", category: "train" },
    { x: 18.05, y: 62.06, trial: "43-A", category: "train" },
    { x: 18.43, y: 61.78, trial: "28-A", category: "test" },
    { x: 18.78, y: 62.67, trial: "27-A", category: "train" },
    { x: 17.93, y: 63.26, trial: "11-A", category: "train" },
    { x: 18.58, y: 62.06, trial: "25-A", category: "train" },
    { x: 17.18, y: 60.72, trial: "52-A", category: "test" },
    { x: 16.44, y: 60.07, trial: "Ref6-A", category: "train" },
    { x: 18.5, y: 60, trial: "56-A", category: "train" },
    { x: 17.26, y: 60.3, trial: "Ref3-A", category: "train" },
    { x: 17.66, y: 63.17, trial: "16-A", category: "train" },
    { x: 17.67, y: 59.97, trial: "Ref4-A", category: "train" },
    { x: 18.59, y: 61.24, trial: "60-A", category: "train" },
    { x: 18.3, y: 63.8, trial: "3-A", category: "train" },
    { x: 17.98, y: 60.58, trial: "47-A", category: "test" },
    { x: 17.76, y: 60.37, trial: "57-A", category: "train" },
    { x: 18.6, y: 62.49, trial: "32-A", category: "test" },
    { x: 17.56, y: 60.98, trial: "50-A", category: "train" },
    { x: 18.19, y: 59.9, trial: "55-A", category: "train" },
    { x: 17.36, y: 61.29, trial: "18-A", category: "test" },
    { x: 18.06, y: 63.57, trial: "13-A", category: "train" }
  ];
  return response;
}

getData().then((data) => {
  const getData = (sportName) => {
    const temp = [];
    data.forEach((elm) => {
      if (elm.category === sportName && elm.x > 0 && elm.y > 0) {
        temp.push([elm.x, elm.y, elm.trial]);
      }
    });
    return temp;
  };
  series.forEach((s) => {
    s.data = getData(s.id);
  });
  Highcharts.chart("container", {
    chart: {
      type: "scatter",
      zoomType: "xy"
    },
    title: {
      text: "Scatter Plot for  company",
      align: "left"
    },
    subtitle: {
      text:
        'Source: <a href="https://sit.labs.polymerize.io">Polymerize Labs Data</a>',
      align: "left"
    },
    xAxis: {
      title: {
        text: "Property"
      },
      labels: {
        format: "{value} Brix"
      },
      startOnTick: true,
      endOnTick: true,
      showLastLabel: true
    },
    yAxis: {
      title: {
        text: "Ingredient"
      },
      labels: {
        format: "{value} g"
      }
    },
    legend: {
      enabled: true
    },
    plotOptions: {
      scatter: {
        marker: {
          radius: 5,
          symbol: "circle",
          states: {
            hover: {
              enabled: true,
              lineColor: "rgb(100,100,100)"
            }
          }
        },
        states: {
          hover: {
            marker: {
              enabled: false
            }
          }
        },
        jitter: {
          x: 0.005
        }
      }
    },
    tooltip: {
      formatter: function () {
        return (
          `Ingredient value (g): <b>${this.point.x}</b> <br/> Property value (Brix): <b>${this.point.y}</b> <br/> Trial name: <b>${this.series.userOptions.data[this.point.index][2]}</b>`
        );
      },
      shared: true,
    },
    series
  });
});

style.css

#container {
  max-width: 800px;
  margin: auto;
}

.highcharts-figure,
.highcharts-data-table table {
  min-width: 360px;
  max-width: 800px;
  margin: 1em auto;
}

.highcharts-data-table table {
  font-family: Verdana, sans-serif;
  border-collapse: collapse;
  border: 1px solid #ebebeb;
  margin: 10px auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
}

.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}

.highcharts-data-table th {
  font-weight: 600;
  padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
  padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}

.highcharts-data-table tr:hover {
  background: #f1f7ff;
}