pgraybeal

@pgraybeal·6 public vizzes

face d3

This example builds a stylized human face using SVG elements, with the arrangement driven by a physics-based layout. It constructs a face from a set of nodes and links, applying a force-directed simulation to position the features. The visualization uses `d3.forceSimulation` with force parameters to organize the nodes into a recognizable facial structure, while the SVG rendering is handled directly through the D3 library. The code loads D3 v6 from a CDN and creates the shapes dynamically, with the simulation running continuously to maintain the layout.

Sep 29, 2020

Loading thumbnail…

HTML Cars Report

This example shows a simple HTML page displaying a static list of three used cars with model year, make, model, and price. The page renders a plain, unstyled bulleted list inside an `h1`-headed report, using only the CSS stylesheet to set the base font size to 2em. No JavaScript libraries or interaction are present; the entire visualization is static HTML and CSS, with the data hardcoded directly into the markup rather than loaded from an external source.

Sep 10, 2020

Loading thumbnail…

React Starter

This React Starter demonstrates a minimal single-page setup for embedding a visualization in a React application. It displays a static text message, "Hello world," styled at a large font size. The code uses React 16.13.1 and ReactDOM to render the message into a root div, with the component logic defined in JavaScript. While it does not include a data source or chart, it serves as a foundation for integrating more complex visualization libraries.

Sep 10, 2020

Loading thumbnail…

Untitled

This example visualizes a dataset of location-based check-ins as a dynamic particle system, where each point represents a recorded visit and its position is derived from aggregated geographic coordinates. The visualization uses a custom WebGL rendering loop via Three.js to draw and animate thousands of glowing, color-coded particles that cluster around urban hotspots, with brightness indicating density. The underlying data is processed using a force-directed simulation (d3.forceSimulation) to spread overlapping points, while the geographic layout is projected using d3.geoMercator and d3.geoPath for reference boundaries. A slider lets users scrub through time, revealing how check-in patterns shift across hours of the day.

Sep 10, 2020

Loading thumbnail…

Untitled

This example visualizes a particle system flowing over a map of the United States, where each particle traces a path across the country. It uses d3.forceSimulation with custom forces to drive particle movement, while d3.geoPath renders the geographic boundaries from a TopoJSON source. The particles leave fading trails on a Canvas, creating a dynamic migration-like pattern. The code reads pixel data via Canvas getImageData to constrain particles to landmasses, and employs d3.transition with attrTween for smooth position updates.

Sep 10, 2020

Loading thumbnail…

Cars Report

This example displays the make of the first car in a static dataset, rendering the text “Honda” prominently in the browser. It imports a hardcoded array of five car objects from `cars.js`, which is defined as a JSON string and parsed with `JSON.parse`. The `index.js` file accesses `cars[0].make` and writes it into a `<pre>` element using the DOM API `document.getElementById().textContent`. The page styling applies a large font size via inline CSS in `index.html`, with React as the declared framework, though no React components are actively used in this simple data readout.

Sep 10, 2020