Vamshisoleti09

@Vamshisoleti09·8 public vizzes

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse a CSV file from a remote URL using D3.js version 7. The page fetches movie data from a GitHub gist and displays summary statistics about the dataset, including its size in kilobytes, row count, and column count, within a styled HTML `<pre>` element. It uses the `d3.csv` method to asynchronously fetch and parse the data, `d3.csvFormat` to calculate the data size, and plain DOM manipulation to update the page content. The interface is simple, with styled headings and a centered message container showing the loaded information.

Mar 1, 2023

Loading thumbnail…

Fork of Fork of Cat smiley

This example renders a stylized cat smiley face using React and D3.js, with SVG shapes including circles for the head and eyes, ellipses, lines, and arcs for facial features. It uses D3's `arc` API to define the mouth, eyes, ears, and teeth, and applies rotations and translations to position them. The code also uses ReactDOM to render the SVG component into the DOM, with fixed dimensions of 800 by 460 pixels and a centered coordinate system.

Feb 22, 2023

Loading thumbnail…

Fork of Cat smiley

This visualization shows a stylized cat smiley face constructed from geometric shapes, including a purple circular head, eyes, ears, a mouth created with an arc generator, and decorative colored lines. The code uses React for component rendering and D3 v7’s `arc()` API to define the mouth, eye, and ear paths, all drawn as SVG elements. The face is centered within an 800×460 viewport, with fixed coordinates and transforms positioning each feature, such as the rotated ear arcs and translated mouth.

Feb 22, 2023

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A smiling face rendered in SVG animates its eyebrows upward and downward in a looping two-second cycle. The face is constructed entirely through D3.js v5 DOM manipulation, using `select` to target the root `svg` element, then appending and positioning circles for the eyes, rectangles for the eyebrows, and a path built from `arc` for the mouth. The eyebrow animation is driven by chained `transition().duration(2000)` calls that alternately shift the parent group’s `transform` attribute, demonstrating basic tweened state changes on SVG attributes. The composition is centered via a translated group, with hardcoded spacing values for facial features.

Feb 22, 2023

Loading thumbnail…

Fork of Tweak a Face Assignment by Enze Liu

This interactive SVG renders a stylized panda face built with React and D3 v6. Geometric primitives define the face: white circles form the head, red circles create blush, ellipses shape the eye sockets, and arcs generate the eyes, nose, mouth, and ears. The code uses `d3.arc()` to compute path data for each curved component, with transformations like rotation and translation positioning features around the canvas center. The composition demonstrates how combining basic shapes with D3’s arc generator can construct a recognizable character within a 960x500 viewport.

Feb 22, 2023

Loading thumbnail…

Fork of Fork of homework smiley face

A stylized smiley face is drawn using SVG primitives within a React component, centered on a canvas. The face is composed of a large white circle with a black stroke, two red-outlined eyes with green and purple pupils, and a brown mouth drawn as a D3 arc path. The code constructs the mouth with `d3.arc`, setting inner and outer radii and angular spans. Additional colored lines create eyebrows and hair-like features, all rendered as SVG elements within a `<g>` transform.

Feb 21, 2023

Loading thumbnail…

Fork of Fork of Smiley Face Part II

This example shows a smiling face constructed from a yellow circular face, two eyes, and a mouth. The face is built using React functional components, with the `Eyes` and `Smile` components each returning inline SVG elements. The `App` component positions these parts using SVG `<g>` transforms with translations, rotations, and scaling, and applies styles from CSS classes. The eyes and mouth contain multiple layered shapes with gradients and custom paths, rendered in SVG.

Feb 21, 2023

Loading thumbnail…

Fork of Fork of Let's Make a Face Part I

This example builds a stylized face from reusable React components, layering a gradient background circle, ellipses for eyes, and a mouth arc into an SVG canvas. The face is centered using a FaceContainer that applies a translation, while D3’s `arc()` generator defines the mouth and tooth shapes. Teeth are rendered as white arcs with black dividing lines, and a linearGradient fills the background. The code uses d3.v7 and React 18, with all coordinates and dimensions passed as props to control facial feature placement.

Feb 21, 2023