simrangajsinghani

@simrangajsinghani·8 public vizzes

Fork of Axes with React & D3

This example shows the top 10 most populous countries as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and manually renders axis ticks with SVG `<line>` and `<text>` elements. Data comes from the United Nations World Population Prospects 2019 CSV, loaded asynchronously via `d3.csv`, and bars are drawn as `<rect>` elements inside an SVG container.

Jun 24, 2023

Loading thumbnail…

Fork of Smiley Face Part II

A React-based SVG visualization renders a yellow smiley face, but the primary interactive element is a small circle that follows the mouse. The code uses React's `useState` and event handling to track the cursor's `clientX` and `clientY` coordinates, updating the circle's position on every `onMouseMove` event. The face itself is drawn with basic SVG `circle` elements, while the moving circle demonstrates dynamic state-driven rendering within the React component.

Jun 21, 2023

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL, displaying the file size, row count, and column count as text. It uses `d3.csv` to fetch and parse the CSS Named Colors dataset, then formats the results with `d3.csvFormat` and `Math.round`. The code also includes commented-out alternatives using `fetch`, `async`, and `await`, plus a nested promise example, but the active path relies on `d3.csv` and its `then` method to render the summary into an HTML `<pre>` element.

Jun 21, 2023

Loading thumbnail…

Fork of Smiley Face Part V

The example shows a smiling face rendered as SVG using React components, with a yellow circular background, two eyes, and a curved mouth. The code splits the visualization into separate ES6 modules—BackgroundCircle, Eyes, and Mouth—each defined as a React functional component. The mouth uses the d3.arc() API to generate its path with specified inner and outer radii and angle ranges, while React Fragments group the eye elements. The overall layout is centered within an SVG coordinate system defined by width and height constants.

Jun 21, 2023

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a smiling face built from overlapping SVG shapes: a yellow circular background with a black border, two dark eyes, and an arched mouth. The code constructs the face using React components, with the `BackgroundCircle`, `Eyes`, and `Mouth` each defined as separate functions. The mouth is drawn using the d3 `arc` function to generate a path with specified inner and outer radii and angles. All shapes are positioned relative to the center of an SVG canvas using a `transform` translation.

Jun 21, 2023

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a classic smiley face drawn with SVG shapes: a yellow circle for the head, two black circles for the eyes, and a curved arc for the mouth. The face is centered in the browser window and scales its radius relative to the viewport height. The code uses React to render the SVG elements and D3’s `arc()` API to generate the mouth path, specifying the inner/outer radii and start/end angles. The dimensions and positions are computed from `window.innerWidth` and `window.innerHeight`, with the face’s features offset from the center.

Jun 21, 2023

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a simple yellow smiley face built from three SVG circles: a large face outline and two smaller eyes. It uses React (version 16.9) to render the SVG elements declaratively, computing positions from constants like `centerX`, `centerY`, and `eyeOffsetX`. The face is drawn with a yellow fill, black stroke, and a stroke width of 10, while the eyes are plain black circles. The code defines the layout entirely with JavaScript variables and React components, avoiding any external data or geometry libraries.

Jun 20, 2023

Loading thumbnail…

Fork of Hello HTML

A simple SVG face renders in a 960×500 viewport using declarative circles: a yellow head with a black stroke, plus two smaller unfilled circles for eyes. The page uses raw HTML and SVG markup with no JavaScript libraries, instead relying on inline SVG elements and CSS to hide overflow and reset the body margin. It demonstrates basic vector shape composition in a static, self-contained webpage.

Jun 20, 2023