VictorHom

@VictorHom·12 public vizzes

Gist ac577ddd4531000aaf010b4257a3bf16

This visualization scrapes Victor Hom’s public LinkedIn profile to display his career history as an interactive timeline. It uses the `fetch` API to load the JSON data, then renders each position and education entry with D3.js, applying `d3.forceSimulation` for node placement and `transition.attrTween` for smooth animations. Company logos are loaded from URLs, and tooltips reveal details like titles and dates. The layout highlights his progression from Bridgewater Associates through Affirm, with follower count and verification badge shown as supplementary stats.

Jul 2, 2025

Loading thumbnail…

barchart

This bar chart displays the population of five countries—China, India, USA, Indonesia, and Brazil—using horizontal bars with a linear y-axis and a band x-axis. The chart is rendered as an SVG via D3 v4, with axes formatted using a custom tick formatter that converts large numbers to abbreviated units like “B” for billion. The code defines scales with `d3.scaleBand` and `d3.scaleLinear`, and draws bars with D3’s data-join pattern, while the axis orientation and tick styling are set through D3’s axis API.

Jul 23, 2018

Loading thumbnail…

nyc_map

This visualization displays the five boroughs of New York City as a blue SVG map, built using a GeoJSON dataset of borough boundaries. The map is rendered with a Mercator projection, centered on coordinates [-73.94, 40.50], and scaled to fit the 960×1160 viewport. Red circles mark four specific locations, including points in Manhattan and Queens, overlaid on the borough polygons. The example demonstrates how to load GeoJSON, compute a projection, and draw geographic features using D3 v5's geoPath and geoMercator.

May 17, 2018

Loading thumbnail…

nyc_map

This visualization displays the five boroughs of New York City as a steelblue SVG map, loaded from a GeoJSON file containing borough boundary polygons. The map uses a Mercator projection, centered approximately on [−73.94, 40.70] with a scale of 60,000, and is rendered with D3 v4's geoPath. In addition to the borough outlines, three red circles are plotted using d3.geoMercator() to project coordinates onto the map, although the circle placement code contains an apparent bug in how it maps coordinate values to SVG x/y positions.

May 16, 2018

Loading thumbnail…

nyc_map

This visualization displays the borough boundaries of New York City as a blue SVG map, rendered using D3 v4’s geoMercator projection and geoPath. The map is centered on coordinates [-73.94, 40.70] and drawn from GeoJSON data. Three red circles are overlaid at fixed coordinate points, though their placement is inconsistent due to a coding error that uses the same value for both x and y positions, causing the markers to appear along a diagonal line rather than at their intended locations. The example demonstrates loading GeoJSON, projecting geographic features, and appending SVG elements.

May 16, 2018

Loading thumbnail…

fresh block

This visualization displays the five borough boundaries of New York City as a blue SVG map, using a Mercator projection centered on the city. Red circles are overlaid at several geographic coordinates, though the implementation contains a bug where both circle positions use the projected y-coordinate for the x-position, causing misplaced markers. The map is rendered from a GeoJSON file of borough boundaries, loaded and projected with D3 v4.

May 16, 2018

Loading thumbnail…

Point on a map D3

A map of the United States displays two red circular markers in the San Francisco area, specifically in the northwest and central parts of the city. The visualization uses D3 v4 with a `d3.geoMercator` projection and `d3.geoPath` to render state boundaries from a TopoJSON file (`us.json`), with state polygons filled in steel blue and inter-state borders drawn as a mesh. The marker coordinates are projected through the same projection function to place the circles, which are appended as SVG `<circle>` elements with a fixed radius of 8 pixels.

May 16, 2018

Loading thumbnail…

Gist 288ce262e2db60849ccaee1fde931efa

This example visualizes the execution of a contrived JavaScript `sum` function using a symbolic execution diagram. It shows how variables like `x`, `y`, and `z` are computed step by step from the inputs `a`, `b`, and `c`, with each arithmetic operation displayed as a node in a flowchart. The code uses a force-directed layout via `d3.forceSimulation` to position the nodes, and the rendering relies on the D3.js library for SVG creation and animation. The data source is the function’s own source code, parsed into a graph that traces data flow and dependencies.

May 13, 2018

Loading thumbnail…

fresh block

A simple bar chart displays seven blue rectangles of varying heights on a fixed 500-by-500 SVG canvas. The chart encodes the values from a hardcoded array—100, 250, 175, 200, 120, 50, and 60—as bar heights, with each bar positioned sequentially along the x-axis using a 50-pixel width. The visualization uses D3 v4’s data join (`selectAll` and `data`) to bind the array, then appends `<rect>` elements with `attr` calls to set x, y, width, height, and fill properties. White strokes separate adjacent bars.

Apr 24, 2018

Loading thumbnail…

examples

This example demonstrates three JavaScript design patterns through code snippets: the Adapter, Iterator, and Singleton patterns. The Adapter pattern wraps a `ModifiedShipping` object to expose a `request` method compatible with the original `Shipping` interface. The Iterator pattern implements a custom `Iterator` class with `first`, `next`, `hasNext`, and `each` methods to sequentially traverse an array. The Singleton pattern uses a closure to ensure `getInstance` always returns the same object instance. The code uses plain JavaScript with no external libraries, and each pattern includes commented explanations of its purpose and trade-offs.

Jan 19, 2016

Loading thumbnail…

Gist 3bd84cb72d58e03d9d78

This visualization presents a hierarchical overview of software design patterns, organized into three categories: creational, structural, and behavioral. Each pattern is displayed as a distinct visual element, with the relationships and groupings clearly mapped out. The code uses D3.js to construct the diagram, likely employing `d3.forceSimulation` for layout and `d3.select` for DOM manipulation to render the pattern nodes and their connections. The data is embedded directly in the JavaScript source, listing each pattern with its description and category.

Jan 19, 2016

Loading thumbnail…

Gist d80bd46ed04fa250a647

This example demonstrates a minimal JavaScript function, `foo`, which logs the current execution context using `console.log(this)`. It shows the behavior of `this` when the function is invoked, but does not include any data visualization or rendering code. The implementation relies solely on the JavaScript runtime’s `console` API, with no external libraries or visual elements present. The gist serves as a bare code snippet for testing or demonstrating context binding, not a graphical chart or interactive display.

Dec 21, 2015