TeaMelab

@TeaMelab·4 public vizzes

Practice

This example shows three red squares positioned diagonally across an SVG canvas, with a text label reading “this is my text” placed above them. The squares are rendered as SVG `<rect>` elements with explicit `x`, `y`, `width`, `height`, and `fill` attributes, while the label uses an SVG `<text>` element. The visualization is built with React and rendered via SVG, using plain HTML and CSS files where the stylesheet defines a class with a black fill. No interactive behavior or data binding is present; the graphic is purely static and hand-coded.

Feb 9, 2020

Loading thumbnail…

Let's make a face using D3.JS

This example shows a blank SVG canvas with a single circle added programmatically, while data from a CSV file is loaded asynchronously. The visualization is minimal, focusing on the setup of a D3.js v5 project within a React framework. The code uses `select` and `csv` from D3 to append a circle to the SVG and log the loaded data to the console. No face is actually drawn, and the styling for a red-bordered rectangle exists in CSS but is not applied.

Feb 1, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example shows a set of geometric shapes—two circles, two rectangles, and a line—arranged in an SVG canvas. The rectangles are grouped and styled with red strokes and a soft pink fill via CSS, while the circles use inline fill attributes. It demonstrates basic SVG rendering with React, using static markup without interactive behavior or data binding. The code relies on plain SVG elements (`circle`, `rect`, `line`) and CSS class selectors to apply visual properties, highlighting a minimal approach to shape composition.

Feb 1, 2020

Loading thumbnail…

Cars Report

This example demonstrates a Cars Report using React and custom CSS styling. The page renders a static list of car-related items, with the first item highlighted in red using the `.highlighted` class. The layout is controlled through a monospace font and large text size applied to the body via linked stylesheets. The code references React Starter setup and uses plain HTML structure within an `index.html` file, relying on CSS for visual distinction rather than interactive data visualization.

Feb 1, 2020