IF4IT Sample Charts Web Page

IF4IT Sample Charts Web Page

This example renders an animated force-directed network graph of enterprise architecture nodes, including organizations, capabilities, applications, and people, with labeled links representing predicates like "Predicate 2." Built with D3.js, it uses `d3.forceSimulation` to position nodes by size and type, applying categorical color scales. Node and link data are embedded in the HTML source, and clicking a node navigates to external documentation pages.

93% match

IF4IT Sample Charts Web Page

This page presents a set of interactive sample charts and diagrams built with D3.js, combining HTML layout constructs with SVG graphics. It demonstrates linked highlighting between chart elements and text labels: hovering over a chevron polygon or its associated text box changes the fill colors of both, using mouse event handlers that map element IDs. The visualizations include a Software Development Life Cycle (SDLC) flow diagram rendered as chevron-shaped polygons with captions. The code relies on D3 selections, CSS-style attribute manipulation, and custom event functions, with animations and color transitions triggered by user interaction.

79% match

Organization Force Chart

An interactive force-directed network represents an organizational structure, grouping member organizations under four main entities. The visualization uses color-coded clusters to distinguish each parent group and its children, with small blank nodes creating visual spacing. Nodes and links are rendered as SVG circles and lines, positioned by a d3.forceSimulation with forceManyBody, forceLink, and forceCenter. The code uses d3.drag to let users move nodes, and the simulation updates positions on each tick. The data is defined in a JavaScript module with the organization hierarchy.

KKai Stewart

77% match

Organization Graph Diagram part 4

This example visualizes a network of organizations and their sub-entities using a force-directed graph rendered in SVG. It shows numerous small leaf nodes clustered around child nodes, which connect to larger main nodes such as "Arts Web" and "Social Impact Commons", with links between main nodes indicating relationships. The code uses D3’s `forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to compute positions, while circles and lines are drawn with SVG elements. Node sizes and link distances vary based on data constants, creating a hierarchical, tree-like structure.

Ee-ines

76% match

IF4IT Sample Charts Web Page

This page presents a radial hub-and-spoke network diagram with a single focal node connected to 24 surrounding nodes. The visualization uses D3.js version 2.4.5 to draw the graph, while HTML layout constructs surround it. The page sets its height and width to 1400 pixels using `d3.select(self.frameElement)`. The data includes node identifiers, names, data types, relationship names, and hyperlinks to www.if4it.com resources. The code defines a `drawRadialHubAndSpoke` function that accepts parameters for drawing configuration, though the complete rendering logic is not shown.

IF4IT Sample Charts Web Page

This interactive web page demonstrates how D3.js version 2.4.5 can blend SVG charts with standard HTML layout controls. It displays a mixed dataset of systems categorized by severity, ownership, and business domain, rendered as an ordinal scatter plot with drop-down menus that swap the X and Y axes. The code uses `d3.scale.ordinal()` and `d3.svg.axis()` to build the coordinate system, while a redrawing function toggles line colors on each axis swap.

Organization Graph Diagram

This example visualizes an organizational network as a force-directed graph, with four colored main nodes connected by links to smaller child and leaf nodes. The simulation, powered by d3.forceSimulation with forceManyBody, forceLink, and forceCenter, positions circles and text elements rendered as SVG. Node size and color distinguish hierarchy levels, with data sourced from JavaScript arrays defining nodes and links.

CCurran Kelleher

IF4IT Sample Charts Web Page

The page shows three separate pie charts arranged within an HTML layout, each visualizing a distinct dataset of categorical magnitudes with legend labels and hyperlinks. It demonstrates how D3.js pie and arc layouts integrate with custom color scales and margin-based positioning. The code explicitly uses the D3.js library (version 2.4.5) to construct interactive slices, with each slice supporting a clickable link to external resources. Animation is achieved through D3’s transition capabilities, while the page’s metadata highlights that the rendering is animated, suggesting the arcs are drawn or updated with motion. The underlying data is hardcoded as JavaScript arrays of objects.