โ† All examples

Energy transfer

A linear science process with longer labels.

Energy transfer A linear science process with longer labels. {"version":"0.1","sceneId":"energy-transfer-chain","targets":[{"nodeId":"flow-chemical-box","semanticRole":"shape","animation":"fade","order":1,"startPct":14.11,"durationPct":8,"value":"Chemical energy","label":"Chemical energy"},{"nodeId":"flow-chemical-icon-halo","semanticRole":"shape","animation":"fade","order":2,"startPct":16.21,"durationPct":8},{"nodeId":"flow-chemical-icon","semanticRole":"shape","animation":"fade","order":3,"startPct":18.32,"durationPct":8,"value":"Chemical energy","label":"Chemical energy"},{"nodeId":"flow-electrical-box","semanticRole":"shape","animation":"fade","order":6,"startPct":24.63,"durationPct":8,"value":"Electrical energy","label":"Electrical energy"},{"nodeId":"flow-electrical-icon-halo","semanticRole":"shape","animation":"fade","order":7,"startPct":26.74,"durationPct":8},{"nodeId":"flow-electrical-icon","semanticRole":"shape","animation":"fade","order":8,"startPct":28.84,"durationPct":8,"value":"Electrical energy","label":"Electrical energy"},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Energy transfer","label":"Energy transfer"},{"nodeId":"flow-light-box","semanticRole":"shape","animation":"fade","order":11,"startPct":35.16,"durationPct":8,"value":"Light output","label":"Light output"},{"nodeId":"flow-chemical-label","semanticRole":"label","animation":"label","order":4,"startPct":37,"durationPct":8,"value":"Chemical energy","label":"Chemical energy"},{"nodeId":"flow-light-icon-halo","semanticRole":"shape","animation":"fade","order":12,"startPct":37.26,"durationPct":8},{"nodeId":"flow-light-icon","semanticRole":"shape","animation":"fade","order":13,"startPct":39.37,"durationPct":8,"value":"Light output","label":"Light output"},{"nodeId":"flow-electrical-label","semanticRole":"label","animation":"label","order":9,"startPct":42,"durationPct":8,"value":"Electrical energy","label":"Electrical energy"},{"nodeId":"flow-thermal-box","semanticRole":"shape","animation":"fade","order":16,"startPct":45.68,"durationPct":8,"value":"Thermal loss","label":"Thermal loss"},{"nodeId":"flow-light-label","semanticRole":"label","animation":"label","order":14,"startPct":47,"durationPct":8,"value":"Light output","label":"Light output"},{"nodeId":"flow-thermal-icon-halo","semanticRole":"shape","animation":"fade","order":17,"startPct":47.79,"durationPct":8},{"nodeId":"flow-thermal-icon","semanticRole":"shape","animation":"fade","order":18,"startPct":49.89,"durationPct":8,"value":"Thermal loss","label":"Thermal loss"},{"nodeId":"flow-thermal-label","semanticRole":"label","animation":"label","order":19,"startPct":52,"durationPct":8,"value":"Thermal loss","label":"Thermal loss"},{"nodeId":"flow-chemical-arrow","semanticRole":"connector","animation":"draw","order":5,"startPct":54.53,"durationPct":14},{"nodeId":"flow-electrical-arrow","semanticRole":"connector","animation":"draw","order":10,"startPct":65.05,"durationPct":14},{"nodeId":"flow-light-arrow","semanticRole":"connector","animation":"draw","order":15,"startPct":75.58,"durationPct":14}]} Energy transfer Chemical energyChemical energyChemicalenergyElectrical energyElectrical energyElectricalenergyLight outputLight outputLight outputThermal lossThermal lossThermal loss
{
  "version": "0.1",
  "id": "energy-transfer-chain",
  "title": "Energy transfer",
  "description": "A linear science process with longer labels.",
  "canvas": {
    "width": 960,
    "height": 450,
    "background": "background",
    "padding": 40
  },
  "theme": {
    "id": "clean-light"
  },
  "nodes": [
    {
      "id": "title",
      "x": 480,
      "y": 60,
      "type": "text",
      "text": "Energy transfer",
      "fontSize": 28,
      "align": "center"
    },
    {
      "id": "flow",
      "x": 60,
      "y": 130,
      "width": 840,
      "height": 165,
      "accessibility": {
        "label": "Energy transfer chain diagram",
        "role": "img"
      },
      "type": "component",
      "component": "FlowDiagram",
      "props": {
        "direction": "horizontal",
        "arrows": true,
        "items": [
          {
            "id": "chemical",
            "label": "Chemical energy",
            "icon": "battery"
          },
          {
            "id": "electrical",
            "label": "Electrical energy",
            "icon": "wire"
          },
          {
            "id": "light",
            "label": "Light output",
            "icon": "bulb"
          },
          {
            "id": "thermal",
            "label": "Thermal loss",
            "icon": "sun"
          }
        ]
      }
    }
  ]
}