D3.js

D3.js es una biblioteca de JavaScript para operar datos HTML.

D3.js es fácil de usar.

¿Cómo usar D3.js?

Si desea usar D3.js en una página web, agregue un enlace al repositorio de la biblioteca:

<script src="//d3js.org/d3.v3.min.js"></script>

Este script selecciona el elemento body y agrega un párrafo con el texto "¡Hola Mundo!":

d3.select("body").append("p").text("¡Hola Mundo!");

Prueba por su cuenta

Gráfico de dispersión

Ejemplo

// Establecer dimensiones
const tamanioX = 500;
const tamanioY = 500;
const margen = 40;
const xMax = tamanioX - margen*2;
const yMax = tamanioY - margen*2;
// Crear puntos aleatorios
const numPuntos = 100;
const data = [];
for (let i = 0; i < numPuntos; i++) {
  data.push([Math.random() * xMax, Math.random() * yMax]);
}
// Agregar el objeto SVG a la página
const svg = d3.select("#miGráfico");
  .append("svg")
  .append("g")
  .attr("transform","translate(" + margen + "," + margen + ")");
// Eje X
const x = d3.scaleLinear()
  .domain([0, 500])
  .range([0, xMax]);
svg.append("g")
  .attr("transform", "translate(0," + yMax + ")")
  .call(d3.axisBottom(x));
// Eje Y
const y = d3.scaleLinear()
  .domain([0, 500])
  .range([ yMax, 0]);
svg.append("g")
  .call(d3.axisLeft(y));
// Punto
svg.append('g')
  .selectAll("punto")
  .data(data).enter()
  .append("círculo")
  .attr("cx", function (d) { return d[0] } )
  .attr("cy", function (d) { return d[1] } )
  .attr("r", 3)
  .style("relleno", "Rojo");

Prueba por su cuenta