cm

@CHANDRAMOHANnegi·4 public vizzes

Fork of React & D3 Starter

This example presents a scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis. It demonstrates a decoupled React and D3 integration pattern for scalable projects, rendering circles as SVG elements within a React component. The code uses D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, while React manages component state and lifecycle. Data is loaded asynchronously from a CSV file using D3’s `csv` function, with the visualization wrapped in a reusable `viz` function.

Jul 18, 2023

Loading thumbnail…

Fork of D3 Starter

This example demonstrates how to create a geometric pattern using D3 version 7 with SVG masks, combining horizontal and vertical striped rectangles that intersect to form a cross-shaped design. The visualization uses `d3.range` to generate 100 rectangles in each direction, applying two complementary SVG masks with circles to reveal or hide portions of the stripes. Additionally, the page displays a small dataset of names and numbers as text elements positioned along the top of the viewport, using D3's data join pattern with `selectAll` and `join`. The code imports `select` and `range` from the D3 library.

Jul 18, 2023

Loading thumbnail…

Fork of React Starter

This React and SVG example renders a grid of horizontal and vertical lines that form a circular composition. The code uses SVG mask elements to define two complementary circular regions, then maps over arrays to generate 100 thin rectangles in each orientation. The first mask uses a black background with a white circle to reveal vertical stripes, while the second mask uses inverted colors to reveal horizontal stripes. The result is a generative pattern that follows Sol LeWitt's conceptual drawing style.

Jul 18, 2023

Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic SVG shape rendering with a large centered text message. It displays circles, a rectangle, a line, and a path element, each styled with various fill, stroke, and stroke-width properties. The code uses raw SVG markup within an HTML page, with CSS controlling the .message class for typography. JavaScript and external libraries are not utilized; the visualization relies solely on static SVG elements and inline styling.

Jul 16, 2023