Skip to main content
Log in
S

swathi24288

@swathi24288·7 public vizzes

Loading thumbnail…

Making a BarChart

This example shows a simple yellow circle with two black eyes and a curved mouth, resembling a smiley face rendered as SVG. The drawing uses D3 version 6 API functions, including `select` to reference the SVG element, `append` to create circles and a path, and `arc` to generate the mouth’s curved shape based on specified radii and angles. The chart uses a fixed 960×500 coordinate space with no external data, instead relying on manual positioning and styling through attribute assignments.

Oct 13, 2020
Loading thumbnail…

Lets Make a Face with D3

This example builds a simple cartoon face from SVG primitives using D3 v6. A yellow circle forms the head, two black circles serve as eyes, and a mouth is drawn as a path generated with the `d3.arc()` generator. The code selects the SVG element, reads its width and height attributes, and positions each shape relative to those dimensions. The arc’s inner and outer radii, along with start and end angles, define the mouth’s curved shape.

Oct 13, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates simple geometric shapes and styling rules using SVG elements and CSS. It shows a circle, rectangle, and lines grouped with transforms for scaling and positioning, while CSS classes control stroke properties. The code uses SVG’s `<circle>`, `<rect>`, `<line>`, and `<path>` elements directly, with the `transform` attribute for translations. The `styles.css` file applies specific stroke colors and widths to elements within the `.lines` class. The rendering is purely SVG, with inline fill and stroke attributes combined with external stylesheet rules.

Oct 8, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates simple geometric shapes and styling rules using SVG elements and CSS. It shows a circle, rectangle, and lines grouped with transforms for scaling and positioning, while CSS classes control stroke properties. The code uses SVG’s `<circle>`, `<rect>`, `<line>`, and `<path>` elements directly, with the `transform` attribute for translations. The `styles.css` file applies specific stroke colors and widths to elements within the `.lines` class. The rendering is purely SVG, with inline fill and stroke attributes combined with external stylesheet rules.

Oct 7, 2020
Loading thumbnail…

HTML Cars Report

This HTML Cars Report displays a bulleted list of three used vehicles, each pairing a model year, make, model, and price. The visualization emphasizes the first vehicle’s entry, a 2000 Ford Ecosport, with red colored text via the `.highlighted` CSS class, while the remaining two entries appear in the document’s default monospace styling. The report relies solely on plain HTML markup with an external stylesheet to set the 45-pixel monospace typeface and apply the highlight, presenting static data without any JavaScript libraries or interactive components.

Oct 1, 2020
Loading thumbnail…

HTML Starter

This example demonstrates a minimal web page that displays the text "Hello HTML" in large, centered type on a white background. It serves as a foundational template for HTML projects. The visualization is created using a single `index.html` file that employs an inline `<style>` block for layout and a `<script>` tag to log a message to the browser’s console. No external libraries or data sources are used, showcasing the basic structure of an HTML document.

Sep 30, 2020
Loading thumbnail…

HTML Starter

This example demonstrates a minimal web page that displays the text "Hello HTML" in large, centered type on a white background. It serves as a foundational template for HTML projects. The visualization is created using a single `index.html` file that employs an inline `<style>` block for layout and a `<script>` tag to log a message to the browser’s console. No external libraries or data sources are used, showcasing the basic structure of an HTML document.

Sep 30, 2020