Energie_UKPV

100%

✓ Published0🌍 Public

Last edited May 18, 2023

Created on May 18, 2023

This visualization shows the flow of energy from generation to various consumption categories like XRM, Prodc, and CRB, with a separate stream for grid feed-in. Using the D3.js library and a custom `d3.sankey` module, the diagram renders nodes and links as SVG elements, with node heights and link widths proportional to energy values from the accompanying JSON data. The interactive layout allows node dragging, while hover states increase link opacity to highlight specific flows.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sankey Diagram

This interactive Sankey diagram visualizes the flow of energy through the UK energy system. Nodes representing sources, conversion processes, and consumption sectors are connected by links whose thickness is proportional to energy value in terawatt-hours. Built with the d3-sankey-diagram library, the visualization uses a static layout and hover interactions to highlight paths. The underlying data, provided in a JSON file, defines the network structure, and the code relies on standard D3.js modules for rendering the diagram.

Mmbostock

77% match

Loading thumbnail…

Sankey Particles

This example visualizes the UK energy system as an interactive Sankey diagram, where animated particles travel along the links to represent energy flow between sources and consumers. Nodes can be dragged to reposition, which updates the link paths and particle trajectories. The visualization combines D3.js for the SVG-based Sankey layout and drag behavior with a Canvas overlay for rendering the moving particles. Particle frequency scales with link value, and each particle’s color interpolates from the source node’s color to the target node’s color. The code uses the sankey.layout and sankey.relayout functions to compute node positions and a d3.timer to drive the animation.

BBBischof

75% match

Loading thumbnail…

Sankey Particles

Animated Sankey diagram that visualizes the UK's 2012 energy balance—energy production, conversion, and consumption—as a flow of moving particles along curved paths. The interactive visualization combines a D3.js SVG layout of rectangular nodes and cubic Bézier links with an HTML5 Canvas overlay, where the flowing particles are drawn using Canvas arc methods. Particle frequency and size scale with each link’s energy value, while their color interpolates between the source and target node colors.

WWeiyiDeng

74% match

Loading thumbnail…

Fork of Sankey Particles_2

This visualization shows the UK energy flow Sankey diagram with animated particles traveling along each link to illustrate transfer dynamics. The code uses D3.js v3 with the custom `d3.sankey.js` layout, combining SVG for nodes and links with a Canvas overlay for particle rendering. Particles are generated based on link frequency, move along the SVG path geometry using `getPointAtLength`, and are drawn with the Canvas 2D API. The example demonstrates DOM manipulation through D3 drag behavior for interactive node repositioning.

Ggongxinya

71% match

Loading thumbnail…

US Energy Flow Data 2018

This example visualizes the flow of energy across the United States in 2018, tracing sources like petroleum, natural gas, and renewables through to end-use sectors such as residential, commercial, and transportation. It uses a Sankey diagram built with D3.js, where link widths represent energy quantities in quadrillion BTUs. The data comes from the Department of Energy, with nodes and links defined in CSV files and rendered using D3’s sankey plugin.

CCurran Kelleher

71% match

Loading thumbnail…

Some energy consumption data by type from the eia

This interactive scatter plot displays energy consumption data across U.S. states and regions, with a dropdown menu to switch between different fuel types and years from the EIA dataset. The visualization renders SVG circles whose vertical position reflects the selected consumption value while the horizontal axis shows the state or region. React handles the component state and dropdown interactions, while d3.v6 provides the scale functions (`scaleTime`, `scaleLinear`) and axis components. The underlying CSV data is loaded asynchronously via d3.csv, and each circle includes a native SVG `<title>` element for hover tooltips.

AAndre J Denais

70% match

Loading thumbnail…

SANKEY Experiment

This example presents a Sankey diagram visualizing greenhouse gas flows, with nodes representing sectors like Energy and Agriculture, and links showing the distribution of gases such as Carbon Dioxide and Methane. Built with React and rendered as SVG, it uses the D3.js library’s custom `d3.sankey` module to handle layout and the `d3.behavior.drag` functionality for node interactivity. The chart’s unit is "Widgets," and the data is pulled from a JSON file.

Mmynameiskris

70% match

Loading thumbnail…

UKPV

A Sankey diagram visualizes the early spread of a virus, using SVG paths to show the flow of transmission between countries. Node rectangles are colored by country, and link thickness encodes the relative number of cases transferred. The layout is computed with a custom `d3.sankey` module, which uses functions like `computeNodeDepths`, `relaxLeftToRight`, and `computeLinkDepths` to position nodes and routes. Links are drawn with cubic Bézier curves via the `link()` method, and nodes are draggable using `d3.drag()`.

Uulkrueger

70% match