Skip to main content
SimilarExport ZIP
100%

System Operator Transmission Owner Codes

✓ Published0🌍 Public
FFraserMacMillanGithub
Last edited Mar 21, 2018
Created on Feb 28, 2018

This interactive visualization maps the structure of National Grid’s System Operator Transmission Owner (STC) codes using an animated hierarchy. Each top-level procedure (e.g., Operational Switching, Alarm and Event Management) expands into child nodes with values and links to official PDF documents. Rendered as an SVG with a collapsible tree layout, the graphic uses color-coded nodes and tooltips to support navigation. A searchable interface highlights relevant procedures, making it easy to explore how operational standards are organized and connected.

AI-generated description
mit Licensed

Similar vizzes

Loading thumbnail…

practice tree

This visualization displays the hierarchical structure of energy infrastructure distribution, showing power plants, substations, and distribution centers as a branching tree. The code uses d3.tree() to compute node positions and renders curved links as SVG paths with color-coded strokes based on each node’s level. Circles represent nodes with radii scaled by each entry’s value, while leaf labels include capacity numbers. The example creates an SVG with a light blue background, using D3 v7 to append nodes and text with custom styling defined in the accompanying CSS.

Ppilliprathimarani@my.unt.edu
63% match
Loading thumbnail…

Operation Tree

This example shows a collapsible operation tree for electric vehicle modes, with color-coded nodes distinguishing normal and fault operation modes alongside their sub-modes. Users can click nodes to expand or collapse child branches, triggering animated transitions as nodes reposition. Built with D3 v5, the visualization uses `d3.tree` and `d3.hierarchy` for layout and `d3.linkHorizontal` for curved links, while `d3.zoom` enables panning and zooming. Nodes are rendered as SVG rectangles with labels, and data comes from a static JavaScript object defining the hierarchical structure.

Vvenkatajayanth03
62% match
Loading thumbnail…

RC 007 Fork of Network

This force-directed graph maps the U.S. electrical grid, showing three interconnections, six generation types, and five independent system operators linked by transfer capacity. Nodes are positioned using physics-based simulation, while link thickness encodes capacity in gigawatts and node color distinguishes type. The network is built with D3.js v7, using the `d3.forceSimulation` API on an SVG canvas, and supports interactive node dragging for exploration. Metadata indicates the layout derives from a v3 source file, with styling applied via CSS for node strokes and label typography.

Rrichardcorreia@my.unt.edu
62% match
Loading thumbnail…

Tree 11719939

This interactive tree visualizes EV charging stations grouped hierarchically by charger type, station operator, city, and station ID from a CSV data source. Users can click nodes to expand or collapse branches at each level. The D3 v7 implementation builds the hierarchy with `d3.group`, lays it out with `d3.tree`, and animates node movements and curved link transitions using `transition().duration()`. Colors differentiate depth levels, and zooming is enabled via the `d3.zoom()` API.

AArram Anila
60% match
Loading thumbnail…

World Countries Tree

This interactive tree diagram visualizes a company’s operational structure, from corporate headquarters down to individual mines, refineries, and conversion facilities. It shows the hierarchical relationships between parent entities and their subsidiaries across various locations. The visualization uses D3.js v5 APIs, including `d3.hierarchy` and `d3.tree` to layout the pedigree, and `d3.linkHorizontal` to draw the connecting edges. The SVG is rendered with zoom functionality enabled. Text nodes are styled with the Playfair Display font.

MMorgan Mueller
60% match
Loading thumbnail…

Tree ICE - 8

This interactive organizational chart displays a company’s hierarchical leadership structure as an animated tree diagram. The visualization, built with the D3.js library, uses custom SVG elements for nodes and links, featuring styled circles and italicized text labels. The tree expands vertically, with each level of management positioned at a fixed depth. Animated transitions, configured with a 750-millisecond duration, move nodes and links smoothly when the diagram updates. The page’s stylesheet sets a sky-blue background, while the node and link styling uses specific colors and stroke widths, all defined in the embedded CSS.

Aakshitha.rapala@gmail.com
60% match
Loading thumbnail…

Untitled

This interactive tree diagram visualizes the hierarchical structure of the flare codebase, with each node representing a class or category and its size indicating relative importance. Users can expand and collapse branches, zoom and pan the view, and rearrange nodes by dragging them to new positions within the hierarchy. The visualization is built with D3.js version 3, using the tree layout, SVG rendering, and a custom drag-and-drop implementation that temporarily removes and reattaches nodes. Data comes from the bundled flare.json file, and the interface supports smooth animated transitions between states.

AAndrew Helgeland
60% match
Loading thumbnail…

Fork of Fork of Fork of 11702358-ice 8 -Network

This visualization shows a static tree diagram categorizing car types by transmission (Automatic, Manual, Semi-Automatic) and number of doors. The code uses d3.hierarchy and d3.tree to compute node positions, then renders SVG paths with d3.linkHorizontal for connections and circles with labels for each node. A hardcoded data object supplies the hierarchy, despite an unused d3.csv call referencing an external car price dataset. Styling is minimal, with steelblue node circles and gray links on a white background.

NNaveen Kumar Kolla
59% match