rayray196

@rayray196·7 public vizzes

Shapes with SVG and CSS

This example demonstrates a single green rectangle with a blue stroke rendered directly in an HTML page using inline SVG markup. The shape is defined by explicit `x`, `y`, `width`, `height`, `fill`, `stroke`, and `stroke-width` attributes placed within the body of the document. No JavaScript libraries or styling frameworks are employed; the visualization relies solely on standard SVG presentation attributes supported by modern browsers. The simple approach highlights how basic geometric shapes can be created without external dependencies, serving as a minimal foundation for more complex data-driven graphics.

Apr 27, 2023

Loading thumbnail…

using a bar garph with text file

This example shows a bar chart intended to display country populations from a CSV file, but the visualization is incomplete—the code only loads and parses the data without rendering any bars. It reads `data.csv` using D3’s `csv` method, converts the population values to numbers and multiplies them by 1000, then logs the result to the console. The chart relies on D3 v7 and React, but the current implementation stops at data preparation, leaving the visual output unmade.

Apr 13, 2023

Loading thumbnail…

Making a bar chat

This bar chart displays the scores of four individuals—Simon, Mary, Jo, and Peter—on a fixed scale from 0 to 100, using blue rectangular bars. Built with D3 v7, it employs `d3.scaleBand` to position bars along the x-axis and `d3.scaleLinear` for the y-axis, binding data to SVG `rect` elements via `join`. The chart is sized with explicit width, height, and margin constants, rendering inside an SVG container with a specified `viewBox`.

Apr 13, 2023

Loading thumbnail…

Shapes with SVG and CSS

This example displays a simple composition of four shapes—two large and small circles and a horizontal line—rendered on a 960 by 500 SVG canvas. The code uses raw SVG elements with CSS styling to set the pink fill, black stroke, and stroke widths. A group element applies the line’s thick stroke. It is a minimal demonstration of basic SVG shape drawing and CSS presentation, with no external libraries or data, providing a barebones starting point for visual experimentation.

Apr 12, 2023

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic geometric shapes using SVG elements styled with CSS and inline attributes. It shows a pink circle with a black stroke and a green rectangle with a blue stroke, each positioned within an SVG canvas. The code uses raw HTML markup with `<svg>`, `<circle>`, and `<rect>` elements, applying fill and stroke properties directly via presentation attributes. While the title references CSS, no external stylesheets or JavaScript libraries are present, relying solely on SVG’s native styling capabilities.

Apr 12, 2023

Loading thumbnail…

creating a line

This example shows a simple black line drawn on a white SVG canvas, with a short path segment branching off from its endpoint. The page renders directly in the browser using React and SVG elements, specifically the `line` and `path` tags. It demonstrates how to position coordinates with the `x1`, `y1`, `x2`, and `y2` attributes and how to define a custom stroke with the `path` `d` attribute, all within a fixed 1000×1000 viewport. The code does not load external data or process datasets.

Apr 10, 2023

Loading thumbnail…

cars report

This example displays a simple, styled list of used cars with a highlighted 2012 Nissan Leaf. The page uses plain HTML and CSS, with JavaScript not present despite the React framework reference. The CSS styles the body with a large monospace font and colors the highlighted list item red. The rendering uses standard DOM elements and CSS selectors, with no data fetching, charts, or visualization libraries.

Apr 10, 2023