Customized ConEmu [https://github.com/Maximus5/ConEmu] configuration as on 12th Dec, 2017.

Gist 22a08fcb15d37b014db02655b5f921ee

This example visualizes the structure of a `.gitconfig` file, showing how its nested sections, aliases, and settings are organized. It renders the configuration as an interactive tree diagram using D3.js, with each node representing a file section, key-value pair, or alias command. The code uses `d3.hierarchy` and `d3.tree` to compute the layout, and `d3.forceSimulation` is not employed—instead, the tree is positioned statically. Nodes are drawn with SVG circles and text, colored to group related categories, and the visualization is generated directly from the parsed `.gitconfig` data.

115Dkatz

63% match

My customized User Settings of Sublime Text.

This example visualizes the complete configuration of a Sublime Text user settings file as an interactive network diagram. The visualization maps each setting key and its associated value or nested array structure into nodes and links, using d3.forceSimulation for layout and d3.drag for user interaction. The data comes from a JSON gist authored by P7h, with the graph organized to reveal relationships between preferences like editor behavior, theme, and file patterns. The rendering approach uses SVG elements updated through D3’s data join to reflect the hierarchical nature of the settings.

PP7h

62% match

Collapsible Tree Example

This example shows a static tree diagram visualizing hierarchical data, with nodes and links styled using dynamic colors based on the data attributes. The visualization encodes numeric values as the radius of each node’s circle and uses distinct colors for node fill, stroke, and links. The code uses the D3.js layout in `d3.layout.tree` and the `d3.svg.diagonal` API to draw curved links. It loads data from an embedded JavaScript array and renders the graphic as an SVG, with the tree laid out horizontally from left to right.

61% match

Collapsible tree diagram in v5

This interactive collapsible tree diagram displays a hierarchical dataset with parent nodes that can be clicked to collapse or expand their child branches. The visualization uses d3.tree() to compute node positions, d3.hierarchy() to structure the data, and SVG paths drawn with a custom diagonal function for the linking curves. Nodes are rendered as circles with text labels, and transitions animate with 750-millisecond duration when the tree structure changes. The example derives from Mike Bostock's collapsible tree and uses d3.v5's selection, transition, and merge APIs for smooth interactive updates.

Collapsible tree diagram in v6

This interactive collapsible tree diagram displays hierarchical data with clickable parent nodes that expand and collapse their child branches. Built with D3 v6, it uses `d3.hierarchy` and `d3.tree` to compute node positions, with SVG circles and text labels rendering the structure. Clicking a node triggers a smooth 750ms transition that animates nodes and diagonal link paths to their new positions, while collapsed nodes are indicated by a lightsteelblue fill and pointer cursor. The example is derived from Mike Bostock’s original collapsible tree and demonstrates node enter, update, and exit patterns with animated transitions.

tree with embedded data

This tree diagram visualizes a hierarchical dataset with collapsible nodes, where each leaf is represented by a rectangle and internal nodes by circles. The visualization uses D3.js v3’s tree layout and SVG rendering, with smooth animated transitions when expanding or collapsing branches via the provided buttons. Data is embedded directly in the code, and the layout separates parent and child nodes to clarify depth.

EEE2dev

hierarchy-explorer demo

This demo cycles through eight configuration options for the hierarchy-explorer chart, automatically applying a new setting every three seconds. It shows how changes to link height, link strength, leaf alignment, and link width—including using a log scale mapped to the `size` property—visually alter the tree layout. The chart loads hierarchical data from a flare.json file and renders it as a D3 v5 visualization. The interface displays the current function call above the animated transitions, using the `hierarchyExplorer.chart` API.

EEE2dev

Collapsible Tree Example

This example shows a collapsible tree diagram with a horizontal orientation, displaying hierarchical data with parent and child nodes connected by curved links. The tree layout is computed using `d3.layout.tree`, and links are drawn as SVG paths using `d3.svg.diagonal` with a custom projection that swaps x and y coordinates to achieve the horizontal layout. Nodes are rendered as circles with text labels, and the code uses D3 version 3.5.17, loading the library from a CDN. The data is hardcoded as a JavaScript array with nested objects representing the tree structure.