ankxxit

@ankxxit·6 public vizzes

Untitled

This example showcases a simple static shape: a yellow rectangle positioned on an SVG canvas. The HTML file directly embeds an SVG element with a width and height of 960 by 500 pixels, and the rectangle is drawn at the specified coordinates with a defined width and height. The rendering relies on SVG’s native `rect` element, styled with a yellow fill and a black stroke, demonstrating basic vector graphics within an HTML page without any dynamic behavior or data source.

Apr 27, 2023

Loading thumbnail…

Untitled

This example shows a single orange diagonal line drawn on a blank 960×500 SVG canvas, rendered directly within an HTML page. The line spans from the upper-left to the lower-right area, with a thick 10-pixel stroke and no interactivity or animation. The code uses raw SVG elements—`<line>`, `<g>`, and `<svg>`—with inline CSS attributes for stroke color and width, and is written in plain HTML without any JavaScript or external libraries. The data source is not present; the visualization is purely a static graphical primitive.

Apr 27, 2023

Loading thumbnail…

shapes with css and svg

This example shows a single green circle with a blue stroke rendered inside an SVG canvas. The circle is positioned at coordinates (250, 250) with a radius of 50 pixels, displayed on a 960 by 500 pixel viewport defined by the SVG element. The code uses inline CSS properties within the SVG markup, specifically the `fill`, `stroke`, and `stroke-width` attributes, to style the shape. No JavaScript libraries or data sources are involved; the visualization relies entirely on static SVG and CSS definitions.

Apr 27, 2023

Loading thumbnail…

Making a bar graph using text file

This example shows a bar graph of population by country, reading from a CSV file and rendering the data as SVG rectangles. The visualization uses D3 v7’s `csv` loader to parse `data.csv`, then a `scaleBand` for horizontal positioning and a `scaleLinear` for vertical population values. Blue bars are appended via `selectAll` and `join`, with heights computed from the y-scale. The page is a minimal HTML setup with React noted in metadata, though the code itself uses plain D3 with a container div.

Apr 13, 2023

Loading thumbnail…

making a bar chart

This bar chart displays scores for four individuals, Simon, Mary, Jo, and Peter, using blue vertical bars on an SVG. The chart builds with D3 v7, using `d3.scaleBand` for the x-axis categories and `d3.scaleLinear` for the y-axis range from 0 to 100. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, with custom tick formatting for names. The hardcoded data is bound via `selectAll` and `join`, and the SVG includes a viewBox for responsive sizing.

Apr 12, 2023

Loading thumbnail…

A smiley face

This example shows a simple smiley face rendered as a static SVG graphic, composed of a yellow circular head, two black eyes, and a curved line for the mouth. The visualization uses plain SVG elements—`circle`, `line`, and a `g` group—within an HTML page, styled with attributes like `fill`, `stroke`, and `stroke-width`. The React framework is not actively used despite being listed; the code relies directly on the browser’s native SVG support to draw the face on a 960×500 canvas.

Apr 12, 2023