Traveris Patterson

@StrangePixeL·5 public vizzes

Shapes with SVG and CSS

This gallery example demonstrates how raw SVG elements such as circles, rectangles, lines, and groups are composed into a static geometric composition. The visualization uses React as the framework and renders graphics through SVG markup, with styling applied via an external CSS file. Basic SVG attributes like `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, and `stroke-width` define each shape's position and appearance, while the `transform` attribute translates a grouped set of shapes. The example highlights different fill colors, named colors, and hex codes, as well as stroke styling, to showcase foundational vector-graphics techniques.

Jul 25, 2020

Loading thumbnail…

HTML Cars Report

This example displays a simple, static HTML report listing three used cars with their model years and prices, using a monospace font at a large size. The page renders a title and an unordered list, with the first item highlighted in red via a CSS class. The visualization relies solely on core HTML markup and a linked stylesheet, with no JavaScript libraries or data-binding frameworks involved. The data is hardcoded directly into the list elements, presenting the information as a plain text-based catalog rather than an interactive chart.

Jul 25, 2020

Loading thumbnail…

HTML Starter

This example displays the phrase “Hello HTML” in large, centered text, creating a minimal starting point for web-based visualizations. The page renders static HTML content styled with a CSS rule that sets the font size to 13em and aligns the body text. The code includes an inline script that logs “Hello JavaScript!” to the console, demonstrating a basic interaction with the browser developer tools. Built with plain HTML, CSS, and JavaScript, it offers a bare-bones template without external libraries or data sources.

Jul 25, 2020

Loading thumbnail…

Cars Report

This data-visualization example displays a text-based report of cars priced under $2,000. It begins with a "Loading..." message and then presents a list of car details (year, make, model, and price) after a simulated two-second data fetch. Built with React, the code uses JavaScript’s `Promise` for asynchronous data retrieval and string formatting via custom modules. The report is generated by filtering an inline JSON array and mapping each car to a formatted string, which is then rendered in a `<pre>` element.

Jul 25, 2020

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders a static “Hello React!” message centered on the page. The app uses React 16.13.1 with `ReactDOM.render` to mount a functional component into the `#root` div. The component returns a single `<div>` styled with a large font size via embedded CSS, and the code loads React and ReactDOM from external UMD scripts. No data or interaction is present; the example solely illustrates the basic setup for a React-based visualization or web app.

Jul 24, 2020