Cookie Consent by Free Privacy Policy Generator 📌 How to configure the highlight effect of Sankey diagram


✅ How to configure the highlight effect of Sankey diagram


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

Title

How to configure the highlight effect of Sankey diagram?

Description

I added the following configuration based on this demo (see Figure 1), but it did not achieve the effect of Figure 2. How should I configure it?

Figure 1

Figure 2

Solution

If you want to achieve the highlighting effect in Figure 2, you need to configure the interaction states of node and link under the premise of emphasis. The above figure involves two interaction states: selected and blur, as follows:

Figure 3

Code Example

const spec = {
  type: 'sankey',
  data: [
    {
      values: [
        {
          nodes: [
            { nodeName: "Agricultural 'waste'" },
            { nodeName: 'Bio-conversion' },
            { nodeName: 'Liquid' },
            { nodeName: 'Losses' },
            { nodeName: 'Solid' },
            { nodeName: 'Gas' },
            { nodeName: 'Biofuel imports' },
            { nodeName: 'Biomass imports' },
            { nodeName: 'Coal imports' },
            { nodeName: 'Coal' },
            { nodeName: 'Coal reserves' },
            { nodeName: 'District heating' },
            { nodeName: 'Industry' },
            { nodeName: 'Heating and cooling - commercial' },
            { nodeName: 'Heating and cooling - homes' },
            { nodeName: 'Electricity grid' },
            { nodeName: 'Over generation / exports' },
            { nodeName: 'H2 conversion' },
            { nodeName: 'Road transport' },
            { nodeName: 'Agriculture' },
            { nodeName: 'Rail transport' },
            { nodeName: 'Lighting & appliances - commercial' },
            { nodeName: 'Lighting & appliances - homes' },
            { nodeName: 'Gas imports' },
            { nodeName: 'Ngas' },
            { nodeName: 'Gas reserves' },
            { nodeName: 'Thermal generation' },
            { nodeName: 'Geothermal' },
            { nodeName: 'H2' },
            { nodeName: 'Hydro' },
            { nodeName: 'International shipping' },
            { nodeName: 'Domestic aviation' },
            { nodeName: 'International aviation' },
            { nodeName: 'National navigation' },
            { nodeName: 'Marine algae' },
            { nodeName: 'Nuclear' },
            { nodeName: 'Oil imports' },
            { nodeName: 'Oil' },
            { nodeName: 'Oil reserves' },
            { nodeName: 'Other waste' },
            { nodeName: 'Pumped heat' },
            { nodeName: 'Solar PV' },
            { nodeName: 'Solar Thermal' },
            { nodeName: 'Solar' },
            { nodeName: 'Tidal' },
            { nodeName: 'UK land based bioenergy' },
            { nodeName: 'Wave' },
            { nodeName: 'Wind' }
          ],
          links: [
            { source: 0, target: 1, value: 124.729 },
            { source: 1, target: 2, value: 0.597 },
            { source: 1, target: 3, value: 26.862 },
            { source: 1, target: 4, value: 280.322 },
            { source: 1, target: 5, value: 81.144 },
            { source: 6, target: 2, value: 35 },
            { source: 7, target: 4, value: 35 },
            { source: 8, target: 9, value: 11.606 },
            { source: 10, target: 9, value: 63.965 },
            { source: 9, target: 4, value: 75.571 },
            { source: 11, target: 12, value: 10.639 },
            { source: 11, target: 13, value: 22.505 },
            { source: 11, target: 14, value: 46.184 },
            { source: 15, target: 16, value: 104.453 },
            { source: 15, target: 14, value: 113.726 },
            { source: 15, target: 17, value: 27.14 },
            { source: 15, target: 12, value: 342.165 },
            { source: 15, target: 18, value: 37.797 },
            { source: 15, target: 19, value: 4.412 },
            { source: 15, target: 13, value: 40.858 },
            { source: 15, target: 3, value: 56.691 },
            { source: 15, target: 20, value: 7.863 },
            { source: 15, target: 21, value: 90.008 },
            { source: 15, target: 22, value: 93.494 },
            { source: 23, target: 24, value: 40.719 },
            { source: 25, target: 24, value: 82.233 },
            { source: 5, target: 13, value: 0.129 },
            { source: 5, target: 3, value: 1.401 },
            { source: 5, target: 26, value: 151.891 },
            { source: 5, target: 19, value: 2.096 },
            { source: 5, target: 12, value: 48.58 },
            { source: 27, target: 15, value: 7.013 },
            { source: 17, target: 28, value: 20.897 },
            { source: 17, target: 3, value: 6.242 },
            { source: 28, target: 18, value: 20.897 },
            { source: 29, target: 15, value: 6.995 },
            { source: 2, target: 12, value: 121.066 },
            { source: 2, target: 30, value: 128.69 },
            { source: 2, target: 18, value: 135.835 },
            { source: 2, target: 31, value: 14.458 },
            { source: 2, target: 32, value: 206.267 },
            { source: 2, target: 19, value: 3.64 },
            { source: 2, target: 33, value: 33.218 },
            { source: 2, target: 20, value: 4.413 },
            { source: 34, target: 1, value: 4.375 },
            { source: 24, target: 5, value: 122.952 },
            { source: 35, target: 26, value: 839.978 },
            { source: 36, target: 37, value: 504.287 },
            { source: 38, target: 37, value: 107.703 },
            { source: 37, target: 2, value: 611.99 },
            { source: 39, target: 4, value: 56.587 },
            { source: 39, target: 1, value: 77.81 },
            { source: 40, target: 14, value: 193.026 },
            { source: 40, target: 13, value: 70.672 },
            { source: 41, target: 15, value: 59.901 },
            { source: 42, target: 14, value: 19.263 },
            { source: 43, target: 42, value: 19.263 },
            { source: 43, target: 41, value: 59.901 },
            { source: 4, target: 19, value: 0.882 },
            { source: 4, target: 26, value: 400.12 },
            { source: 4, target: 12, value: 46.477 },
            { source: 26, target: 15, value: 525.531 },
            { source: 26, target: 3, value: 787.129 },
            { source: 26, target: 11, value: 79.329 },
            { source: 44, target: 15, value: 9.452 },
            { source: 45, target: 1, value: 182.01 },
            { source: 46, target: 15, value: 19.013 },
            { source: 47, target: 15, value: 289.366 }
          ]
        }
      ]
    }
  ],
  categoryField: 'nodeName',
  valueField: 'value',
  sourceField: 'source',
  targetField: 'target',

  nodeAlign: 'justify',
  nodeGap: 8,
  nodeWidth: 10,
  minNodeHeight: 4,

  title: {
    text: 'How energy is converted or transmitted before being consumed or lost',
    subtext: 'Data: Department of Energy & Climate Change via Tom Counsell',
    subtextStyle: {
      fontSize: 12
    }
  },

  label: {
    visible: true,
    style: {
      fontSize: 10
    }
  },

  node: {
    state: {
      hover: {
        stroke: '#333333'
      },
      selected: {
        fillOpacity: 1
      },
      blur: {
        fillOpacity: 0.1
      }
    }
  },
  link: {
    state: {
      hover: {
        fillOpacity: 1
      },
      selected: {
        fillOpacity: 1
      },
      blur: {
        fillOpacity: 0.1
      }
    }
  },

  emphasis: {
    enable: true,
    effect: 'adjacency'
  }
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

Results

Online effect reference: https://visactor.io/vchart/demo/sankey-chart/nameKey-sankey

Related Documents

...

✅ How to configure the highlight effect of Sankey diagram


📈 87.42 Punkte

✅ ⚖️ Sankey Diagram : how much do you juggle with BUILD & RUN (GitHub issues API) 🎫


📈 51.01 Punkte

✅ How to Visualize Monthly Expenses in a Comprehensive Way: Develop a Sankey Diagram in R


📈 51.01 Punkte

✅ Energieflusspfeile (Sankey Diagramm) in Excel erstellen


📈 31.22 Punkte

✅ Highlight Your Terminal: a tools design to highlight information on output of terminal


📈 25.49 Punkte

✅ Mass Effect: Andromeda: Das Rollenspiel-Highlight des Frühjahrs?


📈 23.5 Punkte

✅ Mass Effect Legendary Edition revitalizes Mass Effect 1 with love and care


📈 21.51 Punkte

✅ Mass Effect 5: Erste Mass Effect-Details am Dienstag?


📈 21.51 Punkte

✅ Mass Effect 3 and Mass Effect: Andromeda have arrived on Steam


📈 21.51 Punkte

✅ Medium CVE-2020-7624: Effect project Effect


📈 21.51 Punkte

✅ Mass Effect 2 und Mass Effect 3 - Kurios: EA verkauft endlich alle DLCs in Paketen


📈 21.51 Punkte

✅ Mass Effect Andromeda: „Mass Effect: Andromeda“: So gut ist das neue ...


📈 21.51 Punkte

✅ Mass Effect - Fühlt sich Andromeda noch wie Mass Effect an?


📈 21.51 Punkte

✅ How To Create a Wiring Diagram for Free


📈 19.79 Punkte

✅ 9 Best Network Diagram Mapping and Topology Software


📈 19.79 Punkte

✅ Linux Storage Stack Diagram


📈 19.79 Punkte

✅ How to draw a combination diagram with React


📈 19.79 Punkte

✅ Generating Rails Entity-Relationship Diagram


📈 19.79 Punkte

✅ Interesting diagram about relationships between popular Linux tools used in Windows (MinGW, MSYS)


📈 19.79 Punkte

✅ Visualize and explain byte sequences with byte-diagram


📈 19.79 Punkte

✅ Text-to-diagram generator?


📈 19.79 Punkte

✅ Create Architecture Diagram as Code for a 2-Tier Bookstore Application


📈 19.79 Punkte

✅ Diagram Author 2.1.6 - Creation of any kind of charts, graphs and diagrams.


📈 19.79 Punkte

✅ How to Group Nodes and Connectors in the Vue Diagram Component


📈 19.79 Punkte

✅ Visualization in Teams: Use Miro to streamline workflows diagram complex ideas and | OD510


📈 19.79 Punkte

✅ Introducing the Multi-Chord Diagram: Visualizing Complex Set Relationships


📈 19.79 Punkte

✅ Use ChatGPT to create a programming language relationship diagram


📈 19.79 Punkte

✅ How to make a great fishbone diagram


📈 19.79 Punkte

✅ Diagram AI: Elevate Your Visuals with The Power of AI 🌟📊


📈 19.79 Punkte

✅ I made a simple diagram on history of OS, feel free to comment


📈 19.79 Punkte

✅ Causal Diagram: Confronting the Achilles’ Heel in Observational Data


📈 19.79 Punkte











matomo

Datei nicht gefunden!