Sravan0818

@Sravan0818·6 public vizzes

Welcome to ICE-5

This example demonstrates how to load and summarize a CSV dataset from a GitHub gist using D3 v7. The page displays a large green text block reporting the file size in kilobytes, row count, and column count, alongside a static SVG image. The code uses `d3.csv` to fetch the remote data and `d3.csvFormat` to measure its size, updating the DOM via `textContent`. Styling is applied through plain CSS in the HTML file, with no interactive charts or visual encodings beyond the textual summary.

Feb 22, 2022

Loading thumbnail…

Welcome to ICE-5

This example demonstrates a basic D3.js workflow for loading and summarizing CSV data within a React-based HTML page. It displays a header, a static SVG image, and a text summary showing the file’s size in kilobytes, row count, and column count. The code uses `d3.csv` to fetch the data from a GitHub Gist URL, `d3.csvFormat` to calculate its size, and standard DOM manipulation to insert the summary into a `<pre>` element. Styling is applied via embedded CSS.

Feb 22, 2022

Loading thumbnail…

Smiley Task

A smiling face built from basic SVG shapes is rendered using React and D3.js. The code constructs a face with a red circle, two black eyes with white highlights, and a mouth drawn using D3's `arc()` generator with specific inner and outer radii and angle ranges. The SVG elements are positioned via D3-computed coordinates and React’s declarative JSX syntax, with dimensions and offsets defined as constants. The visualization demonstrates simple geometric composition within a static, non-interactive layout.

Feb 18, 2022

Loading thumbnail…

Fork of Fork of Smiley Face Part II

The visualization depicts a stylized smiley face, composed of two distinct SVG components: a pair of detailed, multi-layered eyes and a stylized smile. Rendered using React and inline SVG within a 960x500 viewport, the face is assembled by positioning these components with transform attributes, including translation, scaling, and rotation. The overall composition is an artistic, non-data-driven illustration. The code relies on React's declarative syntax to define SVG elements like `ellipse`, `path`, and `circle`, with styling applied via CSS classes. The resulting graphic emphasizes geometric shapes and color gradients rather than representing any external dataset.

Feb 18, 2022

Loading thumbnail…

Fork of Fork of Smiley Face Part II

A stylized cartoon face combines two layered React components: a yellow circular head rendered inline, with imported `Eyes` and `Smile` components positioned via SVG `transform` attributes (translate, rotate, scale). The eyes contain multiple colored ellipses, paths, and circles, while the smile uses stacked bezier paths with distinct fills. The example demonstrates reusable SVG components within React 16.9, rendered to the DOM via `ReactDOM.render`, with styling applied through external CSS classes.

Feb 18, 2022

Loading thumbnail…

Fork sample

A yellow circle with black eyes, eyebrows, and a blue arc mouth forms a simple face. The eyebrows animate upward and then return to their original position over a two-second cycle. The code uses D3 v6 selections and transitions, with `arc` for the mouth path. All shapes are drawn in SVG within a 900x350 viewport, centered by a translated group.

Feb 18, 2022