# JSON Schemas for OMD Components

This document provides complete JSON schemas and examples for all OMD visual components. Use these with the `loadFromJSON()` method.

## Table of Contents

1. Global Context & Configuration
2. Visualizations
   - Number & Ratio Visualizations
   - Graphing & Geometry
   - Data Display
3. Equations & Expressions
   - Core Components
   - Advanced Expressions

## Global Context & Configuration

### Common Expression Format

Many components accept expressions in multiple formats:

String Format (simplest):

    "2x + 3"

Structured Format (programmatic):

    {
      "termsAndOpers": [
        { "omdType": "term", "coefficient": 2, "variable": "x", "exponent": 1 },
        { "omdType": "operator", "operator": "+" },
        { "omdType": "number", "value": 3 }
      ]
    }

### Primitive Types

#### `omdNumber`

    {
      "omdType": "number",
      "value": 42
    }

#### `omdVariable`

    {
      "omdType": "variable",
      "name": "x"
    }

#### `omdOperator`

    {
      "omdType": "operator",
      "operator": "+"
    }

Supported operators: `+`, `-`, `/`, `÷`, `x`, `*`, `•`, `×`, `=`

#### `omdTerm`

    {
      "omdType": "term",
      "coefficient": 3,
      "variable": "x",
      "exponent": 2
    }

## Visualizations

### Number & Ratio Visualizations

#### `omdNumberLine`

Interactive number line with labeled ticks and optional dots.

Schema:

    {
      min: number,
      max: number,
      dotValues?: number[],
      label?: string
    }

Example:

    {
      "min": 0,
      "max": 10,
      "dotValues": [2, 5, 8],
      "label": "Number Line Example"
    }

Usage:

    const numberLine = new omdNumberLine();
    numberLine.loadFromJSON({
      min: 0,
      max: 10,
      dotValues: [2, 5, 8],
      label: "Number Line Example"
    });

#### `omdNumberTile`

Visual tile with dots for counting and grouping activities.

Schema:

    {
      value: number,
      size?: "small" | "medium" | "large",
      dotsPerColumn?: number,
      backgroundColor?: string,
      dotColor?: string
    }

Example:

    {
      "value": 10,
      "size": "medium",
      "dotsPerColumn": 5,
      "backgroundColor": "#FFFFFF",
      "dotColor": "#000000"
    }

#### `omdTapeDiagram`

Part-whole relationship diagrams with labeled sections.

Schema:

    {
      values: number[],
      showValues?: boolean,
      colors?: string[],
      labelSet?: Array<{
        startIndex: number,
        endIndex: number,
        label: string,
        showBelow?: boolean
      }>,
      unitWidth?: number
    }

Example:

    {
      "values": [1, 2, 3],
      "showValues": true,
      "colors": ["#FF0000", "#00FF00", "#0000FF"],
      "labelSet": [
        {
          "startIndex": 0,
          "endIndex": 2,
          "label": "Total: 6",
          "showBelow": true
        }
      ],
      "unitWidth": 30
    }

#### `omdRatioChart`

Pie and bar chart ratio visualizations.

Schema:

    {
      valueA: number,
      valueB: number,
      renderType?: "pie" | "bar",
      size?: "small" | "medium" | "large"
    }

Example:

    {
      "valueA": 3,
      "valueB": 2,
      "renderType": "pie",
      "size": "medium"
    }

#### `omdBalanceHanger`

Balance scale visualizations.

Schema:

    {
      leftValues: number[],
      rightValues: number[],
      tilt?: "left" | "right" | "balanced"
    }

Example:

    {
      "leftValues": [5, 3],
      "rightValues": [4, 4],
      "tilt": "balanced"
    }

### Graphing & Geometry

#### `omdCoordinatePlane`

2D coordinate plane with axes, gridlines, functions, shapes, and plots.

Schema:

    {
      graphEquations?: Array<{
        equation: string,
        color?: string,
        strokeWidth?: number,
        labelAtX?: number,
        domain?: { min: number, max: number }
      }>,
      lineSegments?: Array<{
        point1: [number, number],
        point2: [number, number],
        color?: string,
        strokeWidth?: number
      }>,
      dotValues?: Array<[number, number, string?]>,
      shapeSet?: Array<ShapeObject>,
      xMin?: number,
      xMax?: number,
      yMin?: number,
      yMax?: number,
      xLabel?: string,
      yLabel?: string,
      axisLabelOffsetPx?: number,
      size?: "small" | "medium" | "large",
      tickInterval?: number,
      forceAllTickLabels?: boolean,
      tickLabelOffsetPx?: number,
      showTickLabels?: boolean,
      backgroundColor?: string,
      backgroundCornerRadius?: number,
      backgroundOpacity?: number,
      showBackground?: boolean
    }

