AkhilaSiripurapu

@AkhilaSiripurapu·9 public vizzes

ICE5

This visualization displays metadata for a Goodreads customer dataset, including its size in kilobytes, row count, and column count. It uses D3 v7’s `d3.csv` to fetch a remote CSV file and `d3.csvFormat` to calculate the data length. The result is rendered as plain text inside a designated `pre` element, with a dark background and a centered SVG image from an external URL. The page includes links to view the raw dataset and is styled with CSS.

Feb 28, 2023

Loading thumbnail…

ICE5

This page displays metadata about a GoodReads customer dataset, including its size in kilobytes, row count, and column count. The visualization loads a CSV file from a GitHub gist using `d3.csv` and processes the data with `d3.csvFormat` to calculate the file size. It then updates the text content of a `<pre>` element via the DOM API. The page is styled with simple CSS, using coral backgrounds and centered headings, and runs on React with D3 v7.

Feb 28, 2023

Loading thumbnail…

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

This example demonstrates how to build a cartoon face using fundamental D3.js DOM manipulation, with animated eyebrows that move up and down over time. The face is rendered in SVG and includes features like eyes, blush, a nose, mouth, ears, teeth, hair, and a beard, all constructed from basic shapes. The code uses d3.select, d3.append, and transition methods for animation, and d3.arc to generate the nose and mouth paths. Data binding via d3.selectAll and enter() is used to create the teeth, while a for loop appends hair and beard rectangles.

Feb 25, 2023

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js! by kiran jyothi bodduluri - 11604571

This example builds a cartoon face using D3.js selection and data-joining methods to create SVG shapes including eyes, pupils, eyebrows, a nose, a mouth, ears, hair, and teeth. The face is assembled programmatically inside an SVG container, with each facial feature appended as a separate circle, rectangle, path, or polygon element. The code uses d3.select and append with chained attr calls to construct the static composition, which is centered via a translate transform. The visualization demonstrates fundamental DOM manipulation with D3 v7, applying CSS classes for styling facial features.

Feb 25, 2023

Loading thumbnail…

Fork of Danny Phantom Face

A stylized portrait of Danny Phantom is drawn as an SVG with React, inspired by the character's iconic appearance. The face, eyes, irises, pupils, and eyebrows are built with circles and rectangles, while the mouth is formed using a d3.arc-generated path. A polyline depicts the nose, and a polygon creates the spiky white hair. The composition scales to the browser window, with all elements positioned relatively and rendered using React DOM.

Feb 25, 2023

Loading thumbnail…

Fork of Smiley 1

This example renders a stylized face built from nested SVG circles, gradients, and paths. A green circle forms the background head, while a red inner shape, two eyes with colored irises, a yellow diamond, and an arc-based mouth create a cartoon expression. The code uses React components to structure the scene and `d3.arc` from D3 v6 to generate the mouth path. SVG linear gradients define the iris color, and transforms like `scale` and `skewX` position shapes within a central coordinate system.

Feb 25, 2023

Loading thumbnail…

Fork of The Vision!

This data visualization recreates the face of The Vision in a tribute to the WandaVision series. The SVG rendering constructs the character’s head from layered geometric shapes, including a green base circle, red stylized facial features, and gradient-filled eyes. It also depicts the yellow mind stone as a rotated rectangle above the forehead. The code uses raw SVG elements with a linearGradient definition and applies transforms like scale and skewX to build the composition.

Feb 25, 2023

Loading thumbnail…

Fork of D3 Face

A yellow circular face with black features, including eyes, eyebrows, and a frown, is rendered in SVG. The eyebrows animate upward and then return to their original position using a chained `transition.attr` in D3 v7. The code builds the face using `select`, `arc`, and `append`, with a `g` element centered via a transform. Static constants define the eye spacing, offsets, and mouth arc, all drawn within a 960 by 500 SVG canvas.

Feb 23, 2023

Loading thumbnail…

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

A yellow smiley face is rendered in SVG with D3.js, featuring circular eyes, a mouth shaped with the `d3.arc` generator, and rectangular eyebrows that animate upward and back via chained `transition` calls. Built with D3 v5, the code selects the SVG element, sets its dimensions, and uses `select` and `arc` imports to construct the face, while the eyebrows' positions are manipulated through `attr` transitions over two-second intervals.

Feb 21, 2023