alokagase

@alokagase·11 public vizzes

Fork of Fork of Fork of Fork of Css Named Colors/ Loading and parsing csv data

This example displays a horizontal bar chart of the top 10 countries by population in 2020, with country names on the y-axis and population values on the x-axis. The visualization uses React to render SVG elements, with scales and axes built using d3-scale and d3-array. Data is loaded and parsed asynchronously from a CSV file via d3.csv, and the chart’s bars are drawn as SVG rectangles using the Marks component.

Oct 26, 2021

Loading thumbnail…

Fork of Fork of Fork of Css Named Colors/ Loading and parsing csv data

This example displays a pie chart visualizing CSS named colors, with each slice representing an individual color from the dataset. The chart is rendered as an SVG using D3’s `pie` and `arc` functions, while data is loaded asynchronously from a remote CSV file via `d3.csv`. The React app manages state with `useState` and `useEffect`, rendering the slices with fill colors taken from the `RGB hex value` column of the CSV data.

Oct 25, 2021

Loading thumbnail…

Fork of Fork of Css Named Colors/ Loading and parsing csv data

This example displays all CSS named colors as a pie chart, with each slice filled using its corresponding hex value. The chart loads color data from a CSV file via `d3.csv` and renders using React with SVG elements. The code imports `arc` and `pie` from D3 v7 to compute the pie geometry and slice sizes. While the chart’s structure is generated with React’s `useState` and `useEffect` hooks, the ready-to-render pie data omits a final `pieArc` definition, leaving the visual completion to the standard D3 arc generator with an outer radius matching the viewport width.

Oct 24, 2021

Loading thumbnail…

Fork of First Graph

This example displays a scatter plot of automobile data, with points colored by country of origin and sized by vehicle weight. The visualization is rendered using the Vega-Lite API, specifically through the `vl` object from `vega-lite-api`. It encodes the acceleration and horsepower fields on the x and y axes, with scales set to not include zero. The plot uses `markPoint` with filled, semi-transparent circles, and includes a tooltip showing the car name. The data appears to come from a standard automotive dataset, though its exact source is not shown in the code.

Oct 24, 2021

Loading thumbnail…

First Graph

This example displays the text "Hello HTML!" centered on the page, using a CSS class to set the font size to 13em. The rendering relies on a minimal HTML document structure with embedded CSS and JavaScript. It demonstrates the simplest possible static visualization, where styling is applied directly through a `<style>` block and the content is placed within a standard `<div>` element. The page does not use any external libraries or JavaScript APIs for drawing.

Oct 24, 2021

Loading thumbnail…

Fork of Css Named Colors/ Loading and parsing csv data

This example demonstrates loading and parsing CSV data from a remote GitHub Gist using D3’s `d3.csv` method within a React application. It displays a concise summary of the dataset, including its size in kilobytes, row count, and column count, calculated with `d3.csvFormat`. The interface toggles between a “Loading…” state and the data summary once the asynchronous fetch completes. The code uses React hooks (`useState`, `useEffect`) to manage state and side effects, with the parsed data stored in the component’s local state.

Oct 24, 2021

Loading thumbnail…

Fork of Fork of Css Named Colors/ Loading and parsing csv data

This example demonstrates interactive mouse tracking in an SVG visualization built with React and D3 v7. A single circle follows the cursor’s position across an 800×500 pixel canvas, with its coordinates updated dynamically through React’s `useState` and `useCallback` hooks. The `onMouseMove` event handler captures client X and Y values, while ReactDOM renders the SVG element and its circle child. The visualization shows how React manages stateful rendering for real-time geometric updates, with the imported D3 library available but unused in the current logic.

Oct 24, 2021

Loading thumbnail…

Fork of Fork of Css Named Colors/ Loading and parsing csv data

This example loads a CSV file of CSS named colors from a remote GitHub gist and displays basic dataset statistics in a large HTML `<pre>` element. It shows the file size in kilobytes, the number of rows, and the number of columns. Using D3 v7, the code calls `d3.csv()` to fetch and parse the data, then accesses `data.length`, `data.columns.length`, and `d3.csvFormat()` to compute the metrics. The parsed result is rendered as plain text via the DOM’s `textContent`.

Oct 24, 2021

Loading thumbnail…

Fork of Css Named Colors/ Loading and parsing csv data

This example demonstrates the loading and parsing of a CSV file containing CSS named colors using D3.js version 7. The visualization displays a text summary showing the file size in kilobytes, the number of data rows, and the number of columns retrieved from the remote CSV source. The code uses `d3.csv()` to fetch and parse the data from a GitHub Gist URL, then formats the output with `d3.csvFormat()`. The resulting statistics are rendered in a large HTML `<pre>` element with a font size of 5em.

Oct 24, 2021

Loading thumbnail…

Css Named Colors/ Loading and parsing csv data

This example demonstrates how to load and parse CSV data from a remote URL, logging the raw text to the browser console. It uses the native `fetch` API to retrieve the file, followed by a `response.text()` call to extract the string content. The code defines an asynchronous `fetchText` function to handle the request, showcasing a minimal pattern for fetching external data without any libraries. The CSV file contains CSS named colors, though the visualization itself renders nothing—only the console output confirms the data retrieval. The example serves as a foundational step for integrating data loading into a React-based visualization project.

Oct 24, 2021

Loading thumbnail…

Smile Face Part 1

This visualization shows a grid of smiley faces, each with randomized facial features—varying eye offset, eye radius, mouth width, and stroke thickness. The faces are rendered as SVGs using React components, with D3’s `arc` function generating the mouth path. Each face is composed of reusable components like `BackGroundCircle`, `Eyes`, and `Mouth`, positioned via a translated `<g>` element. The `range` function from D3 creates 18 faces, and `Math.random` drives the per-face variation.

Oct 24, 2021