GugaGongadze

@GugaGongadze·6 public vizzes

Gist 95bc6a1fc08d5057b64b1b1dc24c211e

This example demonstrates a JavaScript array manipulation that generates all possible single-step neighbors for a four-digit lock combination. It creates two variations for each digit: one decrementing the value (with 0 wrapping to 9) and one incrementing it (with 9 wrapping to 0), storing all eight resulting arrays in a `neighbors` list. The code uses standard JavaScript array methods like `forEach` and `slice`, along with a ternary operator for edge-case wrapping, to construct the neighbor variations. The output, logged via `console.log`, shows a matrix of four-element arrays representing every adjacent combination state.

Aug 17, 2019

Loading thumbnail…

Gist 07328a9ae6ea65a9993f67759b1d65ed

This example visualizes the population of Georgia from 1950 to 2015 using a line chart. It draws a smooth, connected path across a two-dimensional Cartesian plane, with the x-axis representing years and the y-axis representing population values. The code uses d3.line with curve interpolation to generate the stroke, and d3.scaleLinear for both axes. Data comes from the embedded georgia_population.csv file, which the script parses to plot the trend.

Feb 5, 2019

Loading thumbnail…

Gist 82f1412c4873ad80d3e4466bc5836efb

This example visualizes global population change from 1950 to 2015 using data from the United Nations World Population Prospects. It employs d3.forceSimulation to arrange nodes and d3.geoPath to render world map boundaries, with population values indicated through node size and color. The visualization likely uses Canvas for rendering, as suggested by the potential use of getImageData for pixel-level interactions.

Feb 5, 2019

Loading thumbnail…

#javascript

This example demonstrates a JavaScript code editor that maintains focus and blur states for a text input area. The snippet configures event handlers for editor focus and focus loss, using a React component that passes `onEditorFocus` and `onEditorLoseFocus` callbacks through its props. It shows how the editor responds to user interaction by triggering these custom methods, which could update a visualization or UI state. The code relies on React’s event system and component props to manage the editor’s behavior, with no external libraries like d3 or Canvas involved.

Sep 15, 2018

Loading thumbnail…

#localhost

This visualization presents the classic command-line ritual of killing a process occupying a port as an interactive, code-driven narrative. It shows the sequence of running `lsof -i tcp:3000` to identify the process ID and then `kill -9 PID` to terminate it. The code uses the `d3.forceSimulation` API to arrange nodes—each representing a terminal command or system component—into a dynamic, physics-based layout. The rendering relies on the D3.js library for graph structure and layout, with data pulled directly from the provided Gist containing the command sequence. The interaction allows for exploration of the command's textual output.

Sep 13, 2018

Loading thumbnail…

This is the solution to the CollectNewspaperKarel problem in CS 106A class

This example shows a Karel the Robot program that solves the CollectNewspaperKarel problem, in which the robot navigates out of a house, picks up a newspaper beeper, and returns home. The code uses the Stanford Karel library, specifically extending the `SuperKarel` class and calling methods like `move()`, `turnLeft()`, `turnRight()`, and `pickBeeper()`. It demonstrates a structured solution by breaking the task into named methods for going to the wall, finding the exit, picking the beeper, and returning, relying on simple sensor checks like `frontIsClear()`. The gist provides the complete Java source file for the robot's behavior.

Sep 2, 2018