Example:

    {
      "graphEquations": [
        {
          "equation": "y = x^2 - 4",
          "color": "#e11d48",
          "strokeWidth": 2,
          "domain": { "min": -5, "max": 5 }
        }
      ],
      "lineSegments": [
        {
          "point1": [0, 0],
          "point2": [1, 1],
          "color": "red",
          "strokeWidth": 2
        }
      ],
      "dotValues": [[0, 0, "green"], [1, 1, "blue"]],
      "xMin": -5,
      "xMax": 5,
      "yMin": -5,
      "yMax": 5,
      "xLabel": "X-Axis",
      "yLabel": "Y-Axis",
      "tickInterval": 1,
      "showTickLabels": true,
      "backgroundColor": "#FFFFFF",
      "showBackground": true
    }

#### `omdShapes`

Geometric shapes for visualization.

Circle:

    {
      "omdType": "circle",
      "radius": 4,
      "unitScale": 40,
      "points": [
        { "name": "A", "type": "center" },
        { "name": "B", "angle": 0 },
        { "name": "C", "angle": 115 },
        { "name": "D", "angle": 230 },
        { "name": "E", "angle": 180 }
      ],
      "segments": [
        { "from": "E", "to": "B" },
        { "from": "A", "to": "C", "label": "4 cm", "labelOffset": 30 },
        { "from": "A", "to": "D" }
      ]
    }

Angle:

    {
      "omdType": "angle",
      "rays": [
        { "angle": 0 },
        { "angle": 50 }
      ],
      "angles": [
        { "from": 0, "to": 1, "label": "a°" }
      ],
      "strokeColor": "#0796C8",
      "strokeWidth": 3
    }

Rectangle:

    {
      "omdType": "rectangle",
      "width": 20,
      "height": 10,
      "color": "#00FF00"
    }

Regular Polygon:

    {
      "omdType": "regularPolygon",
      "sides": 6,
      "radius": 15,
      "color": "#0000FF"
    }

Ellipse:

    {
      "omdType": "ellipse",
      "radiusX": 20,
      "radiusY": 10,
      "color": "#FFFF00"
    }

Right Triangle:

    {
      "omdType": "rightTriangle",
      "base": 10,
      "height": 15,
      "color": "#FF00FF"
    }

Isosceles Triangle:

    {
      "omdType": "isoscelesTriangle",
      "base": 10,
      "height": 15,
      "color": "#00FFFF"
    }

#### `omdSpinner`

Circular spinner for divisions and selections.

Schema:

    {
      divisions: number,
      arrowPosition: number,
      size?: "small" | "medium" | "large"
    }

Example:

    {
      "divisions": 8,
      "arrowPosition": 3,
      "size": "medium"
    }

### Data Display

#### `omdTable`

Tabular data display with customizable styling.

Schema:

    {
      equation?: string,
      data?: Array<[number, number]>,
      headers?: string[],
      xMin?: number,
      xMax?: number,
      stepSize?: number,
      title?: string,
      fontSize?: number,
      headerFontSize?: number,
      fontFamily?: string,
      headerFontFamily?: string,
      cellHeight?: number,
      headerHeight?: number,
      minCellWidth?: number,
      maxCellWidth?: number,
      padding?: number,
      backgroundColor?: string,
      backgroundCornerRadius?: number,
      backgroundOpacity?: number,
      showBackground?: boolean,
      alternatingRowColors?: string[]
    }

Example:

    {
      "equation": "y = x^2",
      "headers": ["x", "y"],
      "xMin": -5,
      "xMax": 5,
      "stepSize": 1,
      "title": "Quadratic Table",
      "fontSize": 14,
      "headerFontSize": 16,
      "fontFamily": "Albert Sans",
      "cellHeight": 35,
      "backgroundColor": "#FFFFFF",
      "alternatingRowColors": ["#F0F0F0", "#FFFFFF"]
    }

## Equations & Expressions

### Core Components

#### `omdEquation`

Complete mathematical equations. The visual component now uses the same math.js-powered parser and renderer as the interactive core (functions, rationals, roots, etc.).

Preferred schema (string form):

    {
      "equation": "sin(x) + 2 = 3"
    }

Structured fallback (legacy):

    {
      leftExpression?: Expression | string,
      rightExpression?: Expression | string,
      equation: string
    }

Examples:

    { "equation": "sin(x) + 2 = 3" }

    { "equation": "(x^2 + 3x - 4)/(2x) = 5" }

Usage:

    // Preferred string form (math.js parsing)
    const eq = new omdEquation();
    eq.loadFromJSON({ equation: 'sqrt(x+1) = 4', fontSize: 32 });

    // Legacy structured form (if you already have parsed pieces)
    eq.loadFromJSON({
      leftExpression: { omdType: 'term', coefficient: 2, variable: 'x' },
      rightExpression: { omdType: 'number', value: 11 }
    });

#### `omdExpression`

Mathematical expressions (terms and operators).

Schema (String Form):

    "3x^2 + 5x - 2"

Schema (Structured Form):

    {
      termsAndOpers: Array<Term | Number | Variable | Operator>
    }

