Prerna Mishra

@Prerna99-star·7 public vizzes

Lets make a face with D3.js!

This example draws a simple face by creating a large circle centered in an SVG canvas using D3.js. The code appends a single circle with a radius of 200 pixels to the SVG element, positioned at the center of a 960 by 500 viewport. It uses D3 v5’s `select` and `append` methods to manipulate the SVG, with styling applied through external CSS classes. The visualization demonstrates basic shape creation and attribute setting in React, rendering the result as static vector graphics.

Jun 13, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic geometric shapes—a circle, rectangle, line, and path—using raw SVG elements within a React project. It shows how CSS classes can style SVG elements, as seen with the `.lines` class applying stroke attributes to lines and paths. The code uses inline SVG attributes for positioning and transform, alongside external CSS to control visual properties like stroke color, width, and line joins. The rendering approach relies solely on SVG, with no additional JavaScript libraries beyond the base React setup.

Jun 13, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering within a React-based visualization gallery. It displays a red circle and a rectangle on a 960 by 500 canvas, using plain SVG elements defined directly in the HTML. The styles.css file applies a global reset and adds a `.highlighted` class that turns text red, though the shapes themselves use default styling. The implementation relies on core SVG APIs (`circle` and `rect`) rather than higher-level libraries like d3, showcasing minimal markup for static geometric figures.

Jun 13, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example displays two basic SVG shapes—a circle and a rectangle—positioned on a 960 by 500 canvas. The page uses plain SVG markup within an HTML file, styled by an external CSS stylesheet that resets the body margins and defines a `.highlighted` class (though not applied to the shapes). The rendering relies on native SVG elements like `<circle>` and `<rect>`, with no JavaScript or React interaction visible in the code.

Jun 13, 2020

Loading thumbnail…

HTML Car Report

This example displays a static list of used cars with prices from a JSON-like array of values, rendered as plain HTML elements. It shows three car listings, with the first entry highlighted in red to draw attention. The page uses basic HTML structure and CSS styling, with a monospace font and large text size for readability. The code relies on raw HTML tags and a linked stylesheet, rather than any JavaScript libraries or data visualization APIs.

Jun 13, 2020

Loading thumbnail…

HTML Car Report

This example presents a simple car report as a static HTML list, displaying three used vehicles with their model years and prices. The page is built with plain HTML and styled using a CSS rule that sets the base font size to 24 pixels. It uses no JavaScript libraries or frameworks, relying solely on semantic markup and external stylesheet linking. The data is hardcoded directly in the list items, making it a minimal demonstration of basic document structure rather than an interactive or data-driven visualization.

Jun 13, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered on the page at a very large font size. It uses plain HTML and CSS within a single `index.html` file, with the `body` element configured for text alignment and a `13em` font size. The page is a minimal starter template, demonstrating how to render static content without JavaScript or external libraries.

Jun 13, 2020