Sublime Text Packages

100%

Sublime Text Packages

✓ Published0🌍 Public

Last edited Mar 11, 2016

Created on Dec 27, 2012

This example visualizes the 24 Sublime Text packages listed in the included text file, arranged as a force-directed graph. Each package name appears as a node with its description on hover, and the layout uses `d3.forceSimulation` with `d3.forceLink` to position nodes and edges based on the provided data. The visualization is rendered dynamically on a canvas, with node colors and text drawn in a dark theme to match the packages’ utility. It offers a quick overview of the ecosystem from the GitHub gist by P7h.

AI-generated description

Similar vizzes

Loading thumbnail…

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

72% match

Loading thumbnail…

Gist 5a230baa1dc731fde7251b37d84d1866

This example visualizes the extension packages and sync settings from a Visual Studio Code configuration, using a force-directed layout to position each extension as a node within a cluster. The graph is rendered with Three.js and uses d3.forceSimulation to simulate physics for realistic node interactions and clustering. The data is sourced from a JSON array of extensions, including metadata such as publisher, name, and version, and is paired with a settings file that includes a custom sync Gist ID. The visualization highlights the relationships and dependencies among these development tools.

LLeonardonline

69% match

Loading thumbnail…

Gist bf027117c9b0bdfb633414ab5bd84877

This example visualizes a network of file and folder connections from a Gist repository, using a force-directed graph layout to reveal clustering and link patterns. The code employs D3.js’s `d3.forceSimulation` with `forceLink` and `forceManyBody` to position nodes, while SVG paths and circles render the edges and vertices. A drop-down menu lets users filter the displayed links by type, and the visualization includes a legend and hover tooltips. The underlying data is hardcoded as a JavaScript array of node and link objects, reflecting the structure of a GitHub Gist.

MMistyBlunch

69% match

Loading thumbnail…

Gist db32a113f546aa03b43c0e1f84f80d28

The visualization shows a force-directed network graph of GitHub gist data, with nodes representing individual gists and links showing relationships between them. It uses d3.forceSimulation to compute the layout, with node size encoding gist size and color indicating file type or language. The rendering relies on SVG elements updated per tick via the simulation’s tick event. The code loads a static JSON file containing preprocessed gist metadata, and does not use canvas or WebGL. The visualization highlights clustering patterns among related gists, revealing emergent communities in the dataset.

335degrees

68% match

Loading thumbnail…

Gist f867f21cc0dbe672f0d10ab163876c38

This example shows a force-directed network visualization built with D3.js, rendering connections between GitHub repository nodes. It uses d3.forceSimulation with charge, link, and center forces to position the nodes, while links are drawn as SVG paths. The visualization reads repository and relationship data from a gist, with each node colored and labeled based on its source repository. Hovering highlights connected links and neighbor nodes, with a zoom and pan interface via d3.zoom for exploring the graph.

MMistyBlunch

68% match

Loading thumbnail…

Sublime Text 2 - Useful Shortcuts

This example visualizes keyboard shortcuts for Sublime Text 2 on Mac OS X, grouped by category such as editing, XML/HTML, and bookmarks. It uses D3.js to render the shortcut keys and their associated actions in a compact, searchable layout. The data is presented directly from the gist’s Textile markup, parsed into a hierarchical structure. The visualization employs D3’s `d3.hierarchicalLayout` to organize categories and a custom `d3.forceSimulation` for interactive exploration, allowing users to filter shortcuts by pressing keys.

AAliceWi

67% match

Loading thumbnail…

Gist 0bb5514393bdd878235e51ed2fdd3724

This example visualizes the relationships between file names and their associated directory paths using a force-directed graph layout. The code employs `d3.forceSimulation` to position nodes and `d3.forceLink` to draw connecting edges, with each node rendered as a colored circle. The graph is built from a parsed file tree structure, likely derived from object keys or an array of paths, and uses `d3.select` for DOM manipulation. Labels are attached to nodes via SVG text elements, while the simulation updates positions on each tick. The rendering relies on an SVG container, with node colors distinguishing file types from directory paths.

RRainboylvx

67% match

Loading thumbnail…

Gist 466252

This example is a data-art composition built from a personal list of recommended web design and programming books, rendered as an interactive force-directed graph. It visualizes the relationships between books, their authors, and their associated topics (like usability, web standards, JavaScript, Ruby, and Rails) using `d3.forceSimulation` for physics-based layout and dynamic node positioning. Each book title, URL, and annotation from the original text is embedded as textual nodes and links, with the graph’s structure and labels derived directly from the source gist’s content. The rendering approach uses SVG elements updated via D3’s data join, and while no explicit additional libraries are mentioned, the code relies on standard D3 v4+ APIs for simulation, drag behavior, and tick updates to show the clustered, interlinked reading list.

DDylanFM

66% match