B

BillyBHWong

@BillyBHWong·17 public vizzes

Loading thumbnail…

sketch_03

This example visualizes a three-dimensional architectural massing model of a building lot, showing the relationship between a primary structure and its surrounding context. The code uses Three.js with WebGL rendering to display a bright yellow mass and semi-transparent white context volumes against a gray background. A perspective camera provides a dynamic view of the spatial arrangement, while directional and ambient lighting enhance the geometric forms. The visualization includes interactive controls via dat.GUI to toggle between intermediate and corner lot configurations, and text sprites label the overall design as "RSA-5" with dimension annotations.

Loading thumbnail…

sketch 02

A 3D block model rotates in a dark WebGL scene, its dimensions adjustable in real time through a dat.GUI control panel. The sketch uses Three.js with a perspective camera and OrbitControls, rendering both wireframe and flat-shaded materials to highlight the box’s edges and surfaces. Animate continuously rebuilds the geometry from parametric width, depth, and height inputs, while the directional and ambient lights define the form. The code does not load external data, relying instead on procedural geometry and interactive user sliders.

Loading thumbnail…

LI Analytics

This example uses D3.js v4 to visualize letter frequency data from a TSV file as a bar chart with SVG rendering. The chart displays the frequency of letters in the English language, with bars colored steel blue that transition to brown on hover. The visualization includes axes for both the letter categories and their frequencies, and the title "BIG TEXT" serves as a placeholder. The page also logs the total number of comment letters received from a separate CSV file to the console, though this data is not visualized.

Loading thumbnail…

image-fade

This example demonstrates a cross-fading transition between two images of the same scene—a daytime and a nighttime view—using jQuery's `fadeIn` and `fadeOut` methods. The visualization shows how two static images can be swapped with a smooth opacity transition, creating a before-and-after effect. The code relies on jQuery to handle the fade animations and a `div` container with absolute-positioned images. Although D3.js v4 is loaded in the page, the visible behavior uses only jQuery DOM manipulation and animation, with image sources pulled directly from GitHub URLs.

Loading thumbnail…

draw_plan_01

This example shows a scaled architectural floor plan of a house’s second story, dividing the space into four colored rooms plus a red stairwell, with a title below. Built with D3 v4, it renders SVG rectangles for each room, an outer wall outline, and a labeled caption. The code sets fixed pixel dimensions for the plan, positions elements via x/y attributes, and uses simple style fills and strokes to distinguish areas. No data source is used; the layout is hardcoded, and interactivity is absent.

Loading thumbnail…

In-Output

This example presents a static layout of a residential property interface with a right-side control panel, showing building details like gross square footage, floor count, and room numbers. The visualization uses D3.js v4 to append an SVG canvas and text element, while Semantic UI provides styled input fields, checkboxes, a slider for adjusting rear yard size, and a button for requesting sample drawings. The layout combines a blue sidebar for user controls with an empty main drawing area, though the code currently displays only placeholder text rather than an actual floor plan or data-driven graphic.

Loading thumbnail…

UI_01

This example displays a static SVG canvas with a single line of instructional text, prompting users to edit the code. It uses D3 v4 to select the body element, append an SVG container with fixed dimensions of 960 by 500 pixels, and render a text element positioned at coordinates (120, 200) with a monospace font. The visualization demonstrates basic D3 selection and SVG text rendering, serving as a minimal starting template for further customization. No data binding or dynamic behavior is present beyond the hardcoded text string.

Loading thumbnail…

sketch 01

A single, cube-like form floats in a black void, its dimensions adjustable in real time through a dat.GUI panel. Three.js renders the object with a flat-shaded Phong material and a thin wireframe overlay, while an ambient and a directional light define its volume. The viewer can orbit around the mesh using OrbitControls, though the object itself remains static, and no data or external source is visualized beyond the interactive geometry itself.

Loading thumbnail…

Three.js Geometry Browser

This interactive Three.js example demonstrates a real-time 3D geometry explorer, allowing users to cycle through and modify a variety of parametric shapes, including boxes, cylinders, and custom polyhedra like the gem form. It shows how wireframe overlays and solid meshes update together as parameters change. The code relies on the Three.js library, using `PolyhedronGeometry`, `WireframeGeometry`, and `OrbitControls` for camera interaction, while `dat.gui` provides the control panel for adjusting geometry dimensions and segmentation. Rendering is handled through WebGL with continuous animation, and a separate HTML link opens the scene in a new window.

