EJ Fox

@ejfox·4 public vizzes

Vue Starter

A minimal Vue starter example demonstrates a blank canvas with a test button and a red background, serving as a bare-bones template for building visualizations. The application mounts a Vue instance via `createApp()` from the bundled `vue.esm-browser.min.js` file, defining a simple template with a button and an `onMounted` hook that logs to the console and triggers an alert. Styling is applied globally, setting the body background to red, while the file structure includes `App.vue`, `index.js`, and a `package.json` referencing d3 7.8.5 as a dependency.

Jan 31, 2024

Loading thumbnail…

P5.js 64 x 128

This example renders a responsive grid of 64 columns by 128 rows of circles, colored by Perlin noise on an HSB palette. It uses the p5.js library with `createCanvas`, `noise`, `fill`, and `ellipse` to draw the visualization. The sketch also integrates `p5.AudioIn` to capture microphone volume, which dynamically adjusts the noise animation speed. The code demonstrates a custom hot-reloading setup for VizHub, extracting p5 functions and binding them to the sketch instance.

Jan 31, 2024

Loading thumbnail…

EJ Vizhub Starter

This example displays the text "Hello World!" at a large, fixed font size in the center of the container. The visualization demonstrates a minimal setup for rendering static HTML content through a JavaScript export function. It uses the `container.innerHTML` API to inject a styled div element directly, with the font size defined as a constant variable. The example serves as a basic starting point for building more complex visualizations, showing how to structure code for the EJ Vizhub platform.

Jan 22, 2024

Loading thumbnail…

Hello Vizhub

Twelve colored circles, each loaded from a CSV dataset with id, x, y, radius, and fill, animate into view by growing from a radius of zero, while ten blue squares bounce between two positions. The visualization uses D3’s data join with explicit enter, update, and exit transitions, combining a slow two-second ease for entrance and a fast linear movement for updates. Circles blend with multiplative blending via CSS, and the entire scene renders inside a dynamically sized SVG, relying on d3-transition and d3-selection, with data parsed through d3.csv.

Jan 19, 2024