| Sitio: | MATEMÁTICAS × Profe Arauco |
| Curso: | Scripts en educacion |
| Libro: | manual de mi pagina |
| Imprimido por: | Invitado |
| Día: | jueves, 23 de abril de 2026, 08:50 |
minimo
completo
/* ==================================================================
dibujarGraficoLineas(contenedorId, etiquetasX, valoresY, etiquetasEjes, color)
Dibuja un polígono de frecuencias o gráfico de líneas simple.
USO MÍNIMO:
- contenedorId: id del div donde se dibuja el gráfico.
- etiquetasX: arreglo con etiquetas o marcas de clase del eje X.
- valoresY: arreglo con frecuencias o valores del eje Y.
- etiquetasEjes: puede omitirse parcialmente; si falta, usa:
x = "Marca de clase"
y = "Frecuencia"
- color: opcional; si no se indica, usa un color por defecto.
EJEMPLO MÍNIMO EN HTML:
<div
id="poligono-1"
class="grafico-lineas-auto"
data-etiquetas-x='["4,5","14,5","24,5","34,5","44,5"]'
data-valores-y='[2,5,8,4,1]'>
</div>
EJEMPLO MÍNIMO DE LLAMADA DIRECTA:
dibujarGraficoLineas(
"poligono-1",
["4,5","14,5","24,5","34,5","44,5"],
[2,5,8,4,1],
{},
"#ff6200"
);
OPCIONES OPCIONALES DENTRO DE etiquetasEjes:
- x : nombre del eje X
- y : nombre del eje Y
- minY : mínimo manual del eje Y
- maxY : máximo manual del eje Y
- ticksY : cantidad manual de divisiones del eje Y
EJEMPLO COMPLETO EN HTML:
<div
id="poligono-2"
class="grafico-lineas-auto"
data-etiquetas-x='["4,5","14,5","24,5","34,5","44,5"]'
data-valores-y='[2,5,8,4,1]'
data-etiquetas-ejes='{
"x":"Marca de clase",
"y":"Frecuencia",
"minY":0,
"maxY":10,
"ticksY":5
}'
data-color="#ff6200">
</div>
EJEMPLO COMPLETO DE LLAMADA DIRECTA:
dibujarGraficoLineas(
"poligono-2",
["4,5","14,5","24,5","34,5","44,5"],
[2,5,8,4,1],
{
x: "Marca de clase",
y: "Frecuencia",
minY: 0,
maxY: 10,
ticksY: 5
},
"#ff6200"
);
COMPORTAMIENTO POR DEFECTO:
- Si no se indica minY, el eje Y parte en 0.
- Si no se indica maxY, se calcula automáticamente un máximo “bonito”.
- Si no se indica ticksY, se calcula automáticamente una cantidad razonable.
- Si etiquetasX contiene números como texto ("4,5", "14,5"), la función
intenta interpretarlos como valores numéricos para ubicar bien las marcas.
================================================================== */
minimo
completo
/* ==================================================================
dibujarHistograma(contenedorId, frecuencias, limites, color, minY, maxY, ticksY)
Dibuja un histograma con barras juntas.
USO MÍNIMO:
- contenedorId: id del div donde se dibuja el gráfico.
- frecuencias: arreglo de frecuencias.
- limites: arreglo de límites de clase.
Debe tener exactamente un elemento más que frecuencias.
- color: opcional; si no se indica, usa un color por defecto.
- minY, maxY, ticksY: opcionales.
EJEMPLO MÍNIMO EN HTML:
<div
id="histograma-1"
class="histograma-auto"
data-frecuencias='[2,5,8,4,1]'
data-limites='[0,10,20,30,40,50]'>
</div>
EJEMPLO MÍNIMO DE LLAMADA DIRECTA:
dibujarHistograma(
"histograma-1",
[2,5,8,4,1],
[0,10,20,30,40,50],
"#ff6200"
);
PARÁMETROS OPCIONALES:
- minY : mínimo manual del eje Y
- maxY : máximo manual del eje Y
- ticksY : cantidad manual de divisiones del eje Y
EJEMPLO COMPLETO EN HTML:
<div
id="histograma-2"
class="histograma-auto"
data-frecuencias='[2,5,8,4,1]'
data-limites='[0,10,20,30,40,50]'
data-color="#ff6200"
data-min-y="0"
data-max-y="10"
data-ticks-y="5">
</div>
EJEMPLO COMPLETO DE LLAMADA DIRECTA:
dibujarHistograma(
"histograma-2",
[2,5,8,4,1],
[0,10,20,30,40,50],
"#ff6200",
0,
10,
5
);
COMPORTAMIENTO POR DEFECTO:
- Si no se indica minY, el eje Y parte en 0.
- Si no se indica maxY, se calcula automáticamente un máximo “bonito”.
- Si no se indica ticksY, se calcula automáticamente una cantidad razonable.
- Cada barra representa un intervalo y su altura corresponde a la frecuencia.
================================================================== */
minimo
maximo
/* ==================================================================
dibujarGraficoBarra(contenedorId, frecuencias, etiquetasX, color, minY, maxY, ticksY, posicionEtiquetas)
Dibuja un gráfico de barras simple.
USO MÍNIMO:
- contenedorId: id del div donde se dibuja el gráfico.
- frecuencias: arreglo de frecuencias o valores.
- etiquetasX: arreglo de etiquetas del eje X.
- color: opcional; si no se indica, usa un color por defecto.
- minY, maxY, ticksY: opcionales.
- posicionEtiquetas: opcional.
1 = etiquetas horizontales
0 = etiquetas verticales
EJEMPLO MÍNIMO EN HTML:
<div
id="barras-1"
class="grafico-barra-auto"
data-frecuencias='[6,9,4,7]'
data-etiquetas='["Manzana","Plátano","Naranja","Uva"]'>
</div>
EJEMPLO MÍNIMO DE LLAMADA DIRECTA:
dibujarGraficoBarra(
"barras-1",
[6,9,4,7],
["Manzana","Plátano","Naranja","Uva"],
"#ff6200"
);
PARÁMETROS OPCIONALES:
- minY : mínimo manual del eje Y
- maxY : máximo manual del eje Y
- ticksY : cantidad manual de divisiones del eje Y
- posicionEtiquetas : 1 para horizontal, 0 para vertical
EJEMPLO COMPLETO EN HTML:
<div
id="barras-2"
class="grafico-barra-auto"
data-frecuencias='[6,9,4,7]'
data-etiquetas='["Manzana","Plátano","Naranja","Uva"]'
data-color="#ff6200"
data-min-y="0"
data-max-y="10"
data-ticks-y="5"
data-posicion-etiquetas="0">
</div>
EJEMPLO COMPLETO DE LLAMADA DIRECTA:
dibujarGraficoBarra(
"barras-2",
[6,9,4,7],
["Manzana","Plátano","Naranja","Uva"],
"#ff6200",
0,
10,
5,
0
);
COMPORTAMIENTO POR DEFECTO:
- Si no se indica minY, el eje Y parte en 0.
- Si no se indica maxY, se calcula automáticamente un máximo “bonito”.
- Si no se indica ticksY, se calcula automáticamente una cantidad razonable.
- Si no se indica posicionEtiquetas, las etiquetas se muestran horizontales.
================================================================== */
/* ==================================================================
dibujarGraficoCircular(contenedorId, datos)
Dibuja un gráfico circular con leyenda.
USO MÍNIMO:
- contenedorId: id del div donde se dibuja el gráfico.
- datos: arreglo de objetos con esta forma:
{ label: "Texto", valor: número, color: "#hex" }
EJEMPLO MÍNIMO EN HTML:
<div
id="circular-1"
class="grafico-circular-auto"
data-datos='[
{"label":"A","valor":6,"color":"#ff9800"},
{"label":"B","valor":9,"color":"#4caf50"},
{"label":"C","valor":3,"color":"#2196f3"}
]'>
</div>
EJEMPLO MÍNIMO DE LLAMADA DIRECTA:
dibujarGraficoCircular("circular-1", [
{ label: "A", valor: 6, color: "#ff9800" },
{ label: "B", valor: 9, color: "#4caf50" },
{ label: "C", valor: 3, color: "#2196f3" }
]);
OBSERVACIONES:
- Si falta color en algún sector, se asigna un color por defecto.
- Si un valor es 0, no se dibuja sector, pero sí puede aparecer en la leyenda.
- Si el total es 0, la función muestra un mensaje en vez del gráfico.
================================================================== */
minimo
completo
ejemplo alternativo
/* ==================================================================
// Dibuja una ojiva o gráfico de frecuencia acumulada.
//
// FORMAS VÁLIDAS DE USO
// 1) limites y frecAcumuladas con el mismo largo:
// - Se interpreta que cada par (x,y) ya viene completo.
// - Ejemplo:
// limites = [0,10,20,30,40,50]
// frecAcumuladas = [0,3,8,15,19,20]
//
// 2) limites con un elemento más que frecAcumuladas:
// - Se interpreta que los límites incluyen el punto inicial del eje X,
// pero las frecuencias acumuladas empiezan recién en el primer límite superior.
// - En este caso la función agrega automáticamente la frecuencia 0 al inicio.
// - Ejemplo:
// limites = [0,10,20,30,40,50]
// frecAcumuladas = [3,8,15,19,20]
// La función lo transforma internamente en:
// xDatos = [0,10,20,30,40,50]
// yDatos = [0,3,8,15,19,20]
//
// PARÁMETROS
// - contenedorId: id del div donde se dibuja el SVG
// - limites: arreglo de valores del eje X
// - frecAcumuladas: arreglo de frecuencias acumuladas
// - color: color de la línea y de los puntos
// - minY: mínimo manual del eje Y
// - maxY: máximo manual del eje Y
// - ticksY: cantidad de divisiones del eje Y
// - etiquetasEjes: objeto con las etiquetas de los ejes
// Ejemplo: { x: "Tiempo (min)", y: "Estudiantes acumulados" }
//
// COMPORTAMIENTO
// - Si minY no se entrega, parte en 0.
// - Si maxY no se entrega, se calcula automáticamente.
// - Si ticksY no se entrega, se estima automáticamente.
// - Si no se entregan etiquetas de ejes, usa títulos por defecto.
// - Dibuja líneas guía horizontales, ejes, marcas, etiquetas, la polilínea
// de la ojiva y los puntos correspondientes.
================================================ */
minimo
maximo
/* ==================================================================
dibujarGraficoCaja(contenedorId, datos, color)
Dibuja un diagrama de caja y bigotes.
ESPERA UN OBJETO datos CON:
- min
- q1
- mediana
- q3
- max
OPCIONALES DENTRO DE datos:
- limiteMin : mínimo manual del eje X
- limiteMax : máximo manual del eje X
- salto : separación manual entre marcas del eje X
EJEMPLO MÍNIMO EN HTML:
<div
id="caja-1"
class="caja-auto"
data-valores='{
"min":10,
"q1":15,
"mediana":20,
"q3":25,
"max":30
}'>
</div>
EJEMPLO COMPLETO EN HTML:
<div
id="caja-2"
class="caja-auto"
data-valores='{
"min":10,
"q1":15,
"mediana":20,
"q3":25,
"max":30,
"limiteMin":0,
"limiteMax":40,
"salto":5
}'
data-color="rgba(255, 159, 64, 0.5)">
</div>
COMPORTAMIENTO POR DEFECTO:
- Si no se indican limiteMin y limiteMax, se estiman automáticamente.
- Si no se indica salto, se calcula automáticamente uno razonable.
================================================================== */
minimo
maximo
minimo
/* ==================================================================
dibujarPictograma(contenedorId, datos, icono, valorPorIcono, color)
Dibuja un pictograma usando íconos SVG.
ESPERA:
- contenedorId: id del div donde se dibuja el pictograma.
- datos: arreglo de objetos con forma:
{ label: "Texto", valor: número }
- icono: path SVG del ícono
- valorPorIcono: cuánto representa cada ícono completo
- color: color de los íconos
EJEMPLO MÍNIMO EN HTML:
<div
id="pictograma-1"
class="pictograma-auto"
data-datos='[
{"label":"A","valor":6},
{"label":"B","valor":9},
{"label":"C","valor":3}
]'
data-icono="M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7z"
data-valor-por-icono="2"
data-color="#ff6200">
</div>
COMPORTAMIENTO:
- Cada ícono completo representa valorPorIcono unidades.
- Si sobra una parte, se dibuja un ícono fraccionado.
- Si valorPorIcono no es válido, no dibuja.
================================================================== */
Esta página resume cómo usar los dos archivos:
diagramas-relacionesv2.js motor principal diagramas-relaciones-autov2.js auto-render
La idea es que puedas trabajar de dos maneras:
<canvas> y llamas una función JS.<div> con clase y data-config, y el script crea el canvas solo.Primero debe cargarse el motor y después el archivo auto.
<script src="diagramas-relacionesv2.js"></script>
<script src="diagramas-relaciones-autov2.js"></script>Si cargas primero el archivo auto, este buscará window.DiagramasRelaciones y fallará.
El motor deja disponible el objeto:
window.DiagramasRelacionesY dentro de ese objeto quedan estas funciones:
crearDiagramaSagitalcrearDiagramaComposicioncrearDiagramaAutoSagitalcrearGrafoRelacionAdemás, por compatibilidad legacy, las funciones también quedan exportadas globalmente.
El archivo automático deja disponible:
window.DiagramasRelacionesAutoinicializar(root)redibujar(ref)autoInicializar()obtenerAPI()redibujar(ref) acepta el id del contenedor o el elemento mismo.
| Tipo | Función directa | Clase auto | data-tipo alternativo |
|---|---|---|---|
| Sagital A → B | crearDiagramaSagital |
diagrama-sagital-auto |
sagital |
| Composición A → B → C | crearDiagramaComposicion |
diagrama-composicion-auto |
composicion |
| Auto-sagital A × A | crearDiagramaAutoSagital |
diagrama-autosagital-auto |
autosagital |
| Grafo de relación | crearGrafoRelacion |
grafo-relacion-auto |
grafo o grafo-relacion |
<canvas id="miCanvas" width="620" height="420"></canvas>
<script src="diagramas-relacionesv2.js"></script>
<script>
crearDiagramaSagital("miCanvas", {
nombreA: "A",
nombreB: "B",
nombreRelacion: "f",
elementosA: ["1","2","3"],
elementosB: ["2","4","6"],
pares: [["1","2"],["2","4"],["3","6"]]
});
</script><div class="diagrama-sagital-auto"
data-config='{
"nombreA":"A",
"nombreB":"B",
"nombreRelacion":"f",
"elementosA":["1","2","3"],
"elementosB":["2","4","6"],
"pares":[["1","2"],["2","4"],["3","6"]]
}'></div>
<script src="diagramas-relacionesv2.js"></script>
<script src="diagramas-relaciones-autov2.js"></script>El auto-render crea el canvas solo, usando anchos y altos por defecto según el tipo de diagrama.
| Atributo | Uso |
|---|---|
class |
Define el tipo, por ejemplo diagrama-sagital-auto. |
data-tipo |
Alternativa genérica si usas class="diagrama-auto". |
data-config |
Configuración JSON del diagrama. |
data-width |
Ancho del canvas. |
data-height |
Alto del canvas. |
.diagrama-sagital-auto
.diagrama-composicion-auto
.diagrama-autosagital-auto
.grafo-relacion-auto
.diagrama-auto[data-tipo]Cuando el documento termina de cargar, el script recorre esos contenedores y dibuja automáticamente.
| Claves | nombreA, nombreB, nombreRelacion, elementosA, elementosB, pares |
|---|---|
| Opcionales | radioNodo, altoConjunto, anchoConjunto, centroAx, centroBx, yTop, colorFlecha, grosorFlecha |
| Suspensivos | mostrarSuspensivosInicioA, mostrarSuspensivosFinA, mostrarSuspensivosInicioB, mostrarSuspensivosFinB, y sus textos asociados |
| Claves | nombreA, nombreB, nombreC, paresAB, paresBC |
|---|---|
| Opcionales | nombreRelacionAB, nombreRelacionBC, nombreCompuesta, mostrarCompuesta, paresCompuestos |
| Observación | Si activas mostrarCompuesta y no das paresCompuestos, el motor intenta calcularlos. |
| Claves | nombreA o nombreConjunto, elementos, pares |
|---|---|
| Observación | Internamente reutiliza el diagrama sagital usando el mismo conjunto a ambos lados. |
| Claves | elementos y pares |
|---|---|
| Opcionales | nombreRelacion, radioNodo, radioGrafo, curvatura, colorNodo, colorBordeNodo, colorFlecha |
| Observación | Si existe la inversa de un par, dibuja flechas curvas; si es un lazo, dibuja un bucle sobre el nodo. |
{
"nombreA":"A",
"nombreB":"B",
"nombreRelacion":"f",
"elementosA":["1","2","3"],
"elementosB":["2","4","6"],
"pares":[["1","2"],["2","4"],["3","6"]]
}{
"nombreA":"A",
"nombreB":"B",
"nombreC":"C",
"nombreRelacionAB":"g",
"nombreRelacionBC":"f",
"nombreCompuesta":"f ∘ g",
"paresAB":[["1","a"],["2","b"],["3","c"]],
"paresBC":[["a","x"],["b","y"],["c","z"]],
"mostrarCompuesta":true
}{
"nombreRelacion":"R",
"elementos":["1","2","3"],
"pares":[["1","2"],["2","1"],["2","2"],["3","1"]]
}// Redibujar por id del contenedor auto
DiagramasRelacionesAuto.redibujar("miDiagrama");
// O por referencia al elemento
const el = document.getElementById("miDiagrama");
DiagramasRelacionesAuto.redibujar(el);data-config, usa JSON válido: comillas dobles, listas correctas y sin comas sobrantes.La página de ejemplos viene con diagramas ya listos para copiar, editar y probar.
Esta página muestra ejemplos funcionando en los dos estilos:
uso directo uso automático
<canvas id="canvas-sagital" width="620" height="420"></canvas>
<script>
crearDiagramaSagital("canvas-sagital", {
nombreA: "A",
nombreB: "B",
nombreRelacion: "f",
elementosA: ["1","2","3","4"],
elementosB: ["2","4","6","8"],
pares: [["1","2"],["2","4"],["3","6"],["4","8"]]
});
</script><canvas id="canvas-grafo" width="620" height="420"></canvas>
<script>
crearGrafoRelacion("canvas-grafo", {
nombreRelacion: "R",
elementos: ["1","2","3","4"],
pares: [["1","2"],["2","1"],["2","2"],["3","4"],["4","3"],["4","4"]]
});
</script><div class="diagrama-composicion-auto"
data-config='{
"nombreA":"A",
"nombreB":"B",
"nombreC":"C",
"nombreRelacionAB":"g",
"nombreRelacionBC":"f",
"nombreCompuesta":"f ∘ g",
"paresAB":[["1","a"],["2","b"],["3","c"]],
"paresBC":[["a","x"],["b","y"],["c","z"]],
"mostrarCompuesta":true
}'></div><div class="diagrama-autosagital-auto"
data-config='{
"nombreConjunto":"A",
"nombreRelacion":"R",
"elementos":["1","2","3","4"],
"pares":[["1","2"],["2","3"],["3","3"],["4","1"]]
}'></div><div class="diagrama-auto"
data-tipo="grafo"
data-width="620"
data-height="420"
data-config='{
"nombreRelacion":"S",
"elementos":["a","b","c"],
"pares":[["a","b"],["b","c"],["c","a"],["b","b"]]
}'></div>const contenedor = document.getElementById("demo-autosagital");
contenedor.setAttribute("data-config", JSON.stringify({
nombreConjunto: "B",
nombreRelacion: "T",
elementos: ["0","1","2"],
pares: [["0","1"],["1","2"],["2","0"]]
}));
DiagramasRelacionesAuto.redibujar(contenedor);Esto sirve mucho cuando quieres regenerar el diagrama desde botones, formularios o editores propios.
crearDiagramaSagital("canvas-suspensivos", {
nombreA: "N",
nombreB: "P",
nombreRelacion: "f",
elementosA: ["1","2","3","4"],
elementosB: ["2","4","6","8"],
pares: [["1","2"],["2","4"],["3","6"],["4","8"]],
mostrarSuspensivosInicioA: true,
mostrarSuspensivosFinA: true,
mostrarSuspensivosFinB: true
});<script src="diagramas-relacionesv2.js"></script>
<script src="diagramas-relaciones-autov2.js"></script>
Un editor optimizado para que la ia pueda dibujar
y un humano pueda dibujar o ajustar.
Esta documentación resume cómo trabajar con los archivos:
diagramasvenn-renderv2.js motor principal diagramasvenn-autov2.js auto-render
El sistema trabaja con diagramas de 2 conjuntos y de 3 conjuntos, tanto en modo directo como automático.
<script src="diagramasvenn-renderv2.js"></script>
<script src="diagramasvenn-autov2.js"></script>Primero va el motor y después el archivo automático.
window.DiagramasVenncrearDiagramaConjuntoscrearDiagramaConjuntos2crearDiagramaConjuntos3window.DiagramasVennAutoinicializar(root)redibujar(ref)autoInicializar()obtenerAPI()obtenerDefinicionDesdeContenedor()| Tipo | Función directa | Clase auto | data-tipo |
|---|---|---|---|
| Venn de 2 conjuntos | crearDiagramaConjuntos2 |
diagrama-conjuntos2-auto |
conjuntos2, venn2, 2 |
| Venn de 3 conjuntos | crearDiagramaConjuntos3 |
diagrama-conjuntos3-auto |
conjuntos3, venn3, 3 |
| Modo genérico | crearDiagramaConjuntos |
diagrama-conjuntos-auto |
se decide por modo o tipo |
<canvas id="venn2" width="760" height="500"></canvas>
<script src="diagramasvenn-renderv2.js"></script>
<script>
crearDiagramaConjuntos2("venn2", {
nombreUniverso: "U",
nombreA: "A",
nombreB: "B",
A: ["1","2","3"],
B: ["3","4","5"],
operacion: "union"
});
</script><div class="diagrama-conjuntos2-auto"
data-config='{
"nombreUniverso":"U",
"nombreA":"A",
"nombreB":"B",
"A":["1","2","3"],
"B":["3","4","5"],
"operacion":"union"
}'></div>class |
Tipo del contenedor automático. |
|---|---|
data-tipo |
conjuntos2, venn2, 2, conjuntos3, venn3, 3. |
data-config |
Configuración JSON. |
data-width |
Ancho lógico del canvas. |
data-height |
Alto lógico del canvas. |
.diagrama-conjuntos2-auto
.diagrama-conjuntos3-auto
.diagrama-conjuntos-auto[data-tipo]Puedes pasar los conjuntos como A, B, C, o dentro de conjuntos.
{
"A":["1","2","3"],
"B":["3","4","5"]
}{
"conjuntos":{
"A":["1","2","3"],
"B":["3","4","5"]
}
}A |
Sombréa todo A. |
|---|---|
B |
Sombréa todo B. |
union |
A ∪ B |
interseccion |
A ∩ B |
diferenciaAB |
A − B |
diferenciaBA |
B − A |
diferenciaSimetrica |
A △ B |
complementoA |
Aᶜ |
complementoB |
Bᶜ |
exterior |
U − (A ∪ B) |
universo |
Todo U. |
ninguna |
Sin sombreado. |
A, B, C |
Sombréa cada conjunto. |
|---|---|
unionABC |
A ∪ B ∪ C |
unionAB, unionAC, unionBC |
Uniones parciales. |
interseccionAB, interseccionAC, interseccionBC |
Intersecciones dobles. |
interseccionABC |
A ∩ B ∩ C |
diferenciaA_BC, diferenciaB_AC, diferenciaC_AB |
Diferencias respecto de los otros dos conjuntos. |
complementoA, complementoB, complementoC |
Complementos. |
exterior |
U − (A ∪ B ∪ C) |
universo |
Todo U. |
ninguna |
Sin sombreado. |
Para 2 conjuntos: A_only, B_only, AB, OUT.
Para 3 conjuntos: A_only, B_only, C_only, AB_only, AC_only, BC_only, ABC, OUT.
{
"regionesActivas":["A_only","AB"]
}mostrarEtiquetas |
Muestra u oculta etiquetas simples. |
|---|---|
mostrarCardinalidadConjuntos |
Muestra n(A), n(B), n(C). |
formatoCardinalidadConjunto |
Plantilla, por ejemplo "n({nombre})={n}". |
mostrarCardinalidad |
Muestra cardinalidad por región. |
mostrarCardinalidadCero |
Permite mostrar regiones vacías con 0. |
prefijoCardinalidad |
Prefijo regional, por defecto #. |
mostrarNombreOperacion |
Muestra la operación en el pie. |
mostrarCardinalidadOperacion |
Muestra el total de la operación activa. |
prefijoCardinalidadOperacion |
Prefijo del pie, por ejemplo n=. |
El motor detecta si A y B son coincidentes, A_en_B, B_en_A, disjuntos o superpuestos.
Si quieres, puedes forzar la relación gráfica:
{
"layout":"manual",
"relacionGrafica":"disjuntos",
"validarConsistenciaVisual":true
}const contenedor = document.getElementById("miVenn");
contenedor.setAttribute("data-config", JSON.stringify({
nombreA: "A",
nombreB: "B",
A: ["1","2","3"],
B: ["3","4","5"],
operacion: "interseccion"
}));
DiagramasVennAuto.redibujar(contenedor);Ejemplos directos y automáticos para Venn de 2 y 3 conjuntos.
Venn 2 Venn 3 operaciones cardinalidades layout manual
crearDiagramaConjuntos2("venn2-directo", {
nombreUniverso: "U",
nombreA: "A",
nombreB: "B",
A: ["1","2","3","4"],
B: ["3","4","5","6"],
operacion: "interseccion",
mostrarCardinalidadConjuntos: true,
mostrarCardinalidad: true,
mostrarCardinalidadOperacion: true
});crearDiagramaConjuntos3("venn3-directo", {
nombreUniverso: "U",
nombreA: "A",
nombreB: "B",
nombreC: "C",
A: ["1","2","3","4","7"],
B: ["3","4","5","6","7"],
C: ["2","4","6","7","8"],
operacion: "interseccionABC",
mostrarCardinalidadConjuntos: true,
mostrarCardinalidad: true
});<div class="diagrama-conjuntos2-auto"
data-config='{
"nombreUniverso":"U",
"nombreA":"M",
"nombreB":"P",
"A":["2","4","6","8"],
"B":["3","6","9","12"],
"operacion":"union"
}'></div><div class="diagrama-conjuntos3-auto"
data-config='{
"nombreUniverso":"U",
"nombreA":"A",
"nombreB":"B",
"nombreC":"C",
"A":["1","2","3","7"],
"B":["3","4","5","7"],
"C":["2","5","6","7"],
"operacion":"unionABC"
}'></div><div class="diagrama-conjuntos-auto"
data-tipo="venn2"
data-width="760"
data-height="500"
data-config='{
"nombreUniverso":"U",
"nombreA":"A",
"nombreB":"B",
"A":["a","b","c","d"],
"B":["c","d","e","f"],
"operacion":"diferenciaSimetrica"
}'></div>crearDiagramaConjuntos2("venn-regiones", {
nombreA: "A",
nombreB: "B",
A: ["1","2","3","4"],
B: ["3","4","5","6"],
regionesActivas: ["A_only","AB"],
mostrarNombreOperacion: false,
mostrarCardinalidad: true
});crearDiagramaConjuntos2("venn-layout-manual", {
nombreA: "A",
nombreB: "B",
A: ["1","2"],
B: ["1","2","3","4","5"],
layout: "manual",
relacionGrafica: "disjuntos",
validarConsistenciaVisual: true,
operacion: "union",
mostrarCardinalidadConjuntos: true
});crearDiagramaConjuntos2("venn-cardinalidades", {
nombreA: "A",
nombreB: "B",
A: ["1","2","3","4","5"],
B: ["4","5","6","7"],
operacion: "complementoA",
mostrarCardinalidad: true,
mostrarCardinalidadCero: true,
prefijoCardinalidad: "#",
mostrarCardinalidadOperacion: true,
prefijoCardinalidadOperacion: "n="
});const contenedor = document.getElementById("venn2-auto");
contenedor.setAttribute("data-config", JSON.stringify({
nombreUniverso: "U",
nombreA: "A",
nombreB: "B",
A: ["1","2","3"],
B: ["3","4","5"],
operacion: "interseccion",
mostrarCardinalidad: true,
mostrarCardinalidadConjuntos: true
}));
DiagramasVennAuto.redibujar(contenedor);<script src="diagramasvenn-renderv2.js"></script>
<script src="diagramasvenn-autov2.js"></script>Esta página resume cómo usar los archivos:
rectaeintervalos_renderv1.js motor principal rectaeintervalos_autov1.js auto-render
El sistema permite dibujar rectas numéricas, intervalos, uniones, intersecciones y soluciones sobre la misma recta.
<script src="rectaeintervalos_renderv1.js"></script>
<script src="rectaeintervalos_autov1.js"></script>Primero se carga el motor y después el archivo automático.
window.RectaIntervalosparseConstExprparseRangeparseStepnormalizarConfigcrearRectaIntervaloscrearRectaSimplewindow.RectaIntervalosAutoinicializar(root)redibujar(ref)reinicializarTodo()autoInicializar()obtenerAPI()obtenerDefinicionDesdeContenedor()| Tipo | Clase | data-tipo |
|---|---|---|
| Recta numérica / intervalos | recta-intervalos-auto |
recta-intervalos, recta, intervalos, recta-numerica |
| Alias equivalente | recta-numerica-auto |
mismos valores |
| Modo genérico | recta-auto |
uno de los valores anteriores |
<canvas id="miRecta" width="760" height="250"></canvas>
<script src="rectaeintervalos_renderv1.js"></script>
<script>
RectaIntervalos.crearRectaIntervalos("miRecta", {
range: ["-5","5"],
majorStep: "1",
intervals: [
{ id:"A", from:"-2", to:"3", leftClosed:true, rightClosed:false }
]
});
</script><div class="recta-intervalos-auto"
data-config='{
"range":["-5","5"],
"majorStep":"1",
"intervals":[
{"id":"A","from":"-2","to":"3","leftClosed":true,"rightClosed":false}
]
}'></div>class |
Tipo del contenedor. |
|---|---|
data-tipo |
Permite usar el modo genérico recta-auto. |
data-config |
Configuración JSON del dibujo. |
data-width |
Ancho lógico del canvas. |
data-height |
Alto lógico del canvas. |
.recta-intervalos-auto
.recta-numerica-auto
.recta-auto[data-tipo]La propiedad range recibe dos extremos, por ejemplo:
"range":["-5","5"]El motor puede interpretar números, fracciones y constantes como pi, π y e.
"range":["-pi","2*pi"]majorStep también acepta fracciones o múltiplos simbólicos:
"majorStep":"1"
"majorStep":"1/2"
"majorStep":"pi/2"lineMode |
finite, infinite, ray-left, ray-right. |
|---|---|
majorStep |
Paso principal. |
minorDivisions |
Cuántas subdivisiones tiene cada paso principal. |
labelMode |
auto, decimal, fraction. |
showMajorTicks |
Muestra marcas principales. |
showMinorTicks |
Muestra marcas secundarias. |
showMajorLabels |
Muestra etiquetas principales. |
showMinorLabels |
Muestra etiquetas secundarias. |
showEndLabels |
Muestra etiquetas en los extremos. |
showArrows |
Muestra flechas cuando la recta lo requiere. |
labelValues |
Lista opcional de valores concretos que sí se etiquetan. |
Cada intervalo se define dentro de intervals.
{
"id":"A",
"from":"-2",
"to":"3",
"leftClosed":true,
"rightClosed":false
}id |
Identificador del intervalo. |
|---|---|
from |
Extremo izquierdo. |
to |
Extremo derecho. |
leftClosed |
Indica si el extremo izquierdo es cerrado. |
rightClosed |
Indica si el extremo derecho es cerrado. |
color |
Color de relleno de la banda. |
stroke |
Color del borde. |
lineWidth |
Grosor del borde. |
La propiedad solutions permite dibujar resultados calculados a partir de los intervalos base.
{
"id":"U1",
"type":"union",
"of":["A","B"]
}{
"id":"I1",
"type":"intersection",
"of":["A","B"]
}type |
union o intersection. |
|---|---|
of |
Lista de ids o índices de intervalos a combinar. |
fill |
Color de relleno de la solución. |
stroke |
Color del borde. |
pointClosedFill |
Color de puntos cerrados. |
pointOpenFill |
Color de puntos abiertos. |
pointStroke |
Borde de puntos. |
showEmptyText |
Si una intersección es vacía, puede mostrar ∅. |
emptyText |
Texto para la solución vacía. |
Dentro de style puedes ajustar colores y medidas.
| Base de la recta | axisColor, tickColor, labelColor, axisWidth |
|---|---|
| Intervalos | intervalFill, intervalStroke, intervalHeight, pointRadius |
| Capas | layerOffset, baseThicknessStep |
| Soluciones | unionFill, intersectionFill, solutionLineWidth, solutionHeightExtra |
| Texto vacío | emptySolutionText, emptySolutionColor, emptySolutionFont |
Si quieres mostrar solo algunas etiquetas, usa labelValues.
{
"range":["-5","5"],
"majorStep":"1",
"labelValues":["-4","-2","0","2","4"]
}const contenedor = document.getElementById("miRecta");
contenedor.setAttribute("data-config", JSON.stringify({
range: ["-5","5"],
majorStep: "1",
intervals: [
{ id:"A", from:"-3", to:"1", leftClosed:true, rightClosed:false }
]
}));
RectaIntervalosAuto.redibujar(contenedor);Esta página muestra ejemplos directos y automáticos con intervalos, uniones, intersecciones y distintos formatos de etiquetado.
recta intervalos unión intersección fracciones π
RectaIntervalos.crearRectaIntervalos("recta-simple", {
range: ["-5","5"],
majorStep: "1",
intervals: [
{ id:"A", from:"-2", to:"3", leftClosed:true, rightClosed:false }
]
});RectaIntervalos.crearRectaIntervalos("recta-soluciones", {
range: ["-6","6"],
majorStep: "1",
intervals: [
{ id:"A", from:"-4", to:"1", leftClosed:true, rightClosed:false },
{ id:"B", from:"-1", to:"4", leftClosed:false, rightClosed:true }
],
solutions: [
{ id:"U", type:"union", of:["A","B"] },
{ id:"I", type:"intersection", of:["A","B"] }
]
});<div class="recta-intervalos-auto"
data-config='{
"range":["-5","5"],
"majorStep":"1",
"intervals":[
{"id":"A","from":"-3","to":"2","leftClosed":true,"rightClosed":false},
{"id":"B","from":"0","to":"4","leftClosed":true,"rightClosed":true}
],
"solutions":[
{"id":"U","type":"union","of":["A","B"]},
{"id":"I","type":"intersection","of":["A","B"]}
]
}'></div><div class="recta-auto"
data-tipo="recta"
data-width="760"
data-height="260"
data-config='{
"range":["-4","8"],
"majorStep":"2",
"minorDivisions":2,
"intervals":[
{"id":"C","from":"1","to":"6","leftClosed":false,"rightClosed":true}
]
}'></div>RectaIntervalos.crearRectaIntervalos("recta-fracciones", {
range: ["-2","2"],
majorStep: "1/2",
labelMode: "fraction",
intervals: [
{ id:"F", from:"-3/2", to:"1/2", leftClosed:true, rightClosed:false }
]
});RectaIntervalos.crearRectaIntervalos("recta-pi", {
range: ["-pi","2*pi"],
majorStep: "pi/2",
intervals: [
{ id:"P", from:"0", to:"pi", leftClosed:true, rightClosed:true }
]
});RectaIntervalos.crearRectaIntervalos("recta-labelvalues", {
range: ["-5","5"],
majorStep: "1",
labelValues: ["-4","-2","0","2","4"],
intervals: [
{ id:"L", from:"-4","to":"4","leftClosed":true,"rightClosed":true }
]
});RectaIntervalos.crearRectaIntervalos("recta-infinita", {
range: ["-5","5"],
lineMode: "infinite",
majorStep: "1",
intervals: [
{ id:"R", from:"-1","to":"3","leftClosed":false,"rightClosed":true }
]
});const contenedor = document.getElementById("recta-auto-1");
contenedor.setAttribute("data-config", JSON.stringify({
range: ["-6","6"],
majorStep: "1",
intervals: [
{ id:"A", from:"-5", to:"-1", leftClosed:true, rightClosed:false },
{ id:"B", from:"-2", to:"3", leftClosed:true, rightClosed:true }
],
solutions: [
{ id:"I", type:"intersection", of:["A","B"] }
]
}));
RectaIntervalosAuto.redibujar(contenedor);<script src="rectaeintervalos_renderv1.js"></script>
<script src="rectaeintervalos_autov1.js"></script>
Problema: Se gira una ruleta con resultados 1, 2, 3 y 4. Luego se lanza un dado dos veces. Se representa el árbol de trayectorias y se estudian eventos sobre sus hojas.
Eventos del ejemplo
A: la ruleta muestra un número par.
B: la suma de los dos dados es mayor o igual que 8.
C: la ruleta coincide con el primer dado.
A ∪ B: ocurre A o ocurre B.
A ∩ B: ocurre A y ocurre B.
Ac: no ocurre A.
Problema: Se lanzan 3 monedas. Se representa el árbol de trayectorias y se resalta el evento: obtener 2 o más caras.
Evento del ejemplo
A: obtener 2 o más caras.
Ac: obtener menos de 2 caras.
Evento A: Primera ruleta es PAR y (Suma de 2° y 3°) < 7.
Esta versión del manual muestra en cada bloque el código y, justo debajo, el resultado renderizado del ejemplo.
DiarbolAuto y DiarbolEventos están disponibles globalmente. Si tus scripts reales tienen otros nombres o rutas, solo cambia los <script src="..."> del encabezado.2. Dados: suma mayor o igual que 8
3. Monedas: primera cara y total 2
| Módulo | Rol |
|---|---|
DiarbolAuto |
Construcción rápida de árboles. |
DiarbolEventos |
Definición y resaltado de eventos semánticos. |
value |
Valor semántico usado por las expresiones del DSL. |
{ "pos": n } |
Toma el valor del evento ubicado en la posición n. |
sum, gte, lte, gt, lt o comparaciones numéricas, cada rama debe llegar al árbol con su propiedad value correctamente definida.Supuesto: Cara = 1 y Sello =
0.
const inst = DiarbolAuto.dibujarMoneda('#render-moneda', {
lanzamientos: 3
});
DiarbolEventos.definirEventoDesdeExpresion(inst, 'alMenos2Caras', {
"gte": [
{
"sum": [
{ "pos": 1 },
{ "pos": 2 },
{ "pos": 3 }
]
},
{ "const": 2 }
]
});
DiarbolEventos.resaltarEvento(inst, 'alMenos2Caras', {
color: '#27ae60'
});
Evento clásico para mostrar comparaciones con suma.
const inst = DiarbolAuto.dibujarDado('#render-dado', {
lanzamientos: 2
});
DiarbolEventos.definirEventoDesdeExpresion(inst, 'sumaMayorIgual8', {
"gte": [
{
"sum": [
{ "pos": 1 },
{ "pos": 2 }
]
},
{ "const": 8 }
]
});
DiarbolEventos.resaltarEvento(inst, 'sumaMayorIgual8', {
color: '#ef6c00'
});
Combina un criterio puntual y una condición global.
const inst = DiarbolAuto.dibujarMoneda('#render-moneda2', {
lanzamientos: 3
});
DiarbolEventos.definirEventoDesdeExpresion(inst, 'eventoA', {
"and": [
{ "eq": [ { "pos": 1 }, { "const": 1 } ] },
{
"eq": [
{
"sum": [
{ "pos": 1 },
{ "pos": 2 },
{ "pos": 3 }
]
},
{ "const": 2 }
]
}
]
});
DiarbolEventos.resaltarEvento(inst, 'eventoA', {
color: '#1565c0'
});
Aquí se usan conteos en los elementos de la urna.
const inst = DiarbolAuto.dibujarExtraccionConReposicion('#render-rep', {
extracciones: 2,
elementos: [
{ label: 'Roja', nodeLabel: 'R', value: 1, count: 3, tipo: 'entero', dominio: 'urna' },
{ label: 'Azul', nodeLabel: 'A', value: 0, count: 2, tipo: 'entero', dominio: 'urna' }
]
});
DiarbolEventos.definirEventoDesdeExpresion(inst, 'dosRojas', {
"and": [
{ "eq": [ { "pos": 1 }, { "const": 1 } ] },
{ "eq": [ { "pos": 2 }, { "const": 1 } ] }
]
});
DiarbolEventos.resaltarEvento(inst, 'dosRojas', {
color: '#c62828'
});
Muy útil para mostrar cómo cambia el espacio muestral.
const inst = DiarbolAuto.dibujarExtraccionSinReposicion('#render-sinrep', {
extracciones: 2,
elementos: [
{ label: 'Roja', nodeLabel: 'R', value: 1, count: 2, tipo: 'entero', dominio: 'urna' },
{ label: 'Azul', nodeLabel: 'A', value: 0, count: 1, tipo: 'entero', dominio: 'urna' }
]
});
DiarbolEventos.definirEventoDesdeExpresion(inst, 'alMenosUnaRoja', {
"gte": [
{
"sum": [
{ "pos": 1 },
{ "pos": 2 }
]
},
{ "const": 1 }
]
});
DiarbolEventos.resaltarEvento(inst, 'alMenosUnaRoja', {
color: '#2e7d32'
});
Modelo general para éxito/fracaso. Supuesto: Éxito = 1 y Fracaso = 0.
const inst = DiarbolAuto.dibujarBinario('#render-binario', {
niveles: 4,
ramaA: {
label: 'Éxito',
nodeLabel: 'E',
value: 1,
tipo: 'entero',
dominio: 'binario'
},
ramaB: {
label: 'Fracaso',
nodeLabel: 'F',
value: 0,
tipo: 'entero',
dominio: 'binario'
}
});
DiarbolEventos.definirEventoDesdeExpresion(inst, 'exactamente3Exitos', {
"eq": [
{
"sum": [
{ "pos": 1 },
{ "pos": 2 },
{ "pos": 3 },
{ "pos": 4 }
]
},
{ "const": 3 }
]
});
DiarbolEventos.resaltarEvento(inst, 'exactamente3Exitos', {
color: '#6a1b9a'
});
rootCuando quieres control total de la estructura.
const root = {
nodeLabel: 'I',
children: [
{
nodeLabel: 'C',
edgeLabel: 'Cara',
value: 1,
tipo: 'entero',
dominio: 'moneda',
children: [
{ nodeLabel: 'C', edgeLabel: 'Cara', value: 1, tipo: 'entero', dominio: 'moneda' },
{ nodeLabel: 'S', edgeLabel: 'Sello', value: 0, tipo: 'entero', dominio: 'moneda' }
]
},
{
nodeLabel: 'S',
edgeLabel: 'Sello',
value: 0,
tipo: 'entero',
dominio: 'moneda',
children: [
{ nodeLabel: 'C', edgeLabel: 'Cara', value: 1, tipo: 'entero', dominio: 'moneda' },
{ nodeLabel: 'S', edgeLabel: 'Sello', value: 0, tipo: 'entero', dominio: 'moneda' }
]
}
]
};
const inst = DiarbolAuto.dibujarEvento('#render-manual', { root });
DiarbolEventos.definirEventoDesdeExpresion(inst, 'unaCaraExacta', {
"eq": [
{
"sum": [
{ "pos": 1 },
{ "pos": 2 }
]
},
{ "const": 1 }
]
});
DiarbolEventos.resaltarEvento(inst, 'unaCaraExacta', {
color: '#00897b'
});
Con el DSL actual, así se modela “sale par” sin usar todavía mod.
const inst = DiarbolAuto.dibujarRuleta('#render-ruleta', {
giros: 1,
sectores: [
{ label: '1', value: 1, peso: 1 },
{ label: '2', value: 2, peso: 1 },
{ label: '3', value: 3, peso: 1 },
{ label: '4', value: 4, peso: 1 }
]
});
DiarbolEventos.definirEventoDesdeExpresion(inst, 'sale2o4', {
"or": [
{ "eq": [ { "pos": 1 }, { "const": 2 } ] },
{ "eq": [ { "pos": 1 }, { "const": 4 } ] }
]
});
DiarbolEventos.resaltarEvento(inst, 'sale2o4', {
color: '#8e44ad'
});
Se modela una moneda seguida de una ruleta con valores semánticos en cada etapa.
const inst = DiarbolAuto.dibujarExperimentoCompuesto('#render-compuesto', {
title: 'Moneda + ruleta',
caption: 'Experimento compuesto con 2 etapas',
stageLabels: ['Inicio', 'Moneda', 'Ruleta', 'Resultado final'],
interaction: {
mode: 'capture'
},
mostrarConteos: false,
mostrarProbTotal: true,
crearLineasLeaf: function(path, totalProb) {
var p1 = path[0] ? String(path[0].label).toLowerCase() : '';
var p2 = path[1] ? String(path[1].label) : '';
var lineas = [];
if (p1 && p2) {
lineas.push('(' + p1 + ',' + p2 + ')');
}
if (totalProb) {
lineas.push('P = ' + DiarbolCore.formatearRacional(totalProb));
}
return lineas;
},
etapas: [
{
nombre: 'Moneda',
ramas: [
{ label: 'Cara', nodeLabel: 'C', prob: '1/2', value: 1, tipo: 'entero', dominio: 'moneda' },
{ label: 'Sello', nodeLabel: 'S', prob: '1/2', value: 0, tipo: 'entero', dominio: 'moneda' }
]
},
{
nombre: 'Ruleta',
ramas: [
{ label: '1', nodeLabel: '1', prob: '1/3', value: 1, tipo: 'entero', dominio: 'ruleta' },
{ label: '2', nodeLabel: '2', prob: '1/3', value: 2, tipo: 'entero', dominio: 'ruleta' },
{ label: '3', nodeLabel: '3', prob: '1/3', value: 3, tipo: 'entero', dominio: 'ruleta' }
]
}
]
});
DiarbolEventos.definirEventoDesdeExpresion(inst, 'caraYdos', {
"and": [
{ "eq": [ { "pos": 1 }, { "const": 1 } ] },
{ "eq": [ { "pos": 2 }, { "const": 2 } ] }
]
});
DiarbolEventos.resaltarEvento(inst, 'caraYdos', {
color: '#5e35b1'
});
{ "eq": [ { "pos": 1 }, { "const": 4 } ] }
{ "lt": [ { "pos": 1 }, { "const": 3 } ] }
{
"eq": [
{
"sum": [ { "pos": 2 }, { "pos": 3 } ]
},
{ "const": 7 }
]
}
{
"eq": [
{ "pos": 1 },
{ "pos": 2 }
]
}
mod al DSL.
Diarbol es un ecosistema de visualización y análisis de probabilidad basado en árboles de decisión semánticos. Permite no solo dibujar diagramas, sino también evaluar eventos lógicos complejos mediante una arquitectura de lógica simbólica.
Para que el motor funcione, cada nodo debe contener metadatos semánticos más allá de su etiqueta visual:
{
"nodeLabel": "C",
"edgeLabel": "Cara",
"value": 1,
"tipo": "entero",
"dominio": "moneda",
"meta": {
"origen": "auto"
}
}| Propiedad | Rol |
|---|---|
nodeLabel |
Etiqueta visual dentro del nodo. |
edgeLabel |
Texto visible sobre la rama. |
value |
Valor semántico usado en comparaciones y cálculos. |
tipo |
Tipo del dato: entero, numero, racional o texto. |
dominio |
Contexto del experimento: moneda, dado, urna, ruleta, binario, etc. |
meta |
Información adicional opcional que puede acompañar a la rama. |
sum, eq, gt, lt, gte o lte, cada rama debe llegar al árbol con value bien definido.El módulo DiarbolAuto es la fachada principal para generar diagramas rápidamente.
| Función y descripción | Ejemplo de código | Resultado visual |
|---|---|---|
| dibujarEvento Renderiza un árbol basado en una estructura root personalizada. |
|
Un nodo inicial con dos ramas definidas manualmente y semántica explícita.
|
| dibujarMoneda Genera trayectorias equilibradas de lanzamientos de moneda. |
|
Árbol binario simétrico de 4 hojas (C-C, C-S, S-C, S-S) con P = 1/2 en cada rama.
|
| dibujarDado Genera trayectorias de lanzamientos de dado. |
|
Un nodo inicial con 6 ramificaciones numeradas y probabilidad P = 1/6 en cada una.
|
| dibujarRuleta Genera árboles basados en sectores o resultados de una ruleta. |
|
Un árbol con una etapa y una rama por sector definido.
|
| dibujarExtraccionConReposicion Modela urnas donde cada elemento vuelve a la urna. |
|
Árbol donde la probabilidad se mantiene en cada nivel porque los elementos regresan a la urna.
|
| dibujarExtraccionSinReposicion Simula urnas donde el espacio muestral se reduce. |
|
Árbol donde las probabilidades cambian en el segundo nivel según lo ya extraído.
|
| dibujarBinario Genera árboles con dos ramas por nivel, típicamente éxito/fracaso. |
|
Árbol binario de tres niveles con ramas explícitas A/B y semántica numérica estable.
|
| dibujarExperimentoCompuesto Genera árboles por etapas, cada una con sus propias ramas. |
|
Árbol por etapas donde cada camino representa un experimento compuesto completo.
|
| dibujarCasos Dibuja trayectorias específicas definidas por una lista de casos. |
|
Un árbol construido solo con los caminos definidos explícitamente en
casos. |
Esta es la herramienta para definir qué hojas del árbol deben resaltarse.
{ "pos": 1 } // Valor del 1er evento
{ "const": 7 } // Valor constante
{ "sum": [{ "pos": 1 }, { "pos": 2 }] } // Suma de posiciones{ "eq": [A, B] } // A igual a B
{ "gt": [A, B] } // A mayor que B
{ "lt": [A, B] } // A menor que B
{ "gte": [A, B] } // A mayor o igual que B
{ "lte": [A, B] } // A menor o igual que B{ "and": [ {regla1}, {regla2} ] } // Ambas deben cumplirse
{ "or": [ {regla1}, {regla2} ] } // Al menos una debe cumplirse
{ "not": {regla} } // NegaciónResaltar “La primera es Cara (1) y la suma total es exactamente 2”:
// 1. Instanciar
var inst = DiarbolAuto.dibujarMoneda('#arbol', { lanzamientos: 3 });
// 2. Definir evento semántico
DiarbolEventos.definirEventoDesdeExpresion(inst, 'EventoA', {
"and": [
{ "eq": [ { "pos": 1 }, { "const": 1 } ] },
{ "eq": [ { "sum": [ { "pos": 1 }, { "pos": 2 }, { "pos": 3 } ] }, { "const": 2 } ] }
]
});
// 3. Resaltar
DiarbolEventos.resaltarEvento(inst, 'EventoA', {
color: '#27ae60'
});DiarbolCore para el manejo exacto de racionales, y la mezcla de configuración debe admitir también callbacks como crearLineasLeaf cuando un auto los necesite.Diarbol Engine es un ecosistema de visualización y análisis de probabilidad basado en árboles semánticos. No solo dibuja diagramas, sino que permite describir eventos lógicos mediante expresiones JSON, para luego resaltar automáticamente las trayectorias que cumplen ciertas condiciones.
2. Referencia de funciones: DiarbolAuto
3. Motor de criterios (JSON DSL)
5. Recetario de expresiones frecuentes
Para que el motor funcione correctamente, cada nodo debe contener más que una etiqueta visual. El árbol necesita metadatos semánticos para poder evaluar eventos.
{
"nodeLabel": "C",
"edgeLabel": "Cara",
"value": 1,
"tipo": "entero",
"dominio": "moneda",
"meta": {
"origen": "auto"
}
}
| Propiedad | Rol |
|---|---|
nodeLabel |
Texto que aparece dentro del nodo. |
edgeLabel |
Texto que aparece sobre la rama. |
value |
Valor semántico utilizado en comparaciones y cálculos. |
tipo |
Tipo del dato: entero, numero, racional o texto. |
dominio |
Contexto del experimento: moneda, dado, urna, ruleta, binario, etc. |
meta |
Información adicional opcional que puede viajar con la rama. |
sum, eq, gt, lt, gte o lte, cada rama debe llegar al árbol con su propiedad value correctamente definida.DiarbolAutoEl módulo DiarbolAuto es la fachada principal para construir árboles de manera rápida.
| Función | Descripción |
|---|---|
| dibujarEvento(container, opts) | Renderiza un árbol a partir de una estructura root definida manualmente. |
| dibujarMoneda(container, opts) | Genera automáticamente un árbol de lanzamientos de moneda. |
| dibujarDado(container, opts) | Genera automáticamente un árbol de lanzamientos de dado. |
| dibujarRuleta(container, opts) | Genera árboles basados en sectores o resultados de una ruleta. |
| dibujarExtraccionConReposicion(...) | Modela extracciones donde cada elemento vuelve a la urna. |
| dibujarExtraccionSinReposicion(...) | Modela extracciones donde el espacio muestral cambia en cada nivel. |
| dibujarBinario(container, opts) | Genera árboles con dos ramas por nivel, típicamente éxito/fracaso, usando ramas explícitas como ramaA y ramaB. |
| dibujarExperimentoCompuesto(container, opts) | Genera árboles por etapas, cada una con sus propias ramas y probabilidades. |
| dibujarCasos(container, opts) | Dibuja trayectorias específicas definidas como una colección de casos con su camino. |
value, tipo, dominio y meta hasta el árbol final si se quiere usar DiarbolEventos encima.Los eventos se describen mediante expresiones JSON. Estas expresiones se registran con DiarbolEventos.definirEventoDesdeExpresion.
{ "pos": 1 }
{ "const": 7 }
{ "sum": [ { "pos": 1 }, { "pos": 2 } ] }
{ "eq": [ A, B ] }
{ "gt": [ A, B ] }
{ "lt": [ A, B ] }
{ "gte": [ A, B ] }
{ "lte": [ A, B ] }
{ "and": [ {regla1}, {regla2} ] }
{ "or": [ {regla1}, {regla2} ] }
{ "not": {regla} }
mod.En los siguientes ejemplos se asume que ya están cargados los módulos: diarbol-core.js, diarbol-auto.js y diarbol-eventos.js.
<script src="diarbol-core.js"></script> <script src="diarbol-auto.js"></script> <script src="diarbol-eventos.js"></script> <div id="arbol-ejemplo"></div>
Supuesto semántico: Cara = 1 y Sello = 0.
const inst = DiarbolAuto.dibujarMoneda('#arbol-ejemplo', {
lanzamientos: 3
});
DiarbolEventos.definirEventoDesdeExpresion(inst, 'alMenos2Caras', {
"gte": [
{
"sum": [
{ "pos": 1 },
{ "pos": 2 },
{ "pos": 3 }
]
},
{ "const": 2 }
]
});
DiarbolEventos.resaltarEvento(inst, 'alMenos2Caras', {
color: '#27ae60'
});
const inst = DiarbolAuto.dibujarDado('#arbol-dados', {
lanzamientos: 2
});
DiarbolEventos.definirEventoDesdeExpresion(inst, 'sumaMayorIgual8', {
"gte": [
{
"sum": [
{ "pos": 1 },
{ "pos": 2 }
]
},
{ "const": 8 }
]
});
DiarbolEventos.resaltarEvento(inst, 'sumaMayorIgual8', {
color: '#ef6c00'
});
const inst = DiarbolAuto.dibujarMoneda('#arbol-3monedas', {
lanzamientos: 3
});
DiarbolEventos.definirEventoDesdeExpresion(inst, 'eventoA', {
"and": [
{ "eq": [ { "pos": 1 }, { "const": 1 } ] },
{
"eq": [
{
"sum": [
{ "pos": 1 },
{ "pos": 2 },
{ "pos": 3 }
]
},
{ "const": 2 }
]
}
]
});
DiarbolEventos.resaltarEvento(inst, 'eventoA', {
color: '#1565c0'
});
const inst = DiarbolAuto.dibujarExtraccionConReposicion('#urna1', {
extracciones: 2,
elementos: [
{ label: 'Roja', nodeLabel: 'R', value: 1, count: 3, tipo: 'entero', dominio: 'urna' },
{ label: 'Azul', nodeLabel: 'A', value: 0, count: 2, tipo: 'entero', dominio: 'urna' }
]
});
DiarbolEventos.definirEventoDesdeExpresion(inst, 'dosRojas', {
"and": [
{ "eq": [ { "pos": 1 }, { "const": 1 } ] },
{ "eq": [ { "pos": 2 }, { "const": 1 } ] }
]
});
DiarbolEventos.resaltarEvento(inst, 'dosRojas', {
color: '#c62828'
});
const inst = DiarbolAuto.dibujarExtraccionSinReposicion('#urna2', {
extracciones: 2,
elementos: [
{ label: 'Roja', nodeLabel: 'R', value: 1, count: 2, tipo: 'entero', dominio: 'urna' },
{ label: 'Azul', nodeLabel: 'A', value: 0, count: 1, tipo: 'entero', dominio: 'urna' }
]
});
DiarbolEventos.definirEventoDesdeExpresion(inst, 'alMenosUnaRoja', {
"gte": [
{
"sum": [
{ "pos": 1 },
{ "pos": 2 }
]
},
{ "const": 1 }
]
});
DiarbolEventos.resaltarEvento(inst, 'alMenosUnaRoja', {
color: '#2e7d32'
});
Supuesto semántico: Éxito = 1 y Fracaso = 0.
const inst = DiarbolAuto.dibujarBinario('#binario', {
niveles: 4,
ramaA: {
label: 'Éxito',
nodeLabel: 'E',
value: 1,
tipo: 'entero',
dominio: 'binario'
},
ramaB: {
label: 'Fracaso',
nodeLabel: 'F',
value: 0,
tipo: 'entero',
dominio: 'binario'
}
});
DiarbolEventos.definirEventoDesdeExpresion(inst, 'exactamente3Exitos', {
"eq": [
{
"sum": [
{ "pos": 1 },
{ "pos": 2 },
{ "pos": 3 },
{ "pos": 4 }
]
},
{ "const": 3 }
]
});
DiarbolEventos.resaltarEvento(inst, 'exactamente3Exitos', {
color: '#6a1b9a'
});
const inst = DiarbolAuto.dibujarExperimentoCompuesto('#compuesto', {
title: 'Moneda + ruleta',
caption: 'Experimento compuesto con 2 etapas',
stageLabels: ['Inicio', 'Moneda', 'Ruleta', 'Resultado final'],
interaction: {
mode: 'capture'
},
mostrarConteos: false,
mostrarProbTotal: true,
crearLineasLeaf: function(path, totalProb) {
var p1 = path[0] ? String(path[0].label).toLowerCase() : '';
var p2 = path[1] ? String(path[1].label) : '';
var lineas = [];
if (p1 && p2) {
lineas.push('(' + p1 + ',' + p2 + ')');
}
if (totalProb && window.DiarbolCore) {
lineas.push('P = ' + window.DiarbolCore.formatearRacional(totalProb));
}
return lineas;
},
etapas: [
{
nombre: 'Moneda',
ramas: [
{ label: 'Cara', nodeLabel: 'C', prob: '1/2', value: 1, tipo: 'entero', dominio: 'moneda' },
{ label: 'Sello', nodeLabel: 'S', prob: '1/2', value: 0, tipo: 'entero', dominio: 'moneda' }
]
},
{
nombre: 'Ruleta',
ramas: [
{ label: '1', nodeLabel: '1', prob: '1/3', value: 1, tipo: 'entero', dominio: 'ruleta' },
{ label: '2', nodeLabel: '2', prob: '1/3', value: 2, tipo: 'entero', dominio: 'ruleta' },
{ label: '3', nodeLabel: '3', prob: '1/3', value: 3, tipo: 'entero', dominio: 'ruleta' }
]
}
]
});
DiarbolEventos.definirEventoDesdeExpresion(inst, 'caraYdos', {
"and": [
{ "eq": [ { "pos": 1 }, { "const": 1 } ] },
{ "eq": [ { "pos": 2 }, { "const": 2 } ] }
]
});
DiarbolEventos.resaltarEvento(inst, 'caraYdos', {
color: '#5e35b1'
});
const inst = DiarbolAuto.dibujarCasos('#casos', {
rootLabel: 'I',
casos: [
{
lines: ['Pan A + Carne X'],
camino: [
{ label: 'Pan A', nodeLabel: 'A', value: 'A', tipo: 'texto', dominio: 'pan' },
{ label: 'Carne X', nodeLabel: 'X', value: 'X', tipo: 'texto', dominio: 'carne' }
]
},
{
lines: ['Pan A + Carne Y'],
camino: [
{ label: 'Pan A', nodeLabel: 'A', value: 'A', tipo: 'texto', dominio: 'pan' },
{ label: 'Carne Y', nodeLabel: 'Y', value: 'Y', tipo: 'texto', dominio: 'carne' }
]
},
{
lines: ['Pan B + Carne X'],
camino: [
{ label: 'Pan B', nodeLabel: 'B', value: 'B', tipo: 'texto', dominio: 'pan' },
{ label: 'Carne X', nodeLabel: 'X', value: 'X', tipo: 'texto', dominio: 'carne' }
]
}
]
});
Este caso sirve cuando el árbol no proviene de un experimento estándar, sino de una colección de trayectorias específicas.
rootconst root = {
nodeLabel: 'I',
children: [
{
nodeLabel: 'C',
edgeLabel: 'Cara',
value: 1,
tipo: 'entero',
dominio: 'moneda',
children: [
{ nodeLabel: 'C', edgeLabel: 'Cara', value: 1, tipo: 'entero', dominio: 'moneda' },
{ nodeLabel: 'S', edgeLabel: 'Sello', value: 0, tipo: 'entero', dominio: 'moneda' }
]
},
{
nodeLabel: 'S',
edgeLabel: 'Sello',
value: 0,
tipo: 'entero',
dominio: 'moneda',
children: [
{ nodeLabel: 'C', edgeLabel: 'Cara', value: 1, tipo: 'entero', dominio: 'moneda' },
{ nodeLabel: 'S', edgeLabel: 'Sello', value: 0, tipo: 'entero', dominio: 'moneda' }
]
}
]
};
const inst = DiarbolAuto.dibujarEvento('#manual', { root });
DiarbolEventos.definirEventoDesdeExpresion(inst, 'unaCaraExacta', {
"eq": [
{
"sum": [
{ "pos": 1 },
{ "pos": 2 }
]
},
{ "const": 1 }
]
});
DiarbolEventos.resaltarEvento(inst, 'unaCaraExacta', {
color: '#00897b'
});
{ "eq": [ { "pos": 1 }, { "const": 4 } ] }
{ "lt": [ { "pos": 1 }, { "const": 3 } ] }
{
"eq": [
{
"sum": [
{ "pos": 2 },
{ "pos": 3 }
]
},
{ "const": 7 }
]
}
{
"eq": [
{ "pos": 1 },
{ "pos": 2 }
]
}
Esto requiere el operador mod. Sin él, la idea existe, pero no queda expresable de forma natural.
{
"and": [
{ "lt": [ { "pos": 1 }, { "const": 3 } ] },
{
"eq": [
{
"mod": [
{
"sum": [
{ "pos": 2 },
{ "pos": 3 }
]
},
{ "const": 2 }
]
},
{ "const": 0 }
]
}
]
}
{
"and": [
{
"eq": [
{ "pos": 1 },
{ "pos": 2 }
]
},
{
"eq": [
{ "pos": 3 },
{ "const": 5 }
]
}
]
}
El DSL actual ya es útil, pero para la semántica que quieres manejar, conviene agregar algunos operadores nuevos.
modPermite representar paridad y residuos.
{
"eq": [
{
"mod": [
{ "pos": 1 },
{ "const": 2 }
]
},
{ "const": 0 }
]
}
Interpretación: el evento 1 es par.
countEqCuenta cuántas posiciones son iguales a un valor dado.
{
"gte": [
{
"countEq": {
"items": [
{ "pos": 1 },
{ "pos": 2 },
{ "pos": 3 }
],
"value": { "const": 1 }
}
},
{ "const": 2 }
]
}
Interpretación: al menos dos posiciones valen 1.
allEqPermite expresar que varios eventos son iguales.
{
"allEq": [
{ "pos": 1 },
{ "pos": 2 },
{ "pos": 3 }
]
}
betweenPermite describir intervalos.
{
"between": [
{ "pos": 1 },
{ "const": 2 },
{ "const": 5 }
]
}
inÚtil para dominios de texto o pertenencia a conjuntos de valores.
{
"in": [
{ "pos": 1 },
[ { "const": 2 }, { "const": 4 }, { "const": 6 } ]
]
}
mod, countEq, allEq e in serían extensiones muy naturales.El módulo de render debería encargarse de la visualización, mientras que el módulo de eventos debería encargarse de interpretar reglas y evaluar hojas.
value de forma consistenteSi en monedas defines Cara = 1 y Sello = 0, mantén esa convención en todos los árboles equivalentes.
El campo tipo describe la naturaleza del valor, mientras que dominio describe el contexto del experimento.
Si un auto acepta funciones como crearLineasLeaf, el clonado profundo y la mezcla de configuración deben preservarlas sin romperse.
Antes de ampliar el motor, conviene dejar estabilizada la sintaxis interna de las expresiones. Eso evita parches después.
Esta versión del manual muestra en cada bloque el código y, justo debajo, el resultado renderizado del ejemplo.
DiarbolAuto y DiarbolEventos están disponibles globalmente. Si tus scripts reales tienen otros nombres o rutas, solo cambia los <script src="..."> del encabezado.2. Dados: suma mayor o igual que 8
3. Monedas: primera cara y total 2
| Módulo | Rol |
|---|---|
DiarbolAuto |
Construcción rápida de árboles. |
DiarbolEventos |
Definición y resaltado de eventos semánticos. |
value |
Valor semántico usado por las expresiones del DSL. |
{ "pos": n } |
Toma el valor del evento ubicado en la posición n. |
sum, gte, lte, gt, lt o comparaciones numéricas, cada rama debe llegar al árbol con su propiedad value correctamente definida.Supuesto: Cara = 1 y Sello =
0.
const inst = DiarbolAuto.dibujarMoneda('#render-moneda', {
lanzamientos: 3
});
DiarbolEventos.definirEventoDesdeExpresion(inst, 'alMenos2Caras', {
"gte": [
{
"sum": [
{ "pos": 1 },
{ "pos": 2 },
{ "pos": 3 }
]
},
{ "const": 2 }
]
});
DiarbolEventos.resaltarEvento(inst, 'alMenos2Caras', {
color: '#27ae60'
});
Evento clásico para mostrar comparaciones con suma.
const inst = DiarbolAuto.dibujarDado('#render-dado', {
lanzamientos: 2
});
DiarbolEventos.definirEventoDesdeExpresion(inst, 'sumaMayorIgual8', {
"gte": [
{
"sum": [
{ "pos": 1 },
{ "pos": 2 }
]
},
{ "const": 8 }
]
});
DiarbolEventos.resaltarEvento(inst, 'sumaMayorIgual8', {
color: '#ef6c00'
});
Combina un criterio puntual y una condición global.
const inst = DiarbolAuto.dibujarMoneda('#render-moneda2', {
lanzamientos: 3
});
DiarbolEventos.definirEventoDesdeExpresion(inst, 'eventoA', {
"and": [
{ "eq": [ { "pos": 1 }, { "const": 1 } ] },
{
"eq": [
{
"sum": [
{ "pos": 1 },
{ "pos": 2 },
{ "pos": 3 }
]
},
{ "const": 2 }
]
}
]
});
DiarbolEventos.resaltarEvento(inst, 'eventoA', {
color: '#1565c0'
});
Aquí se usan conteos en los elementos de la urna.
const inst = DiarbolAuto.dibujarExtraccionConReposicion('#render-rep', {
extracciones: 2,
elementos: [
{ label: 'Roja', nodeLabel: 'R', value: 1, count: 3, tipo: 'entero', dominio: 'urna' },
{ label: 'Azul', nodeLabel: 'A', value: 0, count: 2, tipo: 'entero', dominio: 'urna' }
]
});
DiarbolEventos.definirEventoDesdeExpresion(inst, 'dosRojas', {
"and": [
{ "eq": [ { "pos": 1 }, { "const": 1 } ] },
{ "eq": [ { "pos": 2 }, { "const": 1 } ] }
]
});
DiarbolEventos.resaltarEvento(inst, 'dosRojas', {
color: '#c62828'
});
Muy útil para mostrar cómo cambia el espacio muestral.
const inst = DiarbolAuto.dibujarExtraccionSinReposicion('#render-sinrep', {
extracciones: 2,
elementos: [
{ label: 'Roja', nodeLabel: 'R', value: 1, count: 2, tipo: 'entero', dominio: 'urna' },
{ label: 'Azul', nodeLabel: 'A', value: 0, count: 1, tipo: 'entero', dominio: 'urna' }
]
});
DiarbolEventos.definirEventoDesdeExpresion(inst, 'alMenosUnaRoja', {
"gte": [
{
"sum": [
{ "pos": 1 },
{ "pos": 2 }
]
},
{ "const": 1 }
]
});
DiarbolEventos.resaltarEvento(inst, 'alMenosUnaRoja', {
color: '#2e7d32'
});
Modelo general para éxito/fracaso. Supuesto: Éxito = 1 y Fracaso = 0.
const inst = DiarbolAuto.dibujarBinario('#render-binario', {
niveles: 4,
ramaA: {
label: 'Éxito',
nodeLabel: 'E',
value: 1,
tipo: 'entero',
dominio: 'binario'
},
ramaB: {
label: 'Fracaso',
nodeLabel: 'F',
value: 0,
tipo: 'entero',
dominio: 'binario'
}
});
DiarbolEventos.definirEventoDesdeExpresion(inst, 'exactamente3Exitos', {
"eq": [
{
"sum": [
{ "pos": 1 },
{ "pos": 2 },
{ "pos": 3 },
{ "pos": 4 }
]
},
{ "const": 3 }
]
});
DiarbolEventos.resaltarEvento(inst, 'exactamente3Exitos', {
color: '#6a1b9a'
});
rootCuando quieres control total de la estructura.
const root = {
nodeLabel: 'I',
children: [
{
nodeLabel: 'C',
edgeLabel: 'Cara',
value: 1,
tipo: 'entero',
dominio: 'moneda',
children: [
{ nodeLabel: 'C', edgeLabel: 'Cara', value: 1, tipo: 'entero', dominio: 'moneda' },
{ nodeLabel: 'S', edgeLabel: 'Sello', value: 0, tipo: 'entero', dominio: 'moneda' }
]
},
{
nodeLabel: 'S',
edgeLabel: 'Sello',
value: 0,
tipo: 'entero',
dominio: 'moneda',
children: [
{ nodeLabel: 'C', edgeLabel: 'Cara', value: 1, tipo: 'entero', dominio: 'moneda' },
{ nodeLabel: 'S', edgeLabel: 'Sello', value: 0, tipo: 'entero', dominio: 'moneda' }
]
}
]
};
const inst = DiarbolAuto.dibujarEvento('#render-manual', { root });
DiarbolEventos.definirEventoDesdeExpresion(inst, 'unaCaraExacta', {
"eq": [
{
"sum": [
{ "pos": 1 },
{ "pos": 2 }
]
},
{ "const": 1 }
]
});
DiarbolEventos.resaltarEvento(inst, 'unaCaraExacta', {
color: '#00897b'
});
Con el DSL actual, así se modela “sale par” sin usar todavía mod.
const inst = DiarbolAuto.dibujarRuleta('#render-ruleta', {
giros: 1,
sectores: [
{ label: '1', value: 1, peso: 1 },
{ label: '2', value: 2, peso: 1 },
{ label: '3', value: 3, peso: 1 },
{ label: '4', value: 4, peso: 1 }
]
});
DiarbolEventos.definirEventoDesdeExpresion(inst, 'sale2o4', {
"or": [
{ "eq": [ { "pos": 1 }, { "const": 2 } ] },
{ "eq": [ { "pos": 1 }, { "const": 4 } ] }
]
});
DiarbolEventos.resaltarEvento(inst, 'sale2o4', {
color: '#8e44ad'
});
Se modela una moneda seguida de una ruleta con valores semánticos en cada etapa.
const inst = DiarbolAuto.dibujarExperimentoCompuesto('#render-compuesto', {
title: 'Moneda + ruleta',
caption: 'Experimento compuesto con 2 etapas',
stageLabels: ['Inicio', 'Moneda', 'Ruleta', 'Resultado final'],
interaction: {
mode: 'capture'
},
mostrarConteos: false,
mostrarProbTotal: true,
crearLineasLeaf: function(path, totalProb) {
var p1 = path[0] ? String(path[0].label).toLowerCase() : '';
var p2 = path[1] ? String(path[1].label) : '';
var lineas = [];
if (p1 && p2) {
lineas.push('(' + p1 + ',' + p2 + ')');
}
if (totalProb) {
lineas.push('P = ' + DiarbolCore.formatearRacional(totalProb));
}
return lineas;
},
etapas: [
{
nombre: 'Moneda',
ramas: [
{ label: 'Cara', nodeLabel: 'C', prob: '1/2', value: 1, tipo: 'entero', dominio: 'moneda' },
{ label: 'Sello', nodeLabel: 'S', prob: '1/2', value: 0, tipo: 'entero', dominio: 'moneda' }
]
},
{
nombre: 'Ruleta',
ramas: [
{ label: '1', nodeLabel: '1', prob: '1/3', value: 1, tipo: 'entero', dominio: 'ruleta' },
{ label: '2', nodeLabel: '2', prob: '1/3', value: 2, tipo: 'entero', dominio: 'ruleta' },
{ label: '3', nodeLabel: '3', prob: '1/3', value: 3, tipo: 'entero', dominio: 'ruleta' }
]
}
]
});
DiarbolEventos.definirEventoDesdeExpresion(inst, 'caraYdos', {
"and": [
{ "eq": [ { "pos": 1 }, { "const": 1 } ] },
{ "eq": [ { "pos": 2 }, { "const": 2 } ] }
]
});
DiarbolEventos.resaltarEvento(inst, 'caraYdos', {
color: '#5e35b1'
});
{ "eq": [ { "pos": 1 }, { "const": 4 } ] }
{ "lt": [ { "pos": 1 }, { "const": 3 } ] }
{
"eq": [
{
"sum": [ { "pos": 2 }, { "pos": 3 } ]
},
{ "const": 7 }
]
}
{
"eq": [
{ "pos": 1 },
{ "pos": 2 }
]
}
mod al DSL.
Esta página reúne varios diagramas de prueba para evaluar el comportamiento del renderizador en distintos tipos de flujo matemático.
Este manual muestra cómo usar FlujoMate con JSON embebido, cómo cambiar opciones desde atributos data-* y cómo ver al mismo tiempo el código y el resultado.
La estructura más simple es esta:
<div class="flujomate">
<script type="application/json">
{
"titulo": "Mi diagrama",
"nodos": [
{ "id": "n1", "tipo": "inicio", "texto": "Inicio" },
{ "id": "n2", "tipo": "proceso", "texto": "Hacer algo" },
{ "id": "n3", "tipo": "fin", "texto": "Fin" }
],
"conexiones": [
{ "desde": "n1", "hacia": "n2" },
{ "desde": "n2", "hacia": "n3" }
]
}
</script>
</div>Si tu librería ya tiene activado el auto renderizado, no necesitas escribir un script extra para dibujar el diagrama.
FlujoMate reconoce estos tipos de nodos:
inicio -> nodo inicial del flujo
fin -> nodo final
proceso -> acción o paso de trabajo
decision -> rombo de decisión
resultado -> resultado o conclusión intermedia
nota -> comentario lateral
error -> advertencia, error frecuente o excepción
referencia -> vínculo o recordatorio de otra ruta/contenidoEjemplo de nodos:
"nodos": [
{ "id": "n1", "tipo": "inicio", "texto": "Inicio" },
{ "id": "n2", "tipo": "proceso", "texto": "Resolver" },
{ "id": "n3", "tipo": "decision", "texto": "¿Se puede simplificar?" },
{ "id": "n4", "tipo": "resultado", "texto": "Resultado parcial" },
{ "id": "n5", "tipo": "nota", "texto": "Recuerda revisar signos" },
{ "id": "n6", "tipo": "error", "texto": "Error frecuente" },
{ "id": "n7", "tipo": "referencia", "texto": "Ver método alternativo" },
{ "id": "n8", "tipo": "fin", "texto": "Respuesta final" }
]Las conexiones se definen en conexiones. Los tipos más usados son estos:
flujo -> conexión normal del diagrama
caso -> salida típica de una decisión, por ejemplo Sí / No
anotacion -> conecta una nota o error lateral con un nodo principal
referencia -> conecta una referencia lateral con un nodo principal
retorno -> ruta de regreso o retroceso especialEjemplo:
"conexiones": [
{ "desde": "n1", "hacia": "n2", "semantica": "flujo" },
{ "desde": "n3", "hacia": "n4", "semantica": "caso", "etiqueta": "Sí" },
{ "desde": "n3", "hacia": "n5", "semantica": "caso", "etiqueta": "No" },
{ "desde": "n6", "hacia": "n2", "semantica": "anotacion", "estilo": "punteada" },
{ "desde": "n7", "hacia": "n4", "semantica": "referencia", "estilo": "punteada" }
]Puedes ajustar parámetros directamente en el contenedor usando atributos data-*.
data-ajustar-nodo-final-abajo="false"
data-centrar-nodo-final="false"
data-distancia-extra-nodo-final="0"
data-rombo-diagonal-salida="12"
data-conexion-ruta-intentos="20"
data-conexion-paso-alternativo="10"
data-conexion-margen-nodo="4"
data-conexion-separacion-min="3"
data-conexion-zona-libre-flecha="20"
data-conexion-offset="20"No es obligatorio escribir todos. Solo agregas los que quieras cambiar. Lo demás se toma desde la configuración por defecto del archivo JavaScript.
<div class="flujomate">
<script type="application/json">
{
"titulo": "Ejemplo mínimo",
"nodos": [
{ "id": "n1", "tipo": "inicio", "texto": "Inicio" },
{ "id": "n2", "tipo": "proceso", "texto": "Resolver" },
{ "id": "n3", "tipo": "fin", "texto": "Fin" }
],
"conexiones": [
{ "desde": "n1", "hacia": "n2" },
{ "desde": "n2", "hacia": "n3" }
]
}
</script>
</div><div class="flujomate"
data-ajustar-nodo-final-abajo="false"
data-centrar-nodo-final="false">
<script type="application/json">
{
"titulo": "Final sin forzar",
"nodos": [
{ "id": "n1", "tipo": "inicio", "texto": "Inicio" },
{ "id": "n2", "tipo": "decision", "texto": "¿Continuar?" },
{ "id": "n3", "tipo": "resultado", "texto": "Seguir" },
{ "id": "n4", "tipo": "fin", "texto": "Fin" }
],
"conexiones": [
{ "desde": "n1", "hacia": "n2" },
{ "desde": "n2", "hacia": "n3", "semantica": "caso", "etiqueta": "Sí" },
{ "desde": "n2", "hacia": "n4", "semantica": "caso", "etiqueta": "No" },
{ "desde": "n3", "hacia": "n4" }
]
}
</script>
</div><div class="flujomate"
data-rombo-diagonal-salida="12"
data-conexion-ruta-intentos="24"
data-conexion-paso-alternativo="8">
<script type="application/json">
{
"titulo": "Ajuste de rutas",
"nodos": [
{ "id": "n1", "tipo": "inicio", "texto": "Leer" },
{ "id": "n2", "tipo": "decision", "texto": "¿Hay error?" },
{ "id": "n3", "tipo": "error", "texto": "Corregir dato" },
{ "id": "n4", "tipo": "proceso", "texto": "Calcular" },
{ "id": "n5", "tipo": "fin", "texto": "Responder" }
],
"conexiones": [
{ "desde": "n1", "hacia": "n2" },
{ "desde": "n2", "hacia": "n3", "semantica": "caso", "etiqueta": "Sí" },
{ "desde": "n2", "hacia": "n4", "semantica": "caso", "etiqueta": "No" },
{ "desde": "n4", "hacia": "n5" },
{ "desde": "n3", "hacia": "n4", "semantica": "anotacion", "estilo": "punteada" }
]
}
</script>
</div><div class="flujomate"
data-ajustar-nodo-final-abajo="false"
data-centrar-nodo-final="false"
data-rombo-diagonal-salida="10">
<script type="application/json">
{
"titulo": "Mi diagrama",
"nodos": [...],
"conexiones": [...]
}
</script>
</div>Si no escribes un atributo data-*, FlujoMate usa el valor por defecto definido en el JavaScript.
Esta página presenta una síntesis visual de la unidad de números naturales. El diagrama organiza los contenidos principales para ayudarte a reconocer cómo se conectan las ideas: definición, propiedades, operaciones, divisibilidad, números primos, MCD, MCM, sucesiones y potencias.
Objetivo de aprendizaje
Reconocer y relacionar los contenidos principales de la unidad de números naturales mediante un diagrama que permita ubicar conceptos, procedimientos y aplicaciones.
Comienza en el nodo central y sigue las ramas principales. Cada bloque resume una parte de la unidad y muestra qué ideas se estudian antes y cuáles se apoyan en ellas.
El conjunto de los números naturales se usa para contar, ordenar y resolver problemas. A partir de él se estudian operaciones, divisibilidad, números primos, MCD, MCM, sucesiones y potencias.
En esta guía se considera:
\[ \mathbb{N}=\{0,1,2,3,4,5,\dots\} \]
El diagrama muestra que la unidad parte con la definición de \(\mathbb{N}\), continúa con propiedades y operaciones, y luego avanza hacia divisibilidad, números primos, MCD, MCM, sucesiones y potencias.
Las operaciones básicas permiten resolver cálculos y problemas. Desde ahí, la divisibilidad ayuda a reconocer patrones y preparar el estudio de números primos. La factorización prima se vuelve clave para calcular el MCD y el MCM. Por otra parte, las sucesiones y potencias muestran regularidades y formas abreviadas de escribir multiplicaciones repetidas.
| Bloque | Idea principal |
|---|---|
| Números naturales | Sirven para contar, ordenar y representar cantidades. |
| Operaciones | Permiten juntar, quitar, repetir grupos y repartir. |
| Divisibilidad y primos | Ayudan a analizar la estructura de los números. |
| MCD y MCM | Resuelven problemas de reparto, coincidencia y organización. |
| Sucesiones y potencias | Permiten estudiar patrones de crecimiento y regularidades. |
Observa el diagrama y responde:
Este formato sigue la estructura del manual de FlujoMate: un contenedor con clase flujomate y un bloque <script type="application/json"> interno. Para que se vea, el archivo de FlujoMate debe estar cargado en Moodle antes de este contenido.
Esta página prueba un ejemplo mínimo de cada tipo principal documentado en el manual.
Ejemplo: gráfico de barras
Ejemplo: parábola mínima
Ejemplo: diagrama sagital
Ejemplo: Venn de 2 conjuntos
Ejemplo: intervalo semiabierto
Ejemplo: visor de segmento AB
Ejemplo: árbol de moneda
Ejemplo: flujo con decisión
{ "version": 2, "meta": { "title": "Nueva escena" }, "view": { "xMin": -6.902726393346672, "xMax": 9.877089246389875, "yMin": -8.370473523769771, "yMax": 8.409342115966776, "showGrid": true, "showAxes": true, "lockAspect": true }, "style": { "pointRadius": 5, "pointCaptureRadius": 14, "strokeWidth": 2, "fontSize": 14 }, "objects": [ { "id": "A", "kind": "point", "def": { "kind": "free", "x": -3.984142824114995, "y": -2.0442269140928504 }, "label": "A", "style": { "fill": "#ea580c" }, "draggable": true }, { "id": "B", "kind": "point", "def": { "kind": "free", "x": 0.016486804598786264, "y": -1.838906132342057 }, "label": "B", "style": { "fill": "#ea580c" }, "draggable": true }, { "id": "r21", "kind": "line", "def": { "kind": "through-two-points", "p1": "A", "p2": "B" }, "style": { "stroke": "#2e7d32" } }, { "id": "per22", "kind": "line", "def": { "kind": "perpendicular-through-point", "objectId": "r21", "point": "A" }, "style": { "stroke": "#b45309" } }, { "id": "per23", "kind": "line", "def": { "kind": "perpendicular-through-point", "objectId": "r21", "point": "B" }, "style": { "stroke": "#b45309" } }, { "id": "c24", "kind": "circle", "def": { "kind": "center-through-point", "center": "A", "through": "B" }, "style": { "stroke": "#c62828" } }, { "id": "C", "kind": "point", "def": { "kind": "on-object", "objectId": "per22", "param": { "mode": "t", "value": 0.9956057719107977 } }, "label": "C", "style": { "fill": "#ea580c" }, "draggable": true }, { "id": "per25", "kind": "line", "def": { "kind": "perpendicular-through-point", "objectId": "per22", "point": "C" }, "style": { "stroke": "#b45309" } } ] }
Un cubo es un cuerpo geométrico formado por 6 caras cuadradas congruentes.
Todas sus aristas tienen la misma longitud y en cada vértice se unen 3 aristas.
La siguiente figura muestra una representación plana de un cubo. Aunque el dibujo está en dos dimensiones, permite reconocer sus vértices y aristas.