Loading thumbnail…

d3js workshop - animated bar charts

This animated bar chart visualizes the English Premier League standings as of February 2015, showing each team’s points and wins. Built with D3.js v3, it renders an SVG bar chart where bar lengths correspond to points, while bar colors and circular markers encode win counts on a blue-to-red scale. Clicking a bar or circle triggers a transition (via `transition.attrTween`-style updates) that switches the displayed metric, with text labels and tooltips revealing team names. The visualization reads data from a CSV file and uses `d3.scale.linear` for both position and color, with all elements rendered as SVG shapes.

Loading thumbnail…

d3js workshop - bar chart

This example shows a horizontal bar chart of English Premier League standings, with each bar’s length representing a team’s total points and its color encoding the number of wins. The chart is rendered as SVG using D3 v3, reading team data from a CSV file via `d3.csv`. A linear `d3.scale.linear` maps points to bar widths and a second linear scale maps wins to a blue-to-red color range. Each bar is a `<rect>` inside a `<g>` group, with a text label showing the points value and a `<title>` element for hover tooltips.

Loading thumbnail…

d3js workshop - bar chart

This bar chart visualizes the Premier League standings as of February 2015, showing each team’s total points as horizontal bars. It displays only the points data, omitting team labels entirely. The visualization uses D3.js v3 to load the CSV data, applies a linear scale (`d3.scale.linear`) to map points to bar width, and renders the chart as SVG rectangles with text labels showing the point values at each bar’s end. The bar height is fixed, with spacing between bars via padding.

Loading thumbnail…

d3js workshop - circles 2

Three circles animate from the top of an SVG canvas, shifting downward and turning red through a D3 transition, then revert to their original position and black fill on mouseover. Clicking a circle sets its radius to zero, removing it from view. The example uses D3 v3’s selection, data binding, and transition methods, with event handlers for mouseover and click. It renders with SVG elements and demonstrates basic interactivity, showing how D3 binds an array of numbers to visual properties like x-position and radius.

Loading thumbnail…

d3js workshop - circles

This example demonstrates how to animate three circles on an SVG canvas using D3.js version 3, showing how data binds to elements and transitions update their appearance. It creates an SVG of 720 by 120 pixels, binds a simple array of three numbers to circle elements, and positions them horizontally based on their data values. The visualization uses chained `transition()` methods with configurable `duration()` and `delay()` to animate the circles’ fill color to red, and also applies radius and vertical position changes. The code relies on D3’s data-join pattern (`selectAll`, `data`, `enter`) and shows how multiple transitions can be sequenced with per-element delays.

Loading thumbnail…

d3js workshop - data binding

This example demonstrates D3.js data binding by mapping an array of five names to dynamically created `div` elements. It shows how the `enter()` selection creates one element per data item, then uses a text function to display each name with its corresponding index. The visualization uses D3 v3’s `d3.selectAll`, `.data()`, `.enter()`, and `.append()` to bind and render the data, highlighting the core concept of joining data to DOM nodes. The rendered output is a simple list of numbered greetings, illustrating the fundamental data-join pattern.

Loading thumbnail…

d3js workshop - data binding

This example demonstrates D3.js data binding through interactive selection and DOM manipulation. It shows how to target specific HTML elements using CSS-style selectors, with commented examples for selecting by element type, class, or ID, and updating their text content. The code also illustrates appending new elements to the DOM using `d3.select` and `.append()`. Using D3 v3, the visualization relies on core selection methods like `selectAll` and `text` to illustrate the framework’s binding capabilities, with the page containing two static divs and commented-out code that reveals potential interactions.

Loading thumbnail…

html_basics

This example demonstrates basic HTML and CSS styling for text and SVG shapes, with a primary focus on the cascade and specificity of CSS selectors. The page contains two paragraphs: the first is styled with a larger font size and pink color via an ID and class selector, while the second uses a plain element selector. The visualization also includes a yellow circle drawn with an inline SVG element, using standard SVG attributes for positioning and appearance. The code relies on native web APIs—HTML, CSS, and SVG—without external JavaScript libraries, showcasing fundamental front-end techniques.