Skip to main content
Log in
Y

Yonet

@Yonet·13 public vizzes

Loading thumbnail…

Cleaning the Airbnb data

This example shows the process of cleaning and restructuring Airbnb listing data. It transforms raw JSON records by extracting and reorganizing key fields, such as creating a slug from the listing name, structuring address and review objects, and adding metadata like photos and fees. The code uses Node.js `fs/promises` methods `readFile` and `writeFile` to load and save the data. It also applies a custom `deleteProperties` function to remove a long list of unnecessary fields, while parsing dates with a native `Date` constructor from yyyy-mm-dd strings.

Jan 12, 2023
Loading thumbnail…

Gist 6a8973daaeea6e442bd0a138c08ccbc1

This visualization maps Airbnb listings from a JSON dataset onto a geographic canvas, displaying each property as a point positioned by its latitude and longitude. The code uses the `d3.forceSimulation` API to apply a physics-based layout that separates overlapping points, while `d3.geoPath` renders the map’s spatial context. Each point’s color and size encode the listing’s review score and nightly rent, with tooltips revealing property details like title and neighborhood. The underlying data, from a gist, includes address fields, review ratings, and fee structures, driving the visual encoding. The result is an interactive scatterplot over a map, illustrating the distribution of rental properties and their pricing patterns.

Jan 12, 2023
Loading thumbnail…

automatic update by http://atom.io/packages/sync-settings

This example visualizes the configuration of an Atom text editor setup, sourced from a gist by Yonet. It displays the collection of user settings, keybindings, and installed packages as a structured JSON tree. The visualization highlights package names and versions, distinguishing between core packages, community packages, and syntax/UI themes. It uses a treemap or hierarchical layout to show the distribution of packages by type, with color encoding to differentiate themes from regular packages. The data is automatically updated via the sync-settings package, reflecting the user's live Atom configuration.

Mar 13, 2017
Loading thumbnail…

Wars II

A static SVG visualization plots historical wars from 1823 to 2003 as diagonal curves, with each war's start and end dates mapped to a time axis and the curve's height reflecting its duration. Circle size and color, using a quantile scale, encode the number of battle deaths, while a square-root scale handles the wide range of casualties. The code uses `d3.svg.axis`, `d3.svg.diagonal`, `d3.scale.sqrt`, `d3.time.scale`, and `d3.scale.quantile` to build the chart, reading the war dataset from a local CSV file sourced from the Correlates of War project. The visualization is inspired by Valentina D'Efilippo's work.

Sep 18, 2016
Loading thumbnail…

Wars II

This visualization displays wars from 1823 to 2003 as diagonal paths on a timeline, with each path’s start and end points mapped from the data's dates and duration. A circle at each path’s end encodes battle deaths through both area (using a square-root scale) and color (using a quantile scale). The chart uses D3’s `d3.time.scale`, `d3.scale.sqrt`, and `d3.svg.diagonal` to compute positions and draw the curves, while axes are rendered with `d3.svg.axis`. Data comes from the Correlates of War (COW) dataset, and the SVG output is inspired by Valentina D’Efilippo’s work.

Sep 18, 2016
Loading thumbnail…

The introduction to Reactive Programming you've been missing

This example illustrates the core concepts of reactive programming using asynchronous data streams, drawing from the original tutorial by André Staltz. The visualization, built with React, shows how streams can be created from user inputs and combined using functional operators like map and filter. The code references RxJS observables to demonstrate the flow of data events over time, with an interactive diagram that maps click events and other stream transformations. The rendering uses React components to display the stream diagrams, highlighting how multiple streams can be merged and filtered to produce new data sequences.

Sep 11, 2016
Loading thumbnail…

Froyo Machine!

This interactive froyo machine demonstrates event-driven data visualization through a simulated conveyor belt. Users select vanilla, chocolate, or swirl flavors by clicking buttons, which triggers the creation of corresponding image elements appended to a conveyor belt graphic. The code uses native HTML DOM APIs including `document.getElementById` and `createElement` to manage button events and dynamically append images. A power button toggles the machine, though the display of flavor options remains static. The visualization relies on locally stored image assets for the machine, conveyor, and flavor scoops.

Jul 24, 2015
Loading thumbnail…

Implementation of sqRoot

This example implements a square-root approximation function using a binary search algorithm. The calculation begins with a range from 1 to the input number, repeatedly narrowing the search interval by comparing the midpoint squared to the target. The code tracks all midpoints in an array, sorts them, and returns the largest successful approximation when the search converges. The visualization demonstrates the step-by-step narrowing process, with each midpoint calculation highlighted as the algorithm iterates toward the result.

Jul 12, 2015
Loading thumbnail…

Gist 56c4c9477810d5350329

This visualization demonstrates the Josephus problem, where 11 nodes arranged in a circular linked list are eliminated one by one until a single survivor remains. The code models the chairs as a custom JavaScript object with `addNextNode` and `removeNode` functions, using plain object properties for node traversal rather than a visualization library. The algorithm increments the skip count after each deletion, cycling through the list until only one node remains, ultimately returning the survivor’s value. The example focuses on the algorithmic logic of the elimination process, with no graphical rendering or external data sources involved.

Jun 11, 2015
Loading thumbnail…

Gist 4b6eacbdba8bf3b35fea

This example demonstrates how to flatten nested JavaScript objects into a single-level key-value structure. The code defines a `flatten` function that recursively traverses each object property, building new keys by concatenating parent keys with child keys using a dot separator. It checks whether a value is an instance of `Object` to determine whether to recurse further or store the final value in the result object. The visualization gallery displays the function’s logic and its recursive traversal pattern, though no external libraries or rendering APIs are used in the provided code.

May 15, 2015
Loading thumbnail…

Gist 4f3f05f18ca479561580

This example visualizes the algorithmic process of determining whether any combination of integers from a given array sums to a target value, exploring both pair-wise and z-wise combinations. It demonstrates the logic of the `addsToY` function, which checks if any two numbers add up to a target, alongside the more general `zAddsToY` function that uses a recursive `combinations` helper to generate all possible subsets of a given size. The visualization likely illustrates the nested loops and combination generation steps, highlighting how the code iterates through arrays and builds temporary results. The implementation relies on standard JavaScript array methods and custom iteration logic rather than external data or rendering libraries.

May 6, 2015
Loading thumbnail…

Gist 8131253

This example simulates a perfect out-shuffle on a deck of cards and tracks how many shuffles are needed for the deck to return to its original order. The code implements two approaches: a fast solution that uses greatest common divisor and least common multiple calculations to determine the shuffle count, and a naive solution that iteratively compares the shuffled deck against a sorted version until they match. The visualization relies on JavaScript and the Underscore.js library for utility functions like memoization, array manipulation, and uniqueness checks, with shuffle counts logged to the console.

Dec 26, 2013
Loading thumbnail…

Gist 6504843

This visualization displays the reciprocal "hotness" rankings between two groups of 50 entities each, rendered as a bipartite graph or matrix. The code uses D3.js to map each entity's hotness value to a visual property, linking men and women based on their ranked preferences. The data is sourced from JSON files (`men.JSON` and `women.JSON`), with hotness values and ranking lists for each node. The visualization likely employs D3's force-directed layout or chord diagram to show the strength of connections between the two sets, using `d3.scale` for color or size encoding based on hotness values.

Sep 10, 2013