Example:

    {
      "termsAndOpers": [
        { "omdType": "term", "coefficient": 3, "variable": "x", "exponent": 2 },
        { "omdType": "operator", "operator": "+" },
        { "omdType": "term", "coefficient": 5, "variable": "x", "exponent": 1 },
        { "omdType": "operator", "operator": "-" },
        { "omdType": "number", "value": 2 }
      ]
    }

#### `omdString`

Simple string value for labels or annotations.

Schema:

    {
      name: string
    }

Example:

    {
      "name": "Example Label"
    }

### Advanced Expressions

#### `omdPowerExpression`

Expressions raised to a power (exponentiation).

Schema:

    {
      baseExpression: Expression | string,
      exponentExpression: Expression | string
    }

Example:

    {
      "baseExpression": {
        "termsAndOpers": [
          { "omdType": "variable", "name": "x" },
          { "omdType": "operator", "operator": "+" },
          { "omdType": "number", "value": 1 }
        ]
      },
      "exponentExpression": {
        "omdType": "number",
        "value": 2
      }
    }

Renders as: `(x + 1)²`

#### `omdRationalExpression`

Fractions and rational expressions.

Schema:

    {
      numeratorExpression: Expression | string,
      denominatorExpression: Expression | string
    }

Example:

    {
      "numeratorExpression": {
        "termsAndOpers": [
          { "omdType": "variable", "name": "x" },
          { "omdType": "operator", "operator": "+" },
          { "omdType": "number", "value": 1 }
        ]
      },
      "denominatorExpression": {
        "termsAndOpers": [
          { "omdType": "variable", "name": "x" },
          { "omdType": "operator", "operator": "-" },
          { "omdType": "number", "value": 1 }
        ]
      }
    }

Renders as: `(x + 1)/(x - 1)`

#### `omdFunction`

Mathematical functions with named inputs.

Schema:

    {
      name: string,
      inputVariables: string[],
      expression: Expression | string
    }

Example:

    {
      "name": "f",
      "inputVariables": ["x"],
      "expression": {
        "termsAndOpers": [
          { "omdType": "term", "coefficient": 2, "variable": "x" },
          { "omdType": "operator", "operator": "+" },
          { "omdType": "number", "value": 1 }
        ]
      }
    }

Renders as: `f(x) = 2x + 1`

#### `omdTileEquation`

Visual tile-based equations.

Schema:

    {
      left: Array<TileSpec>,
      right: Array<TileSpec>,
      equation?: string,
      tileSize?: number,
      tileGap?: number,
      equalGap?: number,
      tileRadius?: number,
      showLabels?: boolean,
      fontFamily?: string,
      fontSize?: number,
      plusColor?: string,
      equalsColor?: string,
      xPillColor?: string,
      numberTileDefaults?: {
        backgroundColor?: string,
        dotColor?: string
      }
    }

Example:

    {
      "left": ["x", "x", 3],
      "right": [11],
      "equation": "2x + 3 = 11",
      "tileSize": 28,
      "tileGap": 6,
      "showLabels": true,
      "fontFamily": "Albert Sans",
      "fontSize": 16
    }

#### `omdProblem`

Problem statement with associated visualization.

Schema:

    {
      problemText: string,
      visualization: any
    }

Example:

    {
      "problemText": "Solve for x:",
      "visualization": {
        "omdType": "equation",
        "equation": "2x + 3 = 11"
      }
    }

## Usage Patterns

### Loading from JSON

All components follow the same pattern:

    const component = new ComponentClass();
    component.loadFromJSON(jsonData);

### String vs. Structured

Many components accept both:

    // String form (simple)
    equation.loadFromJSON({ equation: '2x + 3 = 11' });

    // Structured form (programmatic)
    equation.loadFromJSON({
      leftExpression: { termsAndOpers: [...] },
      rightExpression: { termsAndOpers: [...] }
    });

### Nested Components

Components can be nested:

    const plane = new omdCoordinatePlane();
    plane.loadFromJSON({
      xMin: -10,
      xMax: 10,
      yMin: -10,
      yMax: 10,
      shapeSet: [
        { omdType: 'circle', radius: 5, color: 'blue' },
        { omdType: 'rectangle', width: 10, height: 5, color: 'red' }
      ]
    });

## Type Definitions

For TypeScript users, the general pattern is:

    type Expression = string | {
      termsAndOpers: Array<Term | Number | Variable | Operator>
    };

    type Term = {
      omdType: 'term',
      coefficient: number,
      variable?: string,
      exponent?: number
    };

    type Number = {
      omdType: 'number',
      value: number
    };

    type Variable = {
      omdType: 'variable',
      name: string
    };

    type Operator = {
      omdType: 'operator',
      operator: '+' | '-' | '/' | '÷' | 'x' | '*' | '•' | '×' | '='
    };

## See Also

- API Reference - Detailed API documentation
- Getting Started - Installation and basic usage
- Visualizations Guide - Visual component examples
- Equations Guide - Equation and expression examples

↑