imayankbisht

@imayankbisht·4 public vizzes

Fork of Overlapping Circles

This example layers a CSS-clipped SVG circle with semi-transparent HTML text to create a hybrid visualization. The code uses React to render an SVG viewBox containing a clipPath element filled with randomly positioned text elements via JSX math, then applies the clip path to a red circle using `clip-path` and `xlink:href`. The embedded D3 script generates a word cloud with `d3.layout.cloud()`, positioning words like "Hello" and "Coding" across two overlapping black-stroked circles. While the React portion fixes the text positions randomly, the D3 part animates word placement through the cloud layout algorithm.

Sep 29, 2021

Loading thumbnail…

Fork of Hello HTML

This fork of a bare HTML page presents a simple SVG scene: the word "My cat is Grumpy!" clipped inside a red circle. The page defines the text within an SVG `clipPath` element, then uses it to mask a `circle`. The circle is referenced via `<use>` and filled with red, demonstrating a straightforward clip-path application. The HTML uses raw SVG markup and inline tags, with no external JavaScript libraries, and includes a commented-out CSS animation for potential future use.

Sep 29, 2021

Loading thumbnail…

CustomizedCharts

The example displays two overlapping circles with scattered numeric labels and a central intersection path, rendered as an SVG via React. It uses D3 v7’s `arc` import and manual geometry to calculate circle intersection points. The visualization relies on React state and effects to compute intersection coordinates, with random font sizes and positions for text elements inside the first circle. Rendering occurs client-side in the browser using ReactDOM, with no external data source.

Sep 28, 2021

Loading thumbnail…

Fork of psuedo visualizations - venn diagram

This example shows a simple Venn diagram with two overlapping circles, displayed on a 960-by-500 SVG canvas with a title and a black border. The larger blue circle transitions to a darker blue on hover, while two smaller white-stroked circles mark the intersection regions. The visualization is built purely with static SVG elements—`circle` and `rect`—using inline CSS transitions for the hover effect. It cites the Data Visualization Catalogue as its source and renders without any JavaScript libraries, relying on the SVG’s native styling and interactivity.

Sep 28, 2021