Skip to main content
SimilarExport ZIP
100%

Shirt

✓ Published0🌍 Public
YYashashvi Singh
Last edited May 21, 2022
Created on Mar 29, 2022
Forked from HTML Starter

This example draws a stylized shirt using React and D3. It shows three stacked rectangles in blue tones forming the shirt’s body and a semicircular arc for a collar. The SVG shapes are produced with JSX elements, while the arc path is generated by D3’s `arc()` function. The code uses ReactDOM to render the visualization, and D3 v7 provides the geometric path calculations.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3_

This example renders a single SVG arc using React and D3. The page displays a heading and a small 100x100 pixel SVG containing a path generated by `d3.arc()` with fixed inner and outer radii, plus start and end angles. The arc is drawn via the `d3.arc()` function’s output, which is assigned to the `d` attribute of an SVG path element. The code uses React 17 and D3 v7, with the visualization embedded directly in a JSX component and rendered through `ReactDOM.render`. The data is hardcoded in the arc parameters.

Kkhenghuatlim
73% match
Loading thumbnail…

03-react & d3

This example shows a yellow circle with a black stroke, which is supplemented by two eyes, a nose, and an arc-shaped mouth to form a simple face. Built with the React framework, the visualization uses SVG elements like `circle`, `path`, and `rect` to render the components. The code imports the `arc` function from the d3 library to generate the mouth's path, and it uses ReactDOM to render the composed `<App />` directly into the HTML root element.

Mmygynt679
72% match
Loading thumbnail…

d3-svg-play-1

This example demonstrates basic SVG shape rendering and interaction within a React page. It shows a static composition of circles, rectangles, lines, and a complex path with embedded arc commands, plus a group containing a red-striped circle, text, and a crossing line. The visualization uses raw SVG elements styled with CSS, where circles transition to white fill and change to a semi-transparent red on hover. The page includes an “Hello HTML!” heading and sets the SVG canvas to 960 by 700 pixels, rendering shapes directly without external data.

JJP Adams
72% match
Loading thumbnail…

assignment 1

This example renders a stylized, symmetrical face using React and D3 v7. It displays a large circular head with two outer ears, white eye scleras with black pupils, red cheeks, and a grey mouth created via the `d3.arc` path generator. The composition layers SVG ellipses, circles, and paths positioned with coordinate transforms, all drawn with static SVG elements inside a React component. The visualization relies on declarative JSX markup and D3’s `arc` helper but does not implement interaction or data binding.

KKerim
71% match
Loading thumbnail…

D3 SVG Primitives

This example demonstrates basic SVG shape primitives rendered with D3.js in a React environment. It displays rectangles, circles, ellipses, and lines with static styling, showcasing fundamental SVG element creation. The code uses D3 version 4 selections to append shapes directly to an SVG canvas, loading data from a CSV file for positioning. A second version uses `d3.scaleLinear` and `d3.interpolateBlues` to map data values to circle radii and fill colors, with mouseover and mouseout events controlling opacity to highlight individual circles.

FFahimeh Saleh
71% match
Loading thumbnail…

D3 Intro with React

A simple SVG face rendered through React demonstrates how React’s declarative component model can be used to draw D3-like visualizations. Using React and ReactDOM, the code declaratively defines three circles—a yellow face with a black stroke and two black eyes—positioned via hardcoded coordinates and inline style attributes for stroke width. The SVG output is static, with no data or interaction; it illustrates the basic integration of React’s JSX syntax with SVG primitives to produce vector graphics.

MMark Odayan
71% match
Loading thumbnail…

face with d3.js!

This example shows a stylized face built with React and D3, rendered as SVG elements such as circles, ellipses, rectangles, and a path for the mouth. The code uses D3’s `select` to append and style each shape, and the `arc` helper to generate the mouth’s curved path. Static SVG markup provides additional decorative shapes, while the React entry point attaches the D3-generated face to the scene.

66264kusuma@gmail.com
71% match
Loading thumbnail…

Face using HTML, CSS, SVG

This example renders a stylized face as an SVG graphic using React and D3. It uses D3’s arc generator for the mouth, along with HTML and CSS for layout and styling. Circles are used for the head and eyes, while a rotated rectangle forms the nose, all positioned within an SVG canvas. The code is a bare-minimum starter demonstrating how to combine React’s declarative JSX with D3’s shape utilities for custom data visualization. The face is centered on a fixed 960×500 viewport.

LLakshyaSatpal
71% match