xy co-ordinates

xy co-ordinates

This example shows a static arrangement of SVG shapes, including red rectangles and circles, positioned at fixed coordinates on a gray background. It demonstrates how React components render SVG elements using the `MyRect` custom component, which returns a `<rect>` element with position, size, fill, and opacity props. The visualization uses React 16 and D3 v5, with circles drawn directly inside an SVG container at varying x-coordinates based on an array mapping. The code defines the canvas dimensions and centers, but the displayed geometry remains fixed rather than interactive or data-driven.

89% match

Rectangles coordinates when translated

Five semi-transparent squares arranged around a common center demonstrate how SVG translation affects a rectangle’s coordinate system. A red, green, blue, and yellow square sit at the cardinal offsets from the origin, while a magenta square is centered at half the rectangle’s width and height. Using React with D3 v5, the `<g>` element’s `transform` attribute shifts all children via `translate(480,250)`. The code defines reusable `MyRect` components, passing explicit `xPos` and `yPos` props, and renders them into an SVG with a light gray background.

78% match

My React Starter

This example displays a 10 by 10 grid of circles, each with a radius of 20 pixels, positioned along diagonal lines where both the x and y coordinates increment by 100. The visualization is rendered as an SVG using React, with the circles generated by mapping over two arrays that define the coordinates. The code relies on React and ReactDOM to render the components, and the SVG is created directly within the JSX. The data is programmatically generated in loops, and the rendering approach uses native SVG elements within a React component.

77% match

My React Starter

This example renders a circular grid of empty rectangles using React and SVG. It generates 50 points along a sine and cosine curve, mapping the x-coordinate to `Math.cos` and the y-coordinate to `Math.sin`, each multiplied by a pixel scale of 800. The nested `.map()` calls draw a 50×50 matrix of square cells positioned at each coordinate pair, creating a wave-like pattern across the canvas. The code directly uses ReactDOM to mount the component into the root element.

76% match

Javascript inside html

This example shows three horizontal rows of ten magenta and cyan circles rendered as SVG inside a React application. The circles are generated from a fixed array of numbers, with each circle positioned along the x-axis and centered vertically. The code uses React and ReactDOM to mount the component into the DOM, mapping array elements to SVG circle elements with specified radii and fill colors. The visualization demonstrates static SVG rendering within a React component structure.

Circles Effect at the junctions

A grid-based visualization renders 960 small square cells across an SVG canvas, each colored with a random red-blue value to create a scattered circle-like effect at the junctions where cells meet. The code uses React 16.10 to generate the layout, mapping over arrays of coordinates to place every rectangle individually. The SVG elements are drawn with the `rect` API, and the fill color is computed dynamically using `rgb()` with a random multiplier. A larger square border outlines the overall composition, while the grid cells themselves use no stroke, producing a seamless visual pattern.

SVG fundamental

This example showcases fundamental SVG shapes—a red circle, a blue-bordered rectangle, a thick navy line, and a black path—all placed on a 960 by 500 coordinate system. The code uses raw SVG elements (circle, rect, line, path) within an HTML file, augmented by the React framework for structure. It demonstrates basic vector rendering and styling through attributes like fill, stroke, and stroke-width, providing a clear starting point for building more complex data visualizations.

Yyankesswang

Fork of React Starter

This example shows a grid of 40 by 60 red squares arranged across an SVG canvas, with each square’s width and height varying according to the cosine of its row index, creating a wave-like pattern of alternating sizes. The code uses React to render the SVG elements, with ReactDOM mounting the App component into the page. D3’s `range` function generates the row and column coordinates, while custom `makeSquare` functions produce the rectangles. The visualization demonstrates how React and D3 can be combined to generate dynamic, data-driven SVG layouts.

DDavid Emmanuel Katz