โ† All examples

Temperature scale

A number-line test with negative values and named highlights.

Temperature scale A number-line test with negative values and named highlights. {"version":"0.1","sceneId":"temperature-number-line","targets":[{"nodeId":"line-axis","semanticRole":"axis","animation":"draw","order":1,"startPct":3.9,"durationPct":12},{"nodeId":"line-tick--20","semanticRole":"tick","animation":"tick","order":2,"startPct":16,"durationPct":8},{"nodeId":"line-tick--10","semanticRole":"tick","animation":"tick","order":4,"startPct":19.33,"durationPct":8},{"nodeId":"line-tick-0","semanticRole":"tick","animation":"tick","order":6,"startPct":22.67,"durationPct":8},{"nodeId":"line-tick-10","semanticRole":"tick","animation":"tick","order":8,"startPct":26,"durationPct":8},{"nodeId":"line-tick-20","semanticRole":"tick","animation":"tick","order":10,"startPct":29.33,"durationPct":8},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Temperature scale","label":"Temperature scale"},{"nodeId":"line-tick-30","semanticRole":"tick","animation":"tick","order":12,"startPct":32.67,"durationPct":8},{"nodeId":"line-label--20","semanticRole":"label","animation":"label","order":3,"startPct":34,"durationPct":8,"value":"-20","label":"-20"},{"nodeId":"line-label--10","semanticRole":"label","animation":"label","order":5,"startPct":36,"durationPct":8,"value":"-10","label":"-10"},{"nodeId":"line-tick-40","semanticRole":"tick","animation":"tick","order":14,"startPct":36,"durationPct":8},{"nodeId":"line-label-0","semanticRole":"label","animation":"label","order":7,"startPct":38,"durationPct":8,"value":"0","label":"0"},{"nodeId":"line-label-10","semanticRole":"label","animation":"label","order":9,"startPct":40,"durationPct":8,"value":"10","label":"10"},{"nodeId":"line-label-20","semanticRole":"label","animation":"label","order":11,"startPct":42,"durationPct":8,"value":"20","label":"20"},{"nodeId":"line-label-30","semanticRole":"label","animation":"label","order":13,"startPct":44,"durationPct":8,"value":"30","label":"30"},{"nodeId":"line-label-40","semanticRole":"label","animation":"label","order":15,"startPct":46,"durationPct":8,"value":"40","label":"40"},{"nodeId":"line-highlight-0","semanticRole":"highlight","animation":"pop","order":16,"startPct":70,"durationPct":8,"value":"freezing","label":"freezing"},{"nodeId":"line-highlight-20","semanticRole":"highlight","animation":"pop","order":18,"startPct":78,"durationPct":8,"value":"room","label":"room"},{"nodeId":"line-highlight-37","semanticRole":"highlight","animation":"pop","order":20,"startPct":86,"durationPct":8,"value":"body","label":"body"},{"nodeId":"line-highlight-label-0","semanticRole":"label","animation":"label","order":17,"startPct":88,"durationPct":8,"value":"freezing","label":"freezing"},{"nodeId":"line-highlight-label-20","semanticRole":"label","animation":"label","order":19,"startPct":88,"durationPct":8,"value":"room","label":"room"},{"nodeId":"line-highlight-label-37","semanticRole":"label","animation":"label","order":21,"startPct":88,"durationPct":8,"value":"body","label":"body"}]} Temperature scale Number line from -20 to 40-20-10010203040freezingfreezingroomroombodybody
{
  "version": "0.1",
  "id": "temperature-number-line",
  "title": "Temperature scale",
  "description": "A number-line test with negative values and named highlights.",
  "canvas": {
    "width": 920,
    "height": 360,
    "background": "background",
    "padding": 40
  },
  "theme": {
    "id": "clean-light"
  },
  "nodes": [
    {
      "id": "title",
      "x": 460,
      "y": 58,
      "type": "text",
      "text": "Temperature scale",
      "fontSize": 28,
      "align": "center"
    },
    {
      "id": "line",
      "x": 70,
      "y": 135,
      "width": 780,
      "height": 150,
      "accessibility": {
        "label": "Temperature number line",
        "role": "img"
      },
      "type": "component",
      "component": "NumberLine",
      "props": {
        "min": -20,
        "max": 40,
        "step": 10,
        "highlights": [
          {
            "value": 0,
            "label": "freezing"
          },
          {
            "value": 20,
            "label": "room"
          },
          {
            "value": 37,
            "label": "body"
          }
        ]
      }
    }
  ]
}