Murithi

@Murithi·5 public vizzes

fresh block

A minimal SVG scene displays a monospaced text prompt in the browser. The page uses D3 v4 to append a fixed-size 960 by 500 SVG canvas to the body, then adds a single text element with a hardcoded message, position, and font size. The example demonstrates basic D3 selection and SVG element creation without data binding or interaction, serving as a starter template for further editing.

Jul 11, 2018

Loading thumbnail…

Angular 2 Intro

This example visualizes the conceptual architecture of Angular 2, breaking down its core building blocks—components, services, routers, and directives—into an interactive diagram. The renderer uses D3.js to lay out and animate the relationships between these elements, with text labels explaining each concept’s role, such as how components encapsulate templates and data, while services handle HTTP calls and non-UI logic. Data is drawn from the included Angular overview text, structured as nodes and edges. The visualization relies on D3’s force simulation for positioning and SVG for drawing the connecting paths.

Mar 31, 2017

Loading thumbnail…

Classes

This example shows how JavaScript classes can be constructed using three different patterns: functional, prototypal, and pseudoclassical. It uses plain JavaScript functions, the `Object.create` API, and the `new` keyword to demonstrate object creation and method delegation through the `Car.prototype` object. The code defines a `Car` class with a `move` method that increments a `loc` property, illustrating how each pattern achieves the same behavior with varying levels of syntactic convenience.

Mar 24, 2017

Loading thumbnail…

Prototype Chains

Prototype Chains demonstrates JavaScript’s prototype-based inheritance through a series of code excerpts. It shows property lookup behavior, including failed lookups returning `undefined`, and contrasts one-time copying with `extend()` against ongoing delegation using `Object.create()`. The example illustrates how a linked object (rose) delegates missing property lookups to its prototype (gold), while copied objects (blue) do not reflect later additions. It also introduces the object prototype, the top-level fallback providing shared methods like `toString` for all objects.

Mar 23, 2017

Loading thumbnail…

this

This example explains the JavaScript parameter `this`, contrasting it with ordinary function parameters. It shows how binding is determined by calling context, such as a method call with an object left of the dot. The code demonstrates the five binding rules, including implicit binding through dots, explicit binding via `fn.call(r,g,b)`, and behavior in callbacks like `setTimeout()`. It clarifies how passing a method like `r.method` to a callback still binds `this` to the global object, requiring a wrapper function to preserve the intended object, and how the `new` keyword creates a fresh object for `this`.

Mar 22, 2017