โ† All examples

Simple electric circuit

A flow diagram showing current through a simple circuit.

Simple electric circuit A flow diagram showing current through a simple circuit. {"version":"0.1","sceneId":"electric-circuit-flow","targets":[{"nodeId":"flow-battery-box","semanticRole":"shape","animation":"fade","order":1,"startPct":14,"durationPct":8,"value":"Battery pushes charge","label":"Battery pushes charge"},{"nodeId":"flow-battery-icon-halo","semanticRole":"shape","animation":"fade","order":2,"startPct":16,"durationPct":8},{"nodeId":"flow-battery-icon","semanticRole":"shape","animation":"fade","order":3,"startPct":18,"durationPct":8,"value":"Battery pushes charge","label":"Battery pushes charge"},{"nodeId":"flow-wire-box","semanticRole":"shape","animation":"fade","order":6,"startPct":24,"durationPct":8,"value":"Wire carries current","label":"Wire carries current"},{"nodeId":"flow-wire-icon-halo","semanticRole":"shape","animation":"fade","order":7,"startPct":26,"durationPct":8},{"nodeId":"flow-wire-icon","semanticRole":"shape","animation":"fade","order":8,"startPct":28,"durationPct":8,"value":"Wire carries current","label":"Wire carries current"},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Simple electric circuit","label":"Simple electric circuit"},{"nodeId":"flow-bulb-box","semanticRole":"shape","animation":"fade","order":11,"startPct":34,"durationPct":8,"value":"Bulb uses energy","label":"Bulb uses energy"},{"nodeId":"flow-battery-label","semanticRole":"label","animation":"label","order":4,"startPct":36,"durationPct":8,"value":"Battery pushes charge","label":"Battery pushes charge"},{"nodeId":"flow-bulb-icon-halo","semanticRole":"shape","animation":"fade","order":12,"startPct":36,"durationPct":8},{"nodeId":"flow-bulb-icon","semanticRole":"shape","animation":"fade","order":13,"startPct":38,"durationPct":8,"value":"Bulb uses energy","label":"Bulb uses energy"},{"nodeId":"flow-wire-label","semanticRole":"label","animation":"label","order":9,"startPct":40,"durationPct":8,"value":"Wire carries current","label":"Wire carries current"},{"nodeId":"flow-bulb-label","semanticRole":"label","animation":"label","order":14,"startPct":44,"durationPct":8,"value":"Bulb uses energy","label":"Bulb uses energy"},{"nodeId":"flow-return-box","semanticRole":"shape","animation":"fade","order":16,"startPct":44,"durationPct":8,"value":"Current returns","label":"Current returns"},{"nodeId":"flow-return-icon-halo","semanticRole":"shape","animation":"fade","order":17,"startPct":46,"durationPct":8},{"nodeId":"flow-return-icon","semanticRole":"shape","animation":"fade","order":18,"startPct":48,"durationPct":8,"value":"Current returns","label":"Current returns"},{"nodeId":"flow-return-label","semanticRole":"label","animation":"label","order":19,"startPct":48,"durationPct":8,"value":"Current returns","label":"Current returns"},{"nodeId":"note","semanticRole":"label","animation":"label","order":20,"startPct":52,"durationPct":8,"value":"A complete loop lets current keep moving.","label":"A complete loop lets current keep moving."},{"nodeId":"flow-battery-arrow","semanticRole":"connector","animation":"draw","order":5,"startPct":54,"durationPct":14},{"nodeId":"flow-wire-arrow","semanticRole":"connector","animation":"draw","order":10,"startPct":64,"durationPct":14},{"nodeId":"flow-bulb-arrow","semanticRole":"connector","animation":"draw","order":15,"startPct":74,"durationPct":14}]} Simple electric circuit Battery pushes chargeBattery pushes chargeBatterypushes chargeWire carries currentWire carries currentWire carriescurrentBulb uses energyBulb uses energyBulb usesenergyCurrent returnsCurrent returnsCurrentreturns A complete loop lets current keep moving.
{
  "version": "0.1",
  "id": "electric-circuit-flow",
  "title": "Simple electric circuit",
  "description": "A flow diagram showing current through a simple circuit.",
  "canvas": {
    "width": 900,
    "height": 420,
    "background": "background",
    "padding": 40
  },
  "theme": {
    "id": "clean-light"
  },
  "nodes": [
    {
      "id": "title",
      "x": 450,
      "y": 60,
      "type": "text",
      "text": "Simple electric circuit",
      "fontSize": 28,
      "align": "center"
    },
    {
      "id": "flow",
      "x": 60,
      "y": 126,
      "width": 780,
      "height": 160,
      "accessibility": {
        "label": "Electric circuit flow diagram",
        "role": "img"
      },
      "type": "component",
      "component": "FlowDiagram",
      "props": {
        "direction": "horizontal",
        "arrows": true,
        "items": [
          {
            "id": "battery",
            "label": "Battery pushes charge",
            "icon": "battery"
          },
          {
            "id": "wire",
            "label": "Wire carries current",
            "icon": "wire"
          },
          {
            "id": "bulb",
            "label": "Bulb uses energy",
            "icon": "bulb"
          },
          {
            "id": "return",
            "label": "Current returns",
            "icon": "loop"
          }
        ]
      }
    },
    {
      "id": "note",
      "x": 450,
      "y": 336,
      "type": "text",
      "text": "A complete loop lets current keep moving.",
      "fontSize": 19,
      "fontWeight": 600,
      "align": "center"
    }
  ]
}