Media 3

A) Puntos sueltos (con color y etiqueta):

///////////////////////////////////////////////////////////////

<svg id="grid-pts" data-range="-5,5"
  data-points="
  2,3|#000|A;
  -1,0|#f44336|B;
  0,0|#2e7d32|Origen
  "
  data-point-size="5" 
  data-point-labels="true">

//////////////////////////////////////////////////////

B) Muestras a X fijos sobre funciones (𝑥,𝑓(𝑥)):

<svg id="grid-x" data-range="-6,6" data-legend="true" 
  data-funcs="
  sin(x)|#1976d2|seno; 
  cos(x)|#d32f2f|coseno" 
  data-samplex="0; 1; 3.1416">
</svg>

////////////////////////////////////////////////////////////////////////////

C) Cortes a Y fijos (resuelve f(x)=y dentro del rango):

<svg id="grid-y" data-range="-6,6" data-legend="true"
  data-funcs="
  sin(x)|#7b1fa2|seno; 
  x/3|#388e3c|recta
  " 
  data-sampley="0.5; -0.5">
    data-point-size="4"&gt;
</svg>

////////////////////////////////////////////////////////////////////////

D) Rangos separados para X e Y (opcional):

<svg id="grid-rect" data-range-x="-10,10" data-range-y="-2,2"

  data-funcs="
  sin(x); 
  cos(x)
  "
  data-samplex="0; 1.57; 3.14"
  
  data-points="2,1|#000|P">
</svg>

Ejemplo mínimo:

OPCIONALES

expresion|color|etiqueta.

USE data-funcs="sin(x)|#d32f2f|seno; cos(x)|#1976d2|coseno"

Puntos sueltos

data-points="x,y|color|Etiqueta; ..."

data-points="2,3|#000|A; -1,0|#f44336|B"

Muestras de funciones a valores de X dados

data-samplex="0; 1; 3.14"

Muestras a valores de Y dados (resolver f(x)=y)

data-sampley="0.5; -0.5"

Tamaño de puntos

Con data-point-size="5" (por defecto es 4).

Mostrar/ocultar etiquetas de puntos

Con data-point-labels="true" (por defecto) o "false"


EJEMPLO 1

Ejemplo A – básico (2 funciones):

Ejemplo B – con colores, etiquetas y leyenda:

Ejemplo C – puntos sueltos:

Ejemplo D – puntos sobre funciones (muestras a X fijos):

Ejemplo E – cortes a Y fijos (resolver f(x)=y):

Por defecto, si solo usas data-range="-5,5", el sistema dibuja un cuadrado:

Si quieres independizar X e Y, usas data-range-x y data-range-y

TABLAS

Función / Constante	Uso	Ejemplo	Resultado
sin(x)	Seno (x en radianes)	sin(PI/2)	1
cos(x)	Coseno	cos(0)	1
tan(x)	Tangente	tan(PI/4)	1
log(x)	Logaritmo natural (ln)	log(E)	1
ln(x)	Alias de log(x)	ln(E^2)	2
log10(x)	Logaritmo base 10	log10(1000)	3
log2(x)	Logaritmo base 2	log2(8)	3
logb(x,b)	Logaritmo en base arbitraria	logb(81,3)	4
pow(x,y)	Potencia	pow(2,3)	8
sqrt(x)	Raíz cuadrada	sqrt(9)	3
abs(x)	Valor absoluto	abs(-5)	5
exp(x)	Exponencial$e^x$	exp(1)	2.718...
PI	Constante π	PI	3.14159...
E	Constante$e$	E	2.718...

Modificador	Descripción	Ejemplo	Resultado
+	No cambia, útil para combinar	+sin(x)	sin(x)
-	Cambia signo	-cos(x)	Inverso del coseno
Multiplicar	Escala vertical	2*sin(x)	Doble amplitud
Dividir	Escala vertical inversa	(1/2)*x	Mitad de pendiente
Composición	Anidar funciones	sin(x/2)	Seno comprimido
Potencia	Elevar resultados	(cos(x))^2	Coseno al cuadrado
Traslación X	Desplaza horizontal	sin(x-PI/2)	Seno corrido
Traslación Y	Desplaza vertical	sin(x)+1	Seno elevado
Escala X	Estira/contrae horizontal	sin(2*x)	Periodo halved
Combinación	Funciones sumadas	sin(x)+cos(x)	Suma de ondas

data-funcs="2*sin(x-PI/4)|#d32f2f|seno modificado"

////////////////////////////

<svg id="grid-1" style="width: 50%; height: 400px;" data-range-x="-6,6"
  data-range-y="-4,4"
  data-funcs="sin(x)|#1976d2|y=sin x; tan(x)|#d32f2f|y=tan x" data-legend="true"
  data-samplex="-3; -1; 0; 1; 3" data-sampley="-1; 0; 1" data-point-size="4">
</svg>

---------------

000009090900090

<!-- EJEMPLO DE USO -->
<svg id="grid-1"
     width="640" height="420"
     data-range-x="-10,10"
     data-range-y="-5,5"
     data-funcs="sin(x); x^2/10; log(abs(x))"
     data-labels="y=sin(x); y=x^2/10; y=ln|x|"
     data-colors="#1976d2; #e53935; #43a047"
     data-legend="true">
</svg>