viper6566

@viper6566·3 public vizzes

Shapes with SVG and CSS

This example demonstrates how to combine SVG shape elements with CSS styling and transformations to create a static geometric composition. It shows circles, rectangles, lines, and a path arranged in a grid-like layout, with some shapes inheriting default black fills while others are explicitly colored red, blue, or green. The code uses raw SVG markup with nested `g` groups, CSS class selectors for stroke styling, and React’s `ReactDOM.render` to display a simple “Hello React!” message. Transform attributes apply scaling and translation to the entire SVG canvas.

Jul 23, 2020

Loading thumbnail…

HTML Cars Report

This example displays a simple static report of three used cars, listing each vehicle’s model, year, and price, with the first entry highlighted in purple. It is built as a React application where `index.js` renders a basic “Hello React!” message via `ReactDOM.render`, while the visible HTML content in `index.html` is styled by a plain CSS file using a monospace font and the `.highlighted` class. The visualization relies on no external charting or data-processing libraries, instead presenting raw data directly in the markup.

Jul 23, 2020

Loading thumbnail…

React Starter

This example displays a full-screen message reading “Hello React!” in large, centered text. It demonstrates a minimal React application setup using React 16.13.1 and ReactDOM. The code defines a simple functional component, `App`, and renders it into the `root` DOM element via `ReactDOM.render`. The page relies on CDN-loaded React and ReactDOM production builds, with styling applied through a CSS class in the HTML file. No data or interactive visualization is present; it serves purely as a starter template for integrating React into an Observable-style gallery environment.

Jul 23, 2020