VisActor VBI
  • Tiếng Việt

      • Sankey

      Biểu đồ Sankey luồng năng lượng

      Ví dụ VSeed được suy ngược từ Sankey spec. Mỗi liên kết được chuyển lại thành một hàng tidyData; source và target dùng tên nút, còn value biểu thị độ lớn của luồng. Ví dụ cũng bật tooltip và chú giải, nên có thể tô sáng khi hover và lọc bằng chú giải.

      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} />
}

      Biểu đồ Sankey dạng pivot

      Biểu đồ Sankey được pivot theo region và year. Region được ánh xạ vào hàng, year vào cột, và mỗi ô pivot hiển thị một đồ thị luồng source-target độc lập.

      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} />
}