Narendra shandilya

@NARENDRA1998KUMAR·7 public vizzes

Let's make a face with D3.js

This example builds a stylized face entirely from SVG shapes using D3.js v5’s `select` and `arc` generators. The face is centered via a translation transform, with each facial feature—like eyes and mouth—drawn as arc-based paths appended to a group element. The code reads the SVG’s width, height, and exponent attributes to position the elements, though the exponent attribute is unused. The rendering is purely vector-based, with no external data source, and relies on D3’s declarative DOM manipulation to construct the composition.

May 31, 2021

Loading thumbnail…

Loading and Parsing Visulaisation CSV data

This example displays a concise summary of a CSV dataset loaded from a remote URL. It shows the file size in kilobytes, the total number of data rows, and the column count. The visualization uses D3.js version 6.7.0, specifically the `d3.csv` method to fetch and parse the data. The resulting statistics are then rendered as text within a large `<pre>` element on the page.

May 31, 2021

Loading thumbnail…

Happy Smiley

A yellow smiley face rendered as SVG in a React component, with two black eyes and a circular mouth created using a D3 arc path generator. The face circle is centered with a black stroke, while the eyes and mouth are positioned relative to the center using hardcoded offsets and radii via the `d3.arc()` API. The entire SVG is drawn inside a `<g>` transform translation, and the code uses React 17 and D3 v6 to compose the static visualization.

May 29, 2021

Loading thumbnail…

Happy smiley

A yellow smiley face is rendered as an SVG using React. The face consists of a large yellow circle with a black stroke, and two black circles representing eyes, positioned symmetrically around the center. The example demonstrates using React’s `ReactDOM.render` to mount a functional component that returns SVG elements. It defines constants for dimensions and offsets to position the face and eyes, and uses React’s JSX syntax to create the circles. The rendering is client-side, with a fixed viewport size of 960 by 500 pixels.

May 27, 2021

Loading thumbnail…

Fork of Happy smiley

This example renders a smiley face as an SVG graphic using React’s declarative `createElement` calls within a functional component. It shows a large yellow circle with a black stroke and one eye placed offset from the center, with a second eye missing from the code. The drawing uses hard-coded dimensions for the viewport, center coordinates, and radii, with ReactDOM rendering the tree into the DOM. The visualization demonstrates basic geometric composition and positioning through SVG circle elements.

May 27, 2021

Loading thumbnail…

Happy smiley

A single yellow circle with a thick black outline and no facial features renders on a blank page. The React application uses `ReactDOM.render` to mount an SVG element within an HTML document. The circle is positioned at the center with explicit `cx`, `cy`, and `r` attributes, while a `stroke-width` of 10 defines the border. The code currently displays only the base shape, with commented-out instructions for adding eyes, suggesting a work-in-progress toward a smiley face. No interactive behavior or additional data is implemented.

May 27, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays the static text "Hello HTML" in the center of the page at a massive 13-em font size. It uses plain HTML, embedded CSS for styling and centering, and a JavaScript snippet that logs "Hello JavaScript!" to the console. The visualization is a minimal starter template built without external libraries, demonstrating basic web rendering through the browser's native DOM and console APIs for development.

May 26, 2021