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 necesita 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 personal

Gráfico de dispersión

Ejemplo

// Establecer dimensiones
const xSize = 500;
const ySize = 500;
const margin = 40;
const xMax = xSize - margin*2;
const yMax = ySize - margin*2;
// Crear puntos aleatorios
const numPoints = 100;
const data = [];
for (let i = 0; i < numPoints; i++) {
  data.push([Math.random() * xMax, Math.random() * yMax]);
}
// Añadir el objeto SVG a la página
const svg = d3.select("#myPlot")
  .append("svg")
  .append("g")
  .attr("transform","translate(" + margin + "," + margin + ")");
// 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("dot")
  .data(data).enter()
  .append("circle")
  .attr("cx", function (d) { return d[0] } )
  .attr("cy", function (d) { return d[1] } )
  .attr("r", 3)
  .style("fill", "Red");

Prueba personal