Harish.G

@harish639·7 public vizzes

Fork of Not so Smiley Face

This example shows a simple smiley face built with React and D3, rendered as an SVG. A yellow circle serves as the head, with two black eyes positioned symmetrically, and a mouth drawn as a curved arc. The mouth is generated using the D3 `arc` function, which specifies inner and outer radii, a start angle, and an end angle to create the smile shape. The SVG is sized at 960 by 500 pixels, and the face is composed of basic circle and path elements positioned using SVG transforms.

Sep 22, 2023

Loading thumbnail…

Fork of D3-1: Making a face

A yellow face with blue eyes, eyebrows, and a curved mouth is drawn in an SVG canvas using D3 v7. The visualization constructs the face from primitive shapes—circles for the eyes, an arc-generated path for the mouth, and rectangles for the eyebrows. The eyebrows animate vertically over four seconds using D3's `transition` and `duration` methods, shifting them up and then back down. The code explicitly sets dimensions and positions based on the SVG's width and height attributes.

Sep 22, 2023

Loading thumbnail…

Fork of HTML Starter

This example demonstrates the minimal setup for an HTML page with CSS and JavaScript. It renders a large, centered text message, “Hello HTML!”, using a CSS class applied to a div element. The page relies entirely on standard HTML and CSS—there are no external libraries or data sources involved. The styling is defined within a `<style>` block in the page’s head, and the content is static. It serves as a bare-bones starting point for web-based visualization projects, showing how to structure a basic document with inline styling and markup.

Sep 21, 2023

Loading thumbnail…

Fork of Fork of Create a face with d3.js!

A yellow smiley face rendered in SVG with D3.js v7 shows animated eyebrows that bounce up and down. The face is built from basic shapes: a circle for the head, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth. D3 transitions animate the eyebrow group's transform over two-second intervals, while the geometry is positioned using translation and explicit pixel offsets. The code demonstrates modular imports from the d3 package, specifically `select` and `arc`.

Sep 21, 2023

Loading thumbnail…

Fork of Create a face with d3.js!

This example shows a cartoon face constructed with D3.js v7, featuring a yellow head, eyes, eyebrows, and an arc-based mouth. The face is centered in a 960x500 SVG canvas using data-driven attributes for positioning. D3 transitions animate the eyebrows 50 pixels upward for two seconds, then back down. The code imports `select` and `arc` from the D3 library, loads D3 via UNPKG, and builds the shape using SVG circles, rectangles, and a path with `d3.arc()`.

Sep 21, 2023

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays a single, large “Hello HTML!” message centered on a blue background, demonstrating basic webpage structure. The code uses plain HTML with inline CSS styling, including a custom font-family and font-size, to control the visual presentation. The page relies on standard browser rendering of the HTML and CSS rather than any external libraries or JavaScript functionality.

Sep 21, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays the message “Hello HTML!” in large, blue, centered text using the CSS class `.message` with a font size of 13em and the font family Sanskirt. The page consists of a single HTML file with embedded CSS styling and no external JavaScript libraries. It serves as a minimal demonstration of how CSS and HTML can be combined to create a static, styled text element. The rendering approach relies entirely on the browser’s native rendering of HTML and CSS, with no data visualization or interactive behavior present.

Sep 21, 2023