Skip to main content
Log in
M

muskan20bbad11

@muskan20bbad11·11 public vizzes

Loading thumbnail…

Making a bar graph using text file

This example visualizes country populations as a horizontal bar graph, ranking ten nations from China to Mexico by their 2018 population estimates. The graphic encodes each country's population value as the length of its corresponding bar. The visualization is built with D3 v7, loading data from a CSV file using the `csv` function, transforming the population field to numeric values, and scaling the bars linearly using `scaleLinear` to map data to screen coordinates.

Apr 13, 2023
Loading thumbnail…

Creating a line

This example shows two ways to draw a single blue line using inline SVG markup. The first segment is a simple `<line>` element that stretches diagonally from the top edge to the middle of the canvas. The second part uses a `<path>` element with a `d` attribute containing absolute coordinates to continue the line through several sharp turns before ending near the top. Both shapes share the same stroke color and width, creating a continuous visual stroke. The code relies solely on native SVG, with no external libraries or data processing.

Apr 10, 2023
Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML!” centered on the page, styled with a large font size using CSS. It is built from plain HTML and CSS, with the message rendered directly in the document body. The page uses no external libraries or JavaScript APIs, serving as a minimal demonstration of static content rendering in the browser. The styling is applied via a `.message` class, and the layout is controlled by text alignment and font-size properties.

Apr 10, 2023
Loading thumbnail…

Fork of Fork of HTML Starter

This example displays a centered greeting, “Hello HTML!”, in large text on a plain page. The code uses a CSS class to set the font size and text alignment, with the message placed inside a div in the HTML body. It demonstrates a minimal setup combining HTML for structure and CSS for styling, with no JavaScript logic or external libraries involved. The rendering relies on the browser’s default layout and styled text.

Apr 10, 2023
Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML!” centered on the page, styled with a large font size using CSS. It is built from plain HTML and CSS, with the message rendered directly in the document body. The page uses no external libraries or JavaScript APIs, serving as a minimal demonstration of static content rendering in the browser. The styling is applied via a `.message` class, and the layout is controlled by text alignment and font-size properties.

Apr 10, 2023
Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML!” centered on the page, styled with a large font size using CSS. It is built from plain HTML and CSS, with the message rendered directly in the document body. The page uses no external libraries or JavaScript APIs, serving as a minimal demonstration of static content rendering in the browser. The styling is applied via a `.message` class, and the layout is controlled by text alignment and font-size properties.

Apr 10, 2023
Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This example renders a large, centered text element that reads “Hello HTML!” using a simple HTML page with embedded CSS and JavaScript. The message is styled with a font size of 13 em and center-aligned via the `.message` class. The code demonstrates the basic structure of an HTML document, using the `style` tag for CSS rules and a `div` element for the displayed content, without relying on external libraries.

Apr 10, 2023
Loading thumbnail…

Fork of Fork of HTML Starter

This example displays a centered greeting, “Hello HTML!”, in large text on a plain page. The code uses a CSS class to set the font size and text alignment, with the message placed inside a div in the HTML body. It demonstrates a minimal setup combining HTML for structure and CSS for styling, with no JavaScript logic or external libraries involved. The rendering relies on the browser’s default layout and styled text.

Apr 10, 2023
Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML!” centered on the page, styled with a large font size using CSS. It is built from plain HTML and CSS, with the message rendered directly in the document body. The page uses no external libraries or JavaScript APIs, serving as a minimal demonstration of static content rendering in the browser. The styling is applied via a `.message` class, and the layout is controlled by text alignment and font-size properties.

Apr 10, 2023
Loading thumbnail…

Shapes with CSS and SVG

This example demonstrates basic geometric shapes created with Scalable Vector Graphics (SVG) and styled through CSS properties. A pink circle and a blue rectangle are rendered inside an SVG container, each with a 10-pixel orange stroke and distinct fill colors. The code directly uses SVG elements such as `<circle>` and `<rect>` within an inline `<svg>` tag, while visual attributes like `fill`, `stroke`, and `stroke-width` are applied as presentation attributes. No external libraries or JavaScript are involved, relying entirely on native SVG markup for rendering.

Apr 10, 2023
Loading thumbnail…

Cars Report

This example presents a simple car sales report listing three vehicles with their prices, highlighting the 2012 Nissan Leaf in blue. The page uses a plain HTML unordered list for data display and a linked CSS stylesheet to control typography and emphasis. No libraries or JavaScript APIs are employed; the visualization relies solely on static HTML markup and CSS styling to convey the information. The author styles the body with a large monospace font, making the list readable at a glance.

Apr 10, 2023