mimimichelle

@mimimichelle·4 public vizzes

React Starter

A React starter example renders a static "Hello React!" message in large, centered text. The page loads React 16.13.1 and ReactDOM from UMD builds, then uses `ReactDOM.render` to mount a functional `App` component into a `#root` div. The component returns a single `div` with a CSS class, demonstrating the minimal setup for a React-based visualization environment.

Oct 15, 2020

Loading thumbnail…

Sized Points on a Map

This visualization presents a world map with circular points sized proportionally to city populations, showing all cities with over 50,000 residents. The map uses d3.geoNaturalEarth1 projection with d3.geoPath to render land boundaries, graticules, and the globe sphere from World Atlas TopoJSON data, while city coordinates come from a CSV database. Point sizes are scaled using d3.scaleSqrt, with React managing the SVG rendering and D3 v5 handling geographic and data processing tasks.

Oct 1, 2020

Loading thumbnail…

HTML Starter

A minimal HTML page demonstrates fundamental web development with a plain text rendering of "Hello HTML" centered on the screen. The example uses vanilla HTML, CSS, and JavaScript without any external libraries or frameworks. The CSS body selector applies text alignment and a large font size, while an inline script logs "Hello JavaScript!" to the browser console. This starter serves as a baseline for visualization projects, showing basic DOM structure and script execution within a single file.

Oct 1, 2020

Loading thumbnail…

Just test

This example demonstrates a simple static composition of geometric shapes, including circles, rectangles, lines, and a path, rendered as inline SVG elements. The visualization is framed by a bold black stroke on the primary shapes, while the secondary line group uses a distinct orange stroke for its path. The page also includes styled HTML text, with a red highlighted list item, and relies on custom CSS for typography and layout. The HTML structure directly embeds the SVG markup, with no external JavaScript libraries required.

Oct 1, 2020