VinodLouis

@VinodLouis·7 public vizzes

Key Metrics

Four key performance indicators are presented as a row of stat cards, each pairing a large colored number with a short explanatory label and a source citation. The code uses plain HTML and CSS with the Satoshi and Cabinet Grotesk fonts from Fontshare, a CSS grid layout, and custom properties for colors and spacing. Data shown includes innovation velocity, employee clarity, leadership style impact, and productivity loss figures sourced from Gallup and Createq.

May 25, 2026

Loading thumbnail…

Autonomy Mapping

Autonomy Mapping visualizes a comparison matrix of organizational practices, contrasting successful autonomy at Spotify, Amazon, and Basecamp against failures at Valve and flat-structure startups. The display pairs a Markdown table with a force-directed graph layout, using d3.forceSimulation to position dimension and example nodes. Each cell renders as a distinct cluster, with positive outcomes in green and negative in red, while text labels draw from the embedded gistfile1.md content. The visualization maps contextual alignment, ownership clarity, decision vectors, incident response, and newcomer impact across the two columns.

May 25, 2026

Loading thumbnail…

d3-nested-circle-pack-leaf-node-charts

This interactive circle packing visualization uses a hierarchical JSON dataset of product categories, subcategories, and brands, with leaf nodes representing daily sales values across a week. Built with D3 v4 and rendered in SVG, the chart extends the classic circle pack layout by nesting a small bar chart inside each leaf node to show the seven daily data points. Users can click to zoom between hierarchy levels, with nodes and labels smoothly animating to new positions. Hover effects highlight nodes, and the layout organizes products by category and brand, making weekly sales patterns visually comparable across the tree.

Jul 23, 2018

Loading thumbnail…

10x

A radial bullseye chart displays ten concentric priority levels across four quarterly quadrants, with each arc segment colored by its quadrant using an RGB blue scale. The visualization uses D3 v4’s `d3.arc` generator to compute SVG path geometries from angular and radial ranges. A draggable circle, positioned via `d3.drag`, moves over the arcs and highlights the segment beneath the pointer by changing its fill to red, demonstrating interactive hit-testing through DOM element lookup.

Jul 12, 2018

Loading thumbnail…

insertion sort in node

This visualization demonstrates an insertion sort algorithm sorting an array of thirteen numbers in ascending order. It uses JavaScript’s native array operations and a while loop to shift elements, showing the step-by-step reordering of the dataset. The code relies on standard JavaScript syntax rather than external libraries, logging the final sorted array to the console via `console.log`. The visualization captures the algorithm’s logic through the source code itself, illustrating the comparison and insertion mechanics without graphical rendering.

Jul 13, 2017

Loading thumbnail…

selection sort in node

A selection sort algorithm animates through an array of 13 numbers, visually swapping elements as it finds the minimum value in each pass. The visualization uses a force-directed layout via `d3.forceSimulation` to position nodes, with circles representing array values and lines connecting them in their current order. Each comparison between `arrNumbers[j]` and `arrNumbers[minIdx]` triggers a color change, while a successful swap updates the node positions using `transition.attrTween` to smoothly move the circles. The code, written by VinodLouis, runs the sort logic in plain JavaScript and renders the result through D3's data binding and SVG transforms.

Jul 13, 2017

Loading thumbnail…

Implementing bubble sort in node

This visualization demonstrates a bubble sort algorithm in action, using an array of 13 numbers as the data source. The code implements the sort with nested JavaScript loops, comparing adjacent values and swapping them when the left value exceeds the right one, with a temporary variable storing values during each swap. The inner loop iterates progressively fewer times through the array on each pass, accounting for elements already sorted at the end. A console.log statement outputs the fully sorted array, while commented-out logging shows the sort state at each iteration for debugging.

Jul 13, 2017