โ† All examples

Data pipeline

A technical process diagram with four symbolic stages.

Data pipeline A technical process diagram with four symbolic stages. {"version":"0.1","sceneId":"data-pipeline-flow","targets":[{"nodeId":"flow-ingest-box","semanticRole":"shape","animation":"fade","order":1,"startPct":14.11,"durationPct":8,"value":"Ingest data","label":"Ingest data"},{"nodeId":"flow-ingest-icon-halo","semanticRole":"shape","animation":"fade","order":2,"startPct":16.21,"durationPct":8},{"nodeId":"flow-ingest-icon","semanticRole":"shape","animation":"fade","order":3,"startPct":18.32,"durationPct":8,"value":"Ingest data","label":"Ingest data"},{"nodeId":"flow-clean-box","semanticRole":"shape","animation":"fade","order":6,"startPct":24.63,"durationPct":8,"value":"Clean fields","label":"Clean fields"},{"nodeId":"flow-clean-icon-halo","semanticRole":"shape","animation":"fade","order":7,"startPct":26.74,"durationPct":8},{"nodeId":"flow-clean-icon","semanticRole":"shape","animation":"fade","order":8,"startPct":28.84,"durationPct":8,"value":"Clean fields","label":"Clean fields"},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Data pipeline","label":"Data pipeline"},{"nodeId":"flow-model-box","semanticRole":"shape","animation":"fade","order":11,"startPct":35.16,"durationPct":8,"value":"Model output","label":"Model output"},{"nodeId":"flow-ingest-label","semanticRole":"label","animation":"label","order":4,"startPct":37,"durationPct":8,"value":"Ingest data","label":"Ingest data"},{"nodeId":"flow-model-icon-halo","semanticRole":"shape","animation":"fade","order":12,"startPct":37.26,"durationPct":8},{"nodeId":"flow-model-icon","semanticRole":"shape","animation":"fade","order":13,"startPct":39.37,"durationPct":8,"value":"Model output","label":"Model output"},{"nodeId":"flow-clean-label","semanticRole":"label","animation":"label","order":9,"startPct":42,"durationPct":8,"value":"Clean fields","label":"Clean fields"},{"nodeId":"flow-report-box","semanticRole":"shape","animation":"fade","order":16,"startPct":45.68,"durationPct":8,"value":"Report result","label":"Report result"},{"nodeId":"flow-model-label","semanticRole":"label","animation":"label","order":14,"startPct":47,"durationPct":8,"value":"Model output","label":"Model output"},{"nodeId":"flow-report-icon-halo","semanticRole":"shape","animation":"fade","order":17,"startPct":47.79,"durationPct":8},{"nodeId":"flow-report-icon","semanticRole":"shape","animation":"fade","order":18,"startPct":49.89,"durationPct":8,"value":"Report result","label":"Report result"},{"nodeId":"flow-report-label","semanticRole":"label","animation":"label","order":19,"startPct":52,"durationPct":8,"value":"Report result","label":"Report result"},{"nodeId":"flow-ingest-arrow","semanticRole":"connector","animation":"draw","order":5,"startPct":54.53,"durationPct":14},{"nodeId":"flow-clean-arrow","semanticRole":"connector","animation":"draw","order":10,"startPct":65.05,"durationPct":14},{"nodeId":"flow-model-arrow","semanticRole":"connector","animation":"draw","order":15,"startPct":75.58,"durationPct":14}]} Data pipeline Ingest dataIngest dataIngest dataClean fieldsClean fieldsClean fieldsModel outputModel outputModel outputReport resultReport resultReport result
{
  "version": "0.1",
  "id": "data-pipeline-flow",
  "title": "Data pipeline",
  "description": "A technical process diagram with four symbolic stages.",
  "canvas": {
    "width": 960,
    "height": 440,
    "background": "background",
    "padding": 40
  },
  "theme": {
    "id": "clean-light"
  },
  "nodes": [
    {
      "id": "title",
      "x": 480,
      "y": 60,
      "type": "text",
      "text": "Data pipeline",
      "fontSize": 28,
      "align": "center"
    },
    {
      "id": "flow",
      "x": 60,
      "y": 130,
      "width": 840,
      "height": 165,
      "accessibility": {
        "label": "Data pipeline flow diagram",
        "role": "img"
      },
      "type": "component",
      "component": "FlowDiagram",
      "props": {
        "direction": "horizontal",
        "arrows": true,
        "items": [
          {
            "id": "ingest",
            "label": "Ingest data",
            "icon": "arrow"
          },
          {
            "id": "clean",
            "label": "Clean fields",
            "icon": "check"
          },
          {
            "id": "model",
            "label": "Model output",
            "icon": "spark"
          },
          {
            "id": "report",
            "label": "Report result",
            "icon": "book"
          }
        ]
      }
    }
  ]
}