disc - :chart_with_upwards_trend: Visualise the module tree of browserify project bundles and track down bloat

•    Javascript

Disc is a tool for analyzing the module tree of browserify project bundles. It's especially handy for catching large and/or duplicate modules which might be either bloating up your bundle or slowing down the build process.The demo included on disc's github page is the end result of running the tool on browserify's own code base.

sheetsee.js - :eyes: :chart_with_upwards_trend: Visualize Data from a Google Spreadsheet

•    Javascript

This repository is for the project website and provides a compiled version sheetsee.js. Use the compiled version if you want all of what is available in Sheetsee. If you want just the parts that you're going to use in your project and nothing more, you can build a custom version. Each part of Sheetsee has its own repository and issues should be opened there. General issues/pull requests for the site are OK here.

plato - JavaScript source code visualization, static analysis, and complexity tool

•    Javascript

plato was updated to support es6 by @devcrust, but needs an active maintainer to keep it moving forward. Visualize JavaScript source complexity with plato.

react-lifecycle-visualizer - Real-time visualizer for React lifecycle methods

•    Javascript

An npm package (react-lifecycle-visualizer) for tracing & visualizing lifecycle methods of arbitrary React components. To trace a component, apply the higher-order component traceLifecycle to it, and all its lifecycle-method calls will show up in a replayable log component. Additionally, traced components may include a <this.props.LifecyclePanel/> element in their rendering to show a panel with lifecycle methods, which are highlighted when the corresponding log entry is selected.

RxJs Marbles- Interactive diagrams of Rx Observables

•    Javascript

A webapp for experimenting with diagrams of Rx Observables, for learning purposes. This is a Cycle.js app. It helps to visualize example diagrams for each operator in Rx. Drag an item ("marble") on an Observable to see how the operator reacts.

dependo - Visualize your CommonJS or AMD module dependencies in a force directed graph report.

•    HTML

Visualize your CommonJS, AMD, or ES6 module dependencies in a force directed graph report - powered by D3.js. Let me introduce dependo - A small visualization tool that draws an force directed graph of JavaScript dependencies pulled from a codebase of CommonJS, AMD, or ES6. Behind the scene I’m using a wonderful library named node-madge, to extract the dependencies and combined with the power of D3.js I draw a beautiful zoomable directed graph.

jQuery.PrettyTextDiff - A wrapper around Google's diff_match_patch library, to make life easy

•    CoffeeScript

A wrapper around Google's diff_match_patch library. Google's library is awesome and can be fine-tuned in multiple ways, but their API is a bit awkward, probably cause they support the same API in 8 different languages. Also, the library does not provide any beautification of the diff-ed output. They provide a reference implementation (look for diff_prettyHtml in the API docs ) but recommend developers to write their own - and the given method is not customizable .

neutrino-preset-visualizer - Webpack visualizer as a Neutrino preset

•    Javascript

Webpack visualizer as a Neutrino preset to view where space is allocated. Outputs ./build/stats.html.

tap-dev-tool - prettifies TAP in the browser's console

•    Javascript

Prettify TAP output in Chrome/FireFox DevTools console. Works best with tape.Comes in the form of a Browserify plugin, so you don't need to change your source code during development. PRs for other integrations (Babel, Webpack) welcome.

grunt-dependencygraph - Visualize your CommonJS or AMD module dependencies.

•    Javascript

Grunt-dependencygraph has been replaced by dependo - a more modular version, that's wrapped up as a NPM-package with both an API, CLI and Grunt task.

grunt-dependo - Running dependo from within a grunt task.

•    Javascript

Visualize your CommonJS or AMD module dependencies in a force directed graph using D3.js.

sqleton - Visualizes your SQLite database schema

•    Javascript

Visualizes your SQLite database schema. The format will be inferred from the name of the output file; you can use any format supported by graphviz (png, pdf, svg, and many more).

js-vd - JavaScript source code dependency visualization

•    Javascript

Type vd --help or view the source for the many options like --exclude and --dot.

vscode-whiteviz - An extension for whitespace visualization

•    TypeScript

WhiteViz is simply an extension that visualize the whitespace upon selection. Explicitly made for this issue for the Visual Studio Code.

kanban-cfd - Kanban CFD Visualization App

•    Javascript

The graph is by designed to allow showing data grouping by different owner in different tab. The intention is to allow each owner to compare their graph to the overall or other owners' statistics to see where they can see the problem from. I think this encourage each owner to see same graph with different insight. Below are some sample screens to illustrate its functionalities.

pods-visualize - Pods Visualize lets you visualize the relationship connections between your pods configs

•    PHP

Pods Visualize lets you visualize the relationship connections between your pods configs

jmh-visualizer - Visually explore your JMH Benchmarks

•    Javascript

While this app will visualize any valid JMH JSON you throw at it, you can write your benchmarks in a way that make the visualization much more enjoyable...

source-map-visualize - Quickly open an online source map visualization with local files

•    Javascript

Quickly open an online source map visualization with local files

electrode-electrify - Electrify is an webpack visualizer for analyzing webpack bundles.

•    Javascript

Electrify is an webpack visualizer tool for visualizing and analyzing Webpack bundles, it is a UI tool based on D3.js for visualizing the module tree of electrode + webpack project bundles. It's especially handy for catching large and/or duplicate modules which might be either bloating up your bundle or slowing down the build process. Checkout a live working DEMO.

tasty-commits - :lollipop: Simple commit message convention for easily digestible history streams

As a visual person, I find it difficult to read through large commit history logs in binary color schemes (i.e. black / white). In order to improve readability and understandability of my commit history I started prefixing my messages with emojis in a consistent manner.