KolliSaiTeja

@KolliSaiTeja·7 public vizzes

ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates loading and parsing a CSV dataset of used car details using D3.js v7 within a React-based HTML page. It displays a summary message indicating the dataset’s size in kilobytes, row count, and column count after the file is fetched. The code relies on `d3.csv` to asynchronously retrieve the remote CSV, `d3.csvFormat` to measure its size, and DOM manipulation via `getElementById` to render the results. The page also includes an embedded SVG illustration and styled headings.

Feb 28, 2022

Loading thumbnail…

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse CSV data using D3.js, displaying the dataset’s size in kilobytes, row count, and column count in a styled HTML page. It also embeds an SVG city illustration as a static visual element. The code uses `d3.csv()` to fetch a remote CSV file from a GitHub gist, then `d3.csvFormat()` to calculate the data size. A `pre` element updates dynamically with the parsed statistics, while CSS styles the heading and message container. The page runs in a React environment but relies on plain JavaScript with D3 v7.

Feb 26, 2022

Loading thumbnail…

Sad Face

A gray circle with a yellow outline serves as the face, featuring two small, colored eyes (red and blue) positioned symmetrically above the center. A separate arc path below creates a frown, representing a sad expression. The visualization uses React with D3’s `arc` generator to compute the mouth path, drawing it with an SVG `<path>` element. The face, eyes, and mouth are rendered as SVG shapes within a React component, using D3’s arc API for the curved mouth geometry.

Feb 21, 2022

Loading thumbnail…

Fork of Sad Face

A yellow circle with black eyes and a curved mouth forms a static, unhappy face. The visualization uses React to compose SVG elements, including a circle for the head and two offset circles for the eyes. The mouth is drawn using D3’s `arc` generator, which creates a path with specified inner and outer radii and angular start and end points, rendered as an SVG path.

Feb 20, 2022

Loading thumbnail…

Sad Face

A sad face rendered in SVG using React and D3. The visualization shows a yellow circle with black outline as the face, featuring two black circular eyes positioned symmetrically, and a downward-curving mouth arc. The code uses `d3.arc` to generate the mouth path, with React components for the background circle and eyes. D3 v6 and React 17 are loaded via UMD, and the final drawing is produced by rendering SVG elements to the DOM.

Feb 20, 2022

Loading thumbnail…

Sad Face

A yellow circle with a black outline and two black eyes forms a sad face. The mouth is drawn as an arc using the `d3.arc` API, with its inner and outer radii set via `d3.arc()` and a path element. The face is built with React components rendering SVG elements, including circles for the background and eyes. The `arcCenterX` and `arcCenterY` variables position the mouth separately from the face’s center, while the stroke width is defined as a constant.

Feb 20, 2022

Loading thumbnail…

Emoji Symbol

A green circle with a blue stroke forms the face of an emoji, with two smaller black circles as eyes of different sizes. The example demonstrates basic SVG shape creation using D3.js v7, where a path is appended to a group and drawn with the `arc()` generator using specified inner and outer radii along with start and end angles. The static composition shows how D3's selection and arc APIs construct geometric elements, though no interactive behavior or data binding is present in the code.

Feb 19, 2022