Imprimir este CapítuloImprimir este Capítulo

manual de mi pagina

24. arbol , manual diarbol

Manual Interactivo: Diarbol Engine

Esta versión del manual muestra en cada bloque el código y, justo debajo, el resultado renderizado del ejemplo.

Uso: este archivo asume que DiarbolAuto y DiarbolEventos están disponibles globalmente. Si tus scripts reales tienen otros nombres o rutas, solo cambia los <script src="..."> del encabezado.

Índice

1. Monedas: al menos 2 caras

2. Dados: suma mayor o igual que 8

3. Monedas: primera cara y total 2

4. Urna con reposición

5. Urna sin reposición

6. Binario: exactamente 3 éxitos

7. Árbol manual con root

8. Ruleta

9. Experimento compuesto

Referencia rápida

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.
Para usar expresiones del DSL con sum, gte, lte, gt, lt o comparaciones numéricas, cada rama debe llegar al árbol con su propiedad value correctamente definida.

Ejemplo 1. Tres monedas: “al menos 2 caras”

Supuesto: Cara = 1 y Sello = 0.

dibujarMoneda
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'
});
Renderizado

Ejemplo 2. Dos dados: “suma mayor o igual que 8”

Evento clásico para mostrar comparaciones con suma.

dibujarDado
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'
});
Renderizado

Ejemplo 3. Tres monedas: “la primera es cara y el total es 2”

Combina un criterio puntual y una condición global.

and + eq + sum
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'
});
Renderizado

Ejemplo 4. Urna con reposición: “ambas son rojas”

Aquí se usan conteos en los elementos de la urna.

dibujarExtraccionConReposicion
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'
});
Renderizado

Ejemplo 5. Urna sin reposición: “al menos una roja”

Muy útil para mostrar cómo cambia el espacio muestral.

dibujarExtraccionSinReposicion
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'
});
Renderizado

Ejemplo 6. Binario: “exactamente 3 éxitos en 4 ensayos”

Modelo general para éxito/fracaso. Supuesto: Éxito = 1 y Fracaso = 0.

dibujarBinario
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'
});
Renderizado

Ejemplo 7. Árbol manual con root

Cuando quieres control total de la estructura.

dibujarEvento
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'
});
Renderizado

Ejemplo 8. Ruleta: “sale 2 o 4”

Con el DSL actual, así se modela “sale par” sin usar todavía mod.

dibujarRuleta
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'
});
Renderizado

Ejemplo 9. Experimento compuesto: moneda y ruleta

Se modela una moneda seguida de una ruleta con valores semánticos en cada etapa.

dibujarExperimentoCompuesto
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'
});
Renderizado

Expresiones útiles para el manual

{ "eq": [ { "pos": 1 }, { "const": 4 } ] }
{ "lt": [ { "pos": 1 }, { "const": 3 } ] }
{
  "eq": [
    {
      "sum": [ { "pos": 2 }, { "pos": 3 } ]
    },
    { "const": 7 }
  ]
}
{
  "eq": [
    { "pos": 1 },
    { "pos": 2 }
  ]
}
Para expresar cosas como “evento 2 + evento 3 es par”, lo natural sería agregar un operador mod al DSL.
Manual interactivo base para documentar Diarbol Engine.