JSON Schemas for OMD Components

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
  3. Equations & 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