rammy81

@rammy81·14 public vizzes

Bar Chart

This bar chart displays the 20 most populous U.S. states or territories, ranked horizontally by their population counts from the 2000 census. The visualization uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` handling the axes and bar positioning. Data is loaded asynchronously via `d3.csv` from a GitHub Gist, with tooltips showing formatted population values using `d3.format`. The chart includes styled grid lines, axis labels, and a Poppins font for a clean, readable presentation.

May 2, 2022

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the ten most populous U.S. states or territories, ranked by their July 2013 population estimates. The React app loads data from a CSV file using d3.csv, then renders horizontal bars with SVG. d3.scaleBand and d3.scaleLinear position the bars, while d3.format converts large numbers into abbreviated labels. The chart includes styled axes and a tooltip showing exact values on hover.

May 2, 2022

Loading thumbnail…

Fork of Rendering Data with React & D3

This example renders a bar chart of population data for U.S. states and territories using React for DOM manipulation and D3 for scales. It loads a CSV file via `d3.csv`, then maps each row to an SVG `<rect>` whose vertical position and height come from `d3.scaleBand`, while the width uses `d3.scaleLinear`. The visualization demonstrates a hybrid approach where React handles component lifecycle and state, while D3 provides the data parsing and scaling utilities.

May 2, 2022

Loading thumbnail…

Bar Chart

This bar chart example demonstrates how to load and display CSV data using React and D3 v7. The visualization shows summary statistics about the dataset, including file size in kilobytes, row count, and column count, rendered as text output. The code uses D3’s `csv` function to fetch data from a remote GitHub gist containing CSS named colors, and React’s `useState` and `useEffect` hooks manage the asynchronous data loading and state updates.

May 2, 2022

Loading thumbnail…

Fork of Fetch Data 1

This example displays a text summary of a fetched CSV dataset, reporting its size in kilobytes, row count, and column count. The React component uses the `useState` and `useEffect` hooks to asynchronously load data via `d3.csv` from a GitHub gist containing CSS named colors. While loading, the view shows a “Loading...” message; once fetched, the formatted statistics appear in a large monospace `<pre>` element. The visualization emphasizes the raw data metadata rather than graphical encoding, demonstrating a minimal data-fetching pattern with React and D3 v7.

May 2, 2022

Loading thumbnail…

Fetch Data 1

This example demonstrates how to load and display a CSV dataset in a React application using D3. The code fetches a list of named CSS colors from a remote GitHub gist via D3’s `csv` function, then uses React’s `useState` hook to manage the loading state. When the data arrives, the interface updates from “loading” to “loaded,” indicating successful retrieval. The visualization relies on React 16.9 for component rendering and D3 v7 for data parsing.

May 2, 2022

Loading thumbnail…

Fork of Mouse Follower

This example loads CSS named colors from a CSV file using d3.csv and displays a simple text status indicating whether the data has loaded. Built with React (via useState and useEffect) and D3 v7, the visualization fetches the dataset asynchronously and updates the interface once the fetch completes. The code sets up a full-screen layout with no margins, and while it includes a title referencing a mouse follower, the current implementation only shows loading or loaded text, without rendering any graphical elements or interactive behavior.

May 2, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the size and structure of a CSV dataset containing CSS named colors, displaying the file size in kilobytes, row count, and column count. It loads and parses the data using D3 v5’s `d3.csv` method, which returns a promise, and formats the output with `d3.csvFormat` to compute the byte length. The visualization is minimal, showing the resulting statistics in a large `<pre>` element styled with CSS. The code also includes commented-out alternatives using `fetch`, `async`/`await`, and `d3.csvParse`, highlighting different asynchronous approaches.

May 2, 2022

Loading thumbnail…

Fork of React Starter

This example demonstrates a minimal React application that renders the text “Hello React!” centered on the screen. It shows how a functional component, `App`, returns a styled `<div>` element, which is then mounted into the DOM via `ReactDOM.render`. The code uses React 16.13.1 and ReactDOM, loaded from a CDN, with the `className` attribute applying a large, centered font size defined in the accompanying HTML style block. No data or visualization is involved.

May 2, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data in a React application using D3 v5. It displays the dataset’s file size, row count, and column count in a large text block. The code uses `d3.csv` to fetch and parse the CSV from a GitHub gist containing CSS named colors, then formats the results with `d3.csvFormat` and `data.columns`. An alternative commented approach shows `fetch` with `async`/`await` and `d3.csvParse`, highlighting modern JavaScript patterns for data loading.

May 1, 2022

Loading thumbnail…

Fork of Smiley Face Part III

This visualization displays a stylized smiley face rendered as an SVG graphic. The face is built from three circles for the head and eyes, plus an arc-generated mouth, all positioned using React JSX and D3’s `arc()` generator. The code uses React 16.9 to create the SVG elements, while D3 v5’s `arc` API computes the mouth path. A yellow face with black outlines appears, though the eyes are filled black and the head uses a pink fill. The rendering relies on absolute width and height values (960 by 500) and a centered coordinate system.

Apr 30, 2022

Loading thumbnail…

Fork of Smiley Face Part II

A full-screen yellow smiley face, drawn with black outlines, is rendered across the entire browser viewport. The face dynamically centers itself and scales its radius relative to the window’s height, while the eyes and mouth are positioned at fixed offsets from the center. Built with React and react-dom, the example uses SVG circle elements within a transformed group. The code explicitly references `window.innerWidth` and `window.innerHeight` to set the canvas size, and it uses `ReactDOM.render` to insert the component into the page.

Apr 30, 2022

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a yellow smiley face composed of SVG shapes, with the head, eyes, and mouth positioned relative to a central point. It combines React for declarative component rendering with D3’s `arc` generator to create the smile path, using a custom inner and outer radius with specified start and end angles. The SVG is rendered via ReactDOM into a root element, while D3 v5 provides the geometric calculations. The face uses hardcoded dimensions and colors, demonstrating a straightforward integration of D3’s arc API within a React component.

Apr 30, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static smiley face built from three SVG circles: two small ones for eyes and one large blue circle for the head, all centered within a 1000 by 500 viewport. It uses React and ReactDOM, with the circles defined directly in an HTML file’s SVG markup. The code logs “Hello JavaScript” to the console and includes a video tutorial link, while the rendered face remains fixed with no interactivity or animation.

Apr 30, 2022