sucharitha.yadala@sharda.ac.in

@sucharithayadala-svg·6 public vizzes

Fork of HTML Starter

A red SVG face is drawn on a 960x500 canvas, with the background styled directly via D3's `style` method. The visualization uses D3 v5 to select the SVG element and apply a red background color, while a separate JavaScript file logs "Making Face" to the console. The example demonstrates basic D3 selection and styling with SVG, based on an HTML starter template.

Jan 31, 2026

Loading thumbnail…

Fork of React & D3 Starter1

This example demonstrates a minimal integration of React and D3, displaying the text "Hello D3 & React" in a large, centered message. The React component uses a `useRef` hook and a `useEffect` to call D3’s `select` function, which directly sets the text content of the referenced DOM element. The application is rendered via `createRoot` from `react-dom/client`, while D3 is imported as a module through an import map.

Jan 30, 2026

Loading thumbnail…

Fork of HTML Starter

This example displays a simple red rectangular SVG canvas as a static visual. The code selects the SVG element using D3 v5 and applies a red background color through the `style` method. The project structure includes separate files for HTML, CSS, and JavaScript, with the main logic in `index.html` and a basic `console.log` in `index.js`. The visualization demonstrates basic D3 selection and styling without any data-driven elements or interactions.

Jan 30, 2026

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black outlines is drawn in SVG, featuring two eyes, eyebrows, and a mouth. The face is centered on a 960x500 canvas using an SVG group with a translate transform. The code uses D3.js v5 with the `select` API to target the SVG element, and the mouth is created using the `arc` function to generate a path with inner and outer radii. The eyebrows animate vertically through a chained transition, moving down 50 pixels and back over two seconds each, using D3's `.transition()` method.

Jan 30, 2026

Loading thumbnail…

Fork of Test

This example displays a single static message, “HTML!”, centered on the page using cascading style sheets. The visualization consists of a plain-text DOM element styled with an extremely large font size and text alignment, rendered through the HTML, CSS, and JavaScript files. The JavaScript initializes a console log statement, while the main visual output relies solely on CSS properties rather than any charting or drawing libraries. No data source, animation, or interactive behavior is present in the code.

Jan 28, 2026

Loading thumbnail…

Fork of React & D3 Starter

This example demonstrates how to integrate React with D3, rendering a static smiley face using D3’s SVG generation inside a React component. The D3 code creates a yellow circle with `d3.arc` for the mouth and simple SVG circles for the eyes. Separately, a React `useEffect` hook updates the DOM text content to display "Hello D3 & React." The project uses React 19, `react-dom/client`, and D3 v7, with the component managing its own ref via `useRef` to attach D3 selections.

Jan 28, 2026