mauryanidhi (@mauryanidhi), VizHub

HTML Starter

This example shows a minimal HTML page with a single large circle rendered inside an SVG element. The page is styled with CSS to remove the default body margin and hide overflow. It demonstrates the fundamental structure of an HTML document, including the doctype, head, and body tags. The SVG uses the `width` and `height` attributes to define its viewport, and the circle is drawn using the `r` attribute for its radius. No JavaScript or external libraries are used, making it a bare-bones starting point for web visualization projects.

Apr 18, 2022

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates a simple React-based data loading workflow using D3 utilities. It fetches a CSV file containing CSS named colors from a GitHub gist, then displays a concise summary of the dataset: the file size in kilobytes, the number of rows, and the number of columns. The implementation uses React’s `useState` and `useEffect` hooks to manage asynchronous data fetching, while D3’s `d3.csv` handles parsing. The rendered output is plain text generated by a custom `message` function that relies on `d3.csvFormat` to calculate the file size.

Apr 16, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing CSS Named Colors data from a CSV file. The code uses the JavaScript `fetch` API to request the CSV data from a GitHub Gist URL, then applies the `.then()` method to handle the response and extract the text content. The parsed data is logged to the console for inspection. The visualization is built within a React framework, though the current implementation focuses primarily on the data loading and parsing workflow rather than graphical rendering.

Apr 16, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5 within a React project. It shows a summary of the CSS Named Colors dataset, displaying the file size in kilobytes, row count, and column count as large text. The primary approach uses `d3.csv` with a Promise to fetch and parse the data, while commented-out alternatives illustrate using `fetch`, `async/await`, and `d3.csvParse`. The visualization highlights different methods for handling asynchronous data loading in modern JavaScript.

Apr 16, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5 within a React project. It shows a summary of the CSS Named Colors dataset, displaying the file size in kilobytes, row count, and column count as large text. The primary approach uses `d3.csv` with a Promise to fetch and parse the data, while commented-out alternatives illustrate using `fetch`, `async/await`, and `d3.csvParse`. The visualization highlights different methods for handling asynchronous data loading in modern JavaScript.

Apr 16, 2022