Fereidoun Mianji

@ferilab·7 public vizzes

Chart Editor

This example is an interactive organization chart editor. Users can select, edit, and add nodes, with a detail inspector for editing properties and a tree layout for hierarchical relationships. It uses GoJS for diagram editing and tree layout, and D3 v7 for additional data handling. Node colors shift by tree depth level, and the editor supports undo/redo.

Jul 18, 2021

Loading thumbnail…

Interactive Directed Layout

This example demonstrates an interactive directed layout where users can push and pull nodes within a continuously updating force-directed graph. Selected nodes remain fixed while other nodes are automatically repositioned through a custom `ContinuousForceDirectedLayout` that extends GoJS’s `ForceDirectedLayout`, reusing the layout network for performance. The visualization uses GoJS for diagram rendering and D3.js v7 for utility functions, with node dragging triggering layout invalidations to animate the graph in real time.

Jul 18, 2021

Loading thumbnail…

Collapsible Tree

This interactive visualization displays a collapsible hierarchical tree of the Flare software package’s class structure. Users click nodes to expand or collapse branches, with smooth transitions animating the tree’s layout changes. The visualization uses d3.hierarchy and d3.tree to compute node positions, d3.linkHorizontal for curved links, and d3.zoom for panning and scaling. Data comes from flare-2.json, rendered as SVG elements with circles and labels, updating via enter, update, and exit selections with d3.transition.

Jul 18, 2021

Loading thumbnail…

Edge labeling

This example demonstrates edge labeling in a network visualization built with D3 v6, showing nodes connected by curved vertical paths with labels that orient along link direction. The code defines a network of server and device nodes with fixed coordinates, rendered as SVG elements using custom icon glyphs from Font Awesome. Links are drawn with `d3.linkVertical()` paths and labeled dynamically based on connection type, with forces applied via `forceStrength` and `linkStrength` constants to adjust layout. The visualization includes tooltips on hover and highlights forward versus reverse traffic flow between nodes.

Jul 17, 2021

Loading thumbnail…

Fork of POI Category Tree

This visualization displays the ArcGIS Supported Category Values as a horizontal tree layout, grouping points of interest into broad categories like Food, Education, and Shops and Service. Each category branches into its individual leaf nodes, with text size and position encoding hierarchy depth. The code uses d3.csv to load the data, d3.tree and d3.hierarchy for layout, and d3.linkHorizontal for edge paths, all rendered as SVG within a zoomable group that leverages d3.zoom.

Jul 17, 2021

Loading thumbnail…

Fork of Radial Tree of Countries Hierarchy

This radial tree visualization displays the hierarchical structure of world countries organized by continent and subregion. The visualization uses a circular layout with connecting bezier curves, where text labels are rotated and positioned according to their depth in the hierarchy. The code implements interactive panning and zooming through `d3.zoom`, while the tree layout is computed using `d3.cluster`. Text sizing scales with depth using `d3.scaleSqrt`, and the SVG rendering includes a glow effect on labels for improved readability.

Jul 16, 2021

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes, including circles, rectangles, lines, and paths, can be styled and grouped using CSS classes and inline attributes. The rendering relies on raw SVG elements within an HTML document, with a separate stylesheet defining stroke properties for path elements. A scaling transformation enlarges the entire drawing, while translation groups reposition shape clusters. The code uses no JavaScript libraries, relying purely on SVG markup and CSS for styling, showing basic geometric primitives with varying fill colors and stroke configurations.

Jul 14, 2021