Neenu514

@Neenu514·11 public vizzes

Fork of React Starter

This example shows a single red heading that reads “Hello Neenu,” rendered at a very large scale using React. The code imports React and ReactDOM, defines an `App` component with a `styles` object setting the font size and color, and then calls `ReactDOM.render` to mount the component into the `#root` div. It relies on the UMD builds of React 16.13.1 and ReactDOM, loaded from unpkg, with the browser displaying the output in the `index.html` file.

Jul 28, 2021

Loading thumbnail…

Fork of React Starter

This example displays the text “Neenu Subin” in large red lettering against a blank page. It is built with React and ReactDOM, using a `styles` object to set the font size and color directly on the `<h1>` element. The page loads React 16.13.1 from a CDN and renders the component into a `#root` div. The styling is applied inline, making the text the sole focus of the visualization.

Jul 26, 2021

Loading thumbnail…

Fork of React Starter

This example shows a single React component rendering the text "Hello" in a large, centered font. The app uses React and ReactDOM to mount the component into a div with the ID `root`. The visual appearance is controlled by a CSS class called `message`, which sets the font size and text alignment. The code relies on the `ReactDOM.render` API to display the element on the page.

Jul 26, 2021

Loading thumbnail…

Fork of React Face

This example renders a plain, empty React component. The page loads React and ReactDOM from CDN links, uses a root `<div>` in the HTML, and mounts the `App` component via `ReactDOM.render`. The stylesheet sets a large font size and hides overflow, suggesting a minimalist, full-viewport display, but no visual content or data is actually drawn.

Jul 25, 2021

Loading thumbnail…

Fork of React Starter

This example shows a React application that renders a static page. The code imports a `Book` component and displays a heading with the text “Hello Neenu”. The application uses React and ReactDOM, loaded via CDN and local imports, to structure a simple, single-element interface. The `App` component calls `ReactDOM.render` to mount the `Book` component into the HTML element with the ID `root`. The page includes minimal CSS styling for the message, but no interactive or data-driven behavior is present.

Jul 16, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example displays a single yellow circle with a thick black outline, drawn as a static smiley face component within a React application. The visualization uses the React 16.9.0 library to render an SVG element, with circle attributes like `cx`, `cy`, `r`, `fill`, and `strokeWidth` defined inline in JSX. The code mounts the component to the DOM via `ReactDOM.render`, and the accompanying embedded YouTube video documents the implementation process. The SVG canvas is set to 960×500 pixels, though only one circle is currently visible in the rendered output.

Jul 12, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a React-based interactive counter that displays a numerical count in large purple text with increment and decrement buttons. The code uses React’s `useState` hook to manage the count state, updating the displayed value when buttons are clicked. Rendering is done via ReactDOM into an SVG-capable HTML page, though the actual display is HTML text, not SVG shapes. The included commented-out SVG markup suggests a prior smiley-face visualization, but the current rendering focuses solely on the counter. CSS controls button sizing and page overflow.

Jul 11, 2021

Loading thumbnail…

Smile Please

A smiling face built with SVG shapes animates its eyebrows upward and downward in a repeating sequence. The visualization uses D3.js to construct the face from circles for the head, eyes, and mouth, with rectangles for the eyebrows. The mouth is drawn using the `d3.arc()` path generator, while the eyebrow motion is driven by chained `transition().duration(2000)` calls that shift the group’s transform attribute. The static HTML includes an incomplete inline script, but the working code relies on D3 selections and attribute manipulation.

Jun 27, 2021

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that uses D3.js to apply an error style to a paragraph. The page contains static text reading "This page contain's error," and a D3 selection (`d3.select("p")`) assigns a CSS class named `error` to that paragraph, turning the text red and increasing its font size to 72 pixels. The code relies on the D3 v4 library loaded from a CDN, along with inline CSS defining the visual error styling. No data sources or dynamic behaviors are involved beyond this simple class manipulation.

Jun 26, 2021

Loading thumbnail…

Fork of Smiley face part 1

A yellow circle with two smaller black circles for eyes forms the first step toward a smiley face. The example uses React to render SVG shapes directly, with the outer face drawn as a single `circle` element and the eyes as additional circles, all positioned via explicit `cx` and `cy` coordinates. The chart includes a black stroke outline and yellow fill, with no interactive or data-driven behavior beyond static geometric composition. The code runs in a React root using `ReactDOM.render` and imports D3 v6, though no D3 functions are invoked.

Jun 19, 2021

Loading thumbnail…

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

A smiley face rendered with SVG circles in D3.js demonstrates basic DOM manipulation by drawing a yellow head with two black eyes. The example uses D3 v5 to select SVG elements and bind data, with the page structure defined in HTML and styled through CSS. Although the code includes the potential for moving eyebrows, the current implementation only presents a static face with fixed eye positions. The visualization serves as a simple introduction to D3.js for creating and controlling graphical elements within an SVG canvas.

Jun 15, 2021