Eric Ho

@amtf·8 public vizzes

SVG 1

This example renders a single SVG circle element on an empty HTML page. The circle is positioned at coordinates (100, 100) with a radius of 20 pixels. The code uses plain, unadorned SVG markup without any JavaScript or CSS styling, demonstrating the minimal structure required for basic vector graphics in a browser. There is no data source or interaction involved, only static shape definition.

Mar 12, 2021

Loading thumbnail…

Untitled

This example demonstrates how to format numbers with D3’s `d3.format` API from the `d3-format.v2` module. It creates two format specifications—a compact two-significant-digit format and a centered width-20 format—and outputs the results of formatting the number 12347 with each to the console. The code loads the D3 library from a CDN and executes the formatting calls directly in a script tag, showing the formatted strings as the primary output.

Feb 14, 2021

Loading thumbnail…

Hello VizHub

This example displays the text "Helloxy VizHub!" in the center of the page using D3.js v5, loaded from UNPKG. It demonstrates importing the `select` function from the D3 module and a local ES6 module named `myMessage.js`. The code selects the `#message` div and sets its text content, while CSS controls the font size and alignment. It shows how to combine external libraries with local modules in a VizHub project.

Feb 12, 2021

Loading thumbnail…

D3 Example

A minimal D3.js example renders a set of circles on an SVG canvas, positioning each circle based on an array of objects with `x` and `y` coordinates. The code uses D3's data join pattern—`selectAll`, `data`, `enter`, `update`, and `exit`—to append, update, and remove circle elements dynamically. The visualization is embedded in a plain HTML page with D3 version 3.5.5 loaded from a CDN, and the circles are drawn with a fixed radius of 30 pixels.

Jan 24, 2020

Loading thumbnail…

Hello HTML

This example shows a minimal HTML page that renders a small green square using both React and D3. The React component displays the text “compile” inside a div, while a static SVG and a D3-selected SVG each draw a separate rectangle. The code integrates React 16.7, ReactDOM, and D3 5.15 via CDN links, alongside vanilla JavaScript for the D3 append operations. The page demonstrates basic SVG rendering and library coexistence without any interactive behavior.

Jan 23, 2020

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000, using circles sized by a square-root scale to represent population magnitude. The visualization employs a Natural Earth projection with graticules and country boundaries, rendered as SVG paths. City data comes from the Simplemaps World Cities Database, loaded via `d3.csv`, while country boundaries use TopoJSON from the World Atlas. The React app uses `d3.geoPath` for map geometry and `scaleSqrt` for circle radii, with semi-transparent teal circles overlaid on a light gray landmass.

Jan 23, 2020

Loading thumbnail…

React Starter

This example shows a React component that renders the text "Hello React!" centered on the page. The code defines an `App` functional component using JSX and mounts it with `ReactDOM.render` into a root div. It imports `React` and `ReactDOM` from the React libraries and applies a CSS class for large font sizing. The example demonstrates basic React rendering with a static message, using React 16.10.0 and ReactDOM from a UMD build.

Jan 22, 2020

Loading thumbnail…

Hello HTML

This example shows a minimal HTML page with a single SVG circle. It demonstrates the basic structure of an HTML document and the use of inline SVG to render a shape. The page contains no JavaScript or data binding; the circle is defined declaratively with a `radius` attribute in the markup. The rendering relies entirely on the browser's native SVG support.

Jan 22, 2020