VisActor VBI
  • 한국어

      • Sankey

      에너지 흐름 Sankey 차트

      Sankey spec에서 역으로 도출한 VSeed 예제입니다. 각 링크는 tidyData의 한 행으로 복원되며, source와 target은 노드 이름을 사용하고 value는 흐름 크기를 나타냅니다. 이 예제는 tooltip과 범례도 활성화하므로 hover 강조와 범례 필터링 상호작용을 사용할 수 있습니다.

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "sankey",
  "dataset": [
    {
      "sourceNode": "Agricultural 'waste'",
      "targetNode": "Bio-conversion",
      "value": 124.729
    },
    {
      "sourceNode": "Bio-conversion",
      "targetNode": "Liquid",
      "value": 0.597
    },
    {
      "sourceNode": "Bio-conversion",
      "targetNode": "Losses",
      "value": 26.862
    },
    {
      "sourceNode": "Bio-conversion",
      "targetNode": "Solid",
      "value": 280.322
    },
    {
      "sourceNode": "Bio-conversion",
      "targetNode": "Gas",
      "value": 81.144
    },
    {
      "sourceNode": "Biofuel imports",
      "targetNode": "Liquid",
      "value": 35
    },
    {
      "sourceNode": "Biomass imports",
      "targetNode": "Solid",
      "value": 35
    },
    {
      "sourceNode": "Coal imports",
      "targetNode": "Coal",
      "value": 11.606
    },
    {
      "sourceNode": "Coal reserves",
      "targetNode": "Coal",
      "value": 63.965
    },
    {
      "sourceNode": "Coal",
      "targetNode": "Solid",
      "value": 75.571
    },
    {
      "sourceNode": "District heating",
      "targetNode": "Industry",
      "value": 10.639
    },
    {
      "sourceNode": "District heating",
      "targetNode": "Heating and cooling - commercial",
      "value": 22.505
    },
    {
      "sourceNode": "District heating",
      "targetNode": "Heating and cooling - homes",
      "value": 46.184
    },
    {
      "sourceNode": "Electricity grid",
      "targetNode": "Over generation / exports",
      "value": 104.453
    },
    {
      "sourceNode": "Electricity grid",
      "targetNode": "Heating and cooling - homes",
      "value": 113.726
    },
    {
      "sourceNode": "Electricity grid",
      "targetNode": "H2 conversion",
      "value": 27.14
    },
    {
      "sourceNode": "Electricity grid",
      "targetNode": "Industry",
      "value": 342.165
    },
    {
      "sourceNode": "Electricity grid",
      "targetNode": "Road transport",
      "value": 37.797
    },
    {
      "sourceNode": "Electricity grid",
      "targetNode": "Agriculture",
      "value": 4.412
    },
    {
      "sourceNode": "Electricity grid",
      "targetNode": "Heating and cooling - commercial",
      "value": 40.858
    },
    {
      "sourceNode": "Electricity grid",
      "targetNode": "Losses",
      "value": 56.691
    },
    {
      "sourceNode": "Electricity grid",
      "targetNode": "Rail transport",
      "value": 7.863
    },
    {
      "sourceNode": "Electricity grid",
      "targetNode": "Lighting & appliances - commercial",
      "value": 90.008
    },
    {
      "sourceNode": "Electricity grid",
      "targetNode": "Lighting & appliances - homes",
      "value": 93.494
    },
    {
      "sourceNode": "Gas imports",
      "targetNode": "Ngas",
      "value": 40.719
    },
    {
      "sourceNode": "Gas reserves",
      "targetNode": "Ngas",
      "value": 82.233
    },
    {
      "sourceNode": "Gas",
      "targetNode": "Heating and cooling - commercial",
      "value": 0.129
    },
    {
      "sourceNode": "Gas",
      "targetNode": "Losses",
      "value": 1.401
    },
    {
      "sourceNode": "Gas",
      "targetNode": "Thermal generation",
      "value": 151.891
    },
    {
      "sourceNode": "Gas",
      "targetNode": "Agriculture",
      "value": 2.096
    },
    {
      "sourceNode": "Gas",
      "targetNode": "Industry",
      "value": 48.58
    },
    {
      "sourceNode": "Geothermal",
      "targetNode": "Electricity grid",
      "value": 7.013
    },
    {
      "sourceNode": "H2 conversion",
      "targetNode": "H2",
      "value": 20.897
    },
    {
      "sourceNode": "H2 conversion",
      "targetNode": "Losses",
      "value": 6.242
    },
    {
      "sourceNode": "H2",
      "targetNode": "Road transport",
      "value": 20.897
    },
    {
      "sourceNode": "Hydro",
      "targetNode": "Electricity grid",
      "value": 6.995
    },
    {
      "sourceNode": "Liquid",
      "targetNode": "Industry",
      "value": 121.066
    },
    {
      "sourceNode": "Liquid",
      "targetNode": "International shipping",
      "value": 128.69
    },
    {
      "sourceNode": "Liquid",
      "targetNode": "Road transport",
      "value": 135.835
    },
    {
      "sourceNode": "Liquid",
      "targetNode": "Domestic aviation",
      "value": 14.458
    },
    {
      "sourceNode": "Liquid",
      "targetNode": "International aviation",
      "value": 206.267
    },
    {
      "sourceNode": "Liquid",
      "targetNode": "Agriculture",
      "value": 3.64
    },
    {
      "sourceNode": "Liquid",
      "targetNode": "National navigation",
      "value": 33.218
    },
    {
      "sourceNode": "Liquid",
      "targetNode": "Rail transport",
      "value": 4.413
    },
    {
      "sourceNode": "Marine algae",
      "targetNode": "Bio-conversion",
      "value": 4.375
    },
    {
      "sourceNode": "Ngas",
      "targetNode": "Gas",
      "value": 122.952
    },
    {
      "sourceNode": "Nuclear",
      "targetNode": "Thermal generation",
      "value": 839.978
    },
    {
      "sourceNode": "Oil imports",
      "targetNode": "Oil",
      "value": 504.287
    },
    {
      "sourceNode": "Oil reserves",
      "targetNode": "Oil",
      "value": 107.703
    },
    {
      "sourceNode": "Oil",
      "targetNode": "Liquid",
      "value": 611.99
    },
    {
      "sourceNode": "Other waste",
      "targetNode": "Solid",
      "value": 56.587
    },
    {
      "sourceNode": "Other waste",
      "targetNode": "Bio-conversion",
      "value": 77.81
    },
    {
      "sourceNode": "Pumped heat",
      "targetNode": "Heating and cooling - homes",
      "value": 193.026
    },
    {
      "sourceNode": "Pumped heat",
      "targetNode": "Heating and cooling - commercial",
      "value": 70.672
    },
    {
      "sourceNode": "Solar PV",
      "targetNode": "Electricity grid",
      "value": 59.901
    },
    {
      "sourceNode": "Solar Thermal",
      "targetNode": "Heating and cooling - homes",
      "value": 19.263
    },
    {
      "sourceNode": "Solar",
      "targetNode": "Solar Thermal",
      "value": 19.263
    },
    {
      "sourceNode": "Solar",
      "targetNode": "Solar PV",
      "value": 59.901
    },
    {
      "sourceNode": "Solid",
      "targetNode": "Agriculture",
      "value": 0.882
    },
    {
      "sourceNode": "Solid",
      "targetNode": "Thermal generation",
      "value": 400.12
    },
    {
      "sourceNode": "Solid",
      "targetNode": "Industry",
      "value": 46.477
    },
    {
      "sourceNode": "Thermal generation",
      "targetNode": "Electricity grid",
      "value": 525.531
    },
    {
      "sourceNode": "Thermal generation",
      "targetNode": "Losses",
      "value": 787.129
    },
    {
      "sourceNode": "Thermal generation",
      "targetNode": "District heating",
      "value": 79.329
    },
    {
      "sourceNode": "Tidal",
      "targetNode": "Electricity grid",
      "value": 9.452
    },
    {
      "sourceNode": "UK land based bioenergy",
      "targetNode": "Bio-conversion",
      "value": 182.01
    },
    {
      "sourceNode": "Wave",
      "targetNode": "Electricity grid",
      "value": 19.013
    },
    {
      "sourceNode": "Wind",
      "targetNode": "Electricity grid",
      "value": 289.366
    }
  ],
  "dimensions": [
    {
      "id": "sourceNode",
      "alias": "Source",
      "encoding": "source"
    },
    {
      "id": "targetNode",
      "alias": "Target",
      "encoding": "target"
    }
  ],
  "measures": [
    {
      "id": "value",
      "alias": "Flow"
    }
  ],
  "color": {
    "colorScheme": [
      "#0B6CFF",
      "#3B8BFF",
      "#00A6A6",
      "#4DC3B2",
      "#FF8A00",
      "#FFB347",
      "#7B61FF",
      "#B39DFF",
      "#4CAF50",
      "#8BC34A"
    ]
  },
  "label": {
    "enable": true,
    "showDimension": true,
    "showValue": true,
    "labelFontSize": 10
  },
  "tooltip": {
    "enable": true
  },
  "legend": {
    "enable": true,
    "position": "top",
    "maxSize": 2,
    "shapeType": "rectRound"
  }
}

  return <VSeedRender vseed={vseedConfig} />
}

      피벗 Sankey 차트

      지역과 연도 기준으로 피벗한 Sankey 차트입니다. 지역은 행에, 연도는 열에 매핑되며, 각 피벗 셀에는 독립적인 source-target 흐름 그래프가 표시됩니다.

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "sankey",
  "dataset": [
    {
      "region": "East",
      "year": "2023",
      "sourceNode": "Coal",
      "targetNode": "Power",
      "value": 120
    },
    {
      "region": "East",
      "year": "2023",
      "sourceNode": "Solar",
      "targetNode": "Power",
      "value": 80
    },
    {
      "region": "East",
      "year": "2023",
      "sourceNode": "Power",
      "targetNode": "Industry",
      "value": 90
    },
    {
      "region": "East",
      "year": "2023",
      "sourceNode": "Power",
      "targetNode": "Homes",
      "value": 70
    },
    {
      "region": "East",
      "year": "2024",
      "sourceNode": "Coal",
      "targetNode": "Power",
      "value": 90
    },
    {
      "region": "East",
      "year": "2024",
      "sourceNode": "Wind",
      "targetNode": "Power",
      "value": 110
    },
    {
      "region": "East",
      "year": "2024",
      "sourceNode": "Power",
      "targetNode": "Industry",
      "value": 85
    },
    {
      "region": "East",
      "year": "2024",
      "sourceNode": "Power",
      "targetNode": "Homes",
      "value": 95
    },
    {
      "region": "West",
      "year": "2023",
      "sourceNode": "Gas",
      "targetNode": "Power",
      "value": 100
    },
    {
      "region": "West",
      "year": "2023",
      "sourceNode": "Hydro",
      "targetNode": "Power",
      "value": 70
    },
    {
      "region": "West",
      "year": "2023",
      "sourceNode": "Power",
      "targetNode": "Industry",
      "value": 80
    },
    {
      "region": "West",
      "year": "2023",
      "sourceNode": "Power",
      "targetNode": "Transport",
      "value": 60
    },
    {
      "region": "West",
      "year": "2024",
      "sourceNode": "Gas",
      "targetNode": "Power",
      "value": 85
    },
    {
      "region": "West",
      "year": "2024",
      "sourceNode": "Hydro",
      "targetNode": "Power",
      "value": 95
    },
    {
      "region": "West",
      "year": "2024",
      "sourceNode": "Power",
      "targetNode": "Industry",
      "value": 75
    },
    {
      "region": "West",
      "year": "2024",
      "sourceNode": "Power",
      "targetNode": "Transport",
      "value": 88
    }
  ],
  "dimensions": [
    {
      "id": "sourceNode",
      "alias": "Source",
      "encoding": "source"
    },
    {
      "id": "targetNode",
      "alias": "Target",
      "encoding": "target"
    },
    {
      "id": "region",
      "alias": "Region",
      "encoding": "row"
    },
    {
      "id": "year",
      "alias": "Year",
      "encoding": "column"
    }
  ],
  "measures": [
    {
      "id": "value",
      "alias": "Flow"
    }
  ],
  "color": {
    "colorScheme": [
      "#0B6CFF",
      "#3B8BFF",
      "#00A6A6",
      "#4DC3B2",
      "#FF8A00",
      "#FFB347",
      "#7B61FF",
      "#B39DFF"
    ]
  },
  "label": {
    "enable": true,
    "showDimension": true,
    "showValue": true
  },
  "tooltip": {
    "enable": true
  },
  "legend": {
    "enable": true,
    "position": "top"
  }
}

  return <VSeedRender vseed={vseedConfig} />
}