Skip to main content
SimilarExport ZIP
100%

Lets Make The CNN Archive Great Again: Unmangled Mins

✓ Published0🌍 Public
NN0taN3rd
Last edited Jan 17, 2017
Created on Jan 17, 2017

This animated visualization compares two versions of CNN’s minified JavaScript files—one from 2016 and one from 2017—by tracking the global variables and property chains each file assigns, such as `CNN.Analytics` and `CNN.contentModel`. The data comes from a gist that parses unmangled code into structured objects mapping each property to its right-hand-side value. Rendering as an animation, it highlights how the codebase’s global footprint changes over time, using the file’s own JavaScript structure as the input rather than external libraries.

AI-generated description

Similar vizzes

Loading thumbnail…

test

This example shows a CNN homepage as captured by the Wayback Machine, with multiple interactive zones and containers that lazy-load content. The code defines a configuration object for CNN.Zones, listing twenty-seven zones and seven containers, and sets thresholds for sibling navigation and byline images. It uses JavaScript object literals and conditional error handling to manage webpack assets, but does not invoke any visualization libraries or render data directly. The page remains static in the provided body HTML.

NN0taN3rd
60% match
Loading thumbnail…

In Archive, Alexa, Twitter Sample

This visualization presents a comparative analysis of the DOM and network complexity of seven popular websites, based on JSON snapshots captured by a web crawler. Each site is represented as a distinct point, with its position determined by aggregated metrics such as total node count, the number of clickable elements, and the diversity of resource types loaded. The tool, built with React, ingests these raw JSON files and uses a custom layout algorithm to project the multi-dimensional data onto a two-dimensional plane. Hovering over a point reveals a detailed breakdown of a site's specific DOM attributes, framework detection results, and the distribution of network requests by MIME type.

NN0taN3rd
59% match
Loading thumbnail…

text diff

This animation demonstrates text differences between two versions of code. The visualization displays the diff algorithm's output as colored text: red for removed characters and green for added ones. Using an animated transition, it compares the original JavaScript files character-by-character, highlighting insertions and deletions in a side-by-side or inline view. The animation smoothly morphs between the old and new text states, making it easy to spot exactly what changed in the code.

11wheel
58% match
Loading thumbnail…

Gist 3745f53a79313afd139b4eb0a4e97bd2

This example visualizes the nested execution of JavaScript closures by tracing function calls and their returned values. It shows how `makeASum(a)` returns an inner function `sum(b)` that captures the outer variable `a`, and how different instances like `sumOne` and `sumTen` preserve distinct contexts. The rendering uses a custom SVG-based trace, likely driven by D3’s `d3.forceSimulation` for layout and `d3.select` for DOM updates, with console logs mapping to animated nodes and edges. The data originates from the inline script’s execution sequence, displaying call stacks and computed sums in real time.

MMistyBlunch
57% match
Loading thumbnail…

View CNN.com by iframe

This example demonstrates a historical snapshot of CNN.com’s homepage replayed inside a web iframe, using the pywb web-archiving framework. The visualization shows how the original page’s JavaScript-driven content, including lazy-loaded zones and carousels, is reconstructed from archived assets. The code references CNN’s custom inline scripts—such as `CNN.Zones`, `CNN.contentModel`, and `pageReveal`—alongside the iframe’s `seamless` attribute. The pywb replay uses `wb.js`, `wb_frame.js`, and `default_banner.js` to embed the captured page, with the source being a captured timestamp from the archive.

NN0taN3rd
56% match
Loading thumbnail…

Prettified 1.8.2 version of underscore-min.js vs string from comment

Two prettified JavaScript files from the underscore.js library version 1.8.2 are compared side by side, showing the minified source after formatting. The visualization highlights how a minified file and a string extracted from a comment share nearly identical code, differing only in whitespace and line breaks. The example uses text-based comparison of the functions `each`, `map`, and `reduce`, with the rendering likely relying on standard DOM or SVG elements to display the code lines. No additional APIs beyond the JavaScript source are referenced.

JJoelBCarter
55% match
Loading thumbnail…

Complete Node.js CheatSheet --> UPDATED VERSION --> https://github.com/LeCoupa/awesome-cheatsheets

This animated visualization presents a comprehensive Node.js cheat sheet, displaying code sections for global objects, console methods, timers, modules, and process APIs. The code scrolls through a JavaScript file that documents key functions and syntax examples, with the source pulled from a gist by Kirun1. The animation renders text sequentially, highlighting different API categories as the cheat sheet moves vertically, making the reference material visually engaging and easy to follow.

KKirun1
55% match
Loading thumbnail…

JS Bin

This example demonstrates JavaScript destructuring of objects through a side-by-side comparison of original source code and the compiled output. The `index.html` file contains two script blocks: the first shows transpiled ES5 code using `var` declarations and manual property access, while the second shows the original ES6 source with `const` and destructuring assignment. The code logs names from objects to the console, illustrating how ES6 destructuring patterns translate into traditional variable assignments. The visualization uses plain HTML and JavaScript with no external libraries.

AAlsaxian
55% match