shresthabhi

@shresthabhi·13 public vizzes

Styling of Bar Graph

This example shows a horizontal bar graph comparing the population of ten countries, using a dataset loaded from a GitHub gist. The graph renders as an SVG in React, with bars and axes created through React components. It uses D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, along with `max` to compute the scale domain. The `csv` function from D3 loads and parses the data, which is managed with React’s `useState` and `useEffect` hooks.

Oct 18, 2021

Loading thumbnail…

Margin and Axes

This example shows a horizontal bar chart of population data for ten countries, drawn as an SVG with margins that create space for a left axis and bottom axis. The chart uses React to render the visualization, with D3 v5 providing the scales: a `scaleBand` for the categorical country axis and a `scaleLinear` for the population values. The data is loaded via `d3.csv` from a remote gist, and the custom `AxisBottom`, `AxisLeft`, and `Marks` components generate the tick labels and rectangular bars. The final layout applies `transform` translations to position the axes within the defined margin area.

Oct 18, 2021

Loading thumbnail…

Pathetic Population Bar Chart

This visualization displays the populations of the top ten countries using a horizontal bar chart, with each bar’s length proportional to its 2020 population value. The chart renders as SVG via React, using `useState` and `useEffect` to fetch and parse a CSV from a GitHub gist. D3’s `scaleBand` positions the country categories along the y-axis, while `scaleLinear` maps population counts to bar widths on the x-axis. The data is loaded using `d3.csv` and truncated to the first ten rows.

Oct 18, 2021

Loading thumbnail…

Radial Rendering of color with React

A radial visualization displays all 148 named CSS colors as a single ring of pie-arc segments, each filled with its corresponding hex value. Using React hooks to load the CSV dataset and D3’s `arc` generator, the code maps each color to an angular slice around a central point. The SVG rendering, driven by d3.csv and React’s `useState`/`useEffect`, presents the full color spectrum in a compact, circular layout.

Oct 15, 2021

Loading thumbnail…

Loading Color Data and Rendering it with React

This example loads a CSS named color dataset from a GitHub gist using the `d3.csv` function, then renders each color as a horizontal bar with React. The application uses React hooks (`useState` and `useEffect`) to fetch and store the data asynchronously, displaying a “Loading” message before the bars appear. Each bar’s background color is set to the `RGB hex value` field, and the bars are stacked vertically at a fixed width of 960 pixels. This demonstrates a simple data-driven visualization where D3 handles CSV parsing and React manages the component state and rendering.

Oct 15, 2021

Loading thumbnail…

Load data using React and D3

This example demonstrates how to load external CSV data within a React component using D3 utilities. It displays file size, row count, and column count for a dataset of CSS named colors fetched from a GitHub gist. The code uses React’s `useState` and `useEffect` hooks to manage asynchronous data loading, while `d3.csv` retrieves the data and `d3.csvFormat` measures its length. A loading message appears until the dataset is ready.

Oct 14, 2021

Loading thumbnail…

Loading data using d3 and Mouse Follower

This example demonstrates loading a remote CSV dataset with d3.csv in a React application, displaying the file size, row count, and column count in a large text element. A black SVG circle follows the mouse cursor across the viewport using React’s useState and useCallback hooks to track and update the pointer’s clientX and clientY coordinates. The code imports React and ReactDOM, creates an SVG with dimensions 960 by 500 pixels, and sets the circle’s center to the current mouse position. The CSV data comes from a GitHub gist containing named CSS colors.

Oct 13, 2021

Loading thumbnail…

Loading and Parsing Data

This example demonstrates the initial stage of working with external data by fetching a CSV file of CSS named colors from a GitHub gist and logging its raw text to the browser console. It shows the asynchronous fetch pattern using the Fetch API and `async`/`await` syntax, with a commented-out alternative using promise chaining. The page itself renders only a simple "Hello HTML" message, while all visible output appears in the developer console. The code does not parse or visualize the data beyond retrieving and printing the text.

Oct 13, 2021

Loading thumbnail…

Many Faces

A grid of fifteen cartoon faces, each with randomized facial features such as eye size, iris radius, and mouth expression, appears in a three-by-five layout. The faces alternate between smiling and sad mouths, created using the D3 arc generator with different start and end angles. Each face is rendered as an SVG with React components, using a radial gradient for the background circle. The React app maps over a range of indices, generating faces with random numeric properties for eyes, strokes, and iris size.

Oct 13, 2021

Loading thumbnail…

customized smiley

A customized smiley face is rendered as a large radial-gradient-filled circle with black outline, two elliptical eyes with white irises, and a mouth drawn as an arc. The mouth can switch between a smile and a frown based on a `sad` prop. Built with React and D3 v5, it uses D3’s `arc` generator to construct the mouth path and SVG for all shapes. The face’s dimensions, eye offsets, iris radius, and stroke width are all configurable via props.

Oct 13, 2021

Loading thumbnail…

Fork of Fork of Smiley Face, using D3

This D3.js and React example renders a smiley face as a yellow circle with black eyes and a mouth, all drawn as SVG shapes. The code defines reusable React components for the face and eyes, and uses D3's `arc` function to create a path for the mouth. The SVG is centered using a transform, and constants control the circle radius, eye offset, and mouth dimensions. The visualization shows how D3 can be integrated with React to generate vector graphics programmatically.

Oct 13, 2021

Loading thumbnail…

Fork of Smiley Face, using React

This example renders a smiley face using React and SVG, showing a yellow circle with black stroke for the head and two smaller black circles for the eyes. The code defines constant values for dimensions, eye offsets, radius, and stroke width, then constructs the SVG elements via React’s JSX syntax. It uses React 16.9.0 and ReactDOM to render the component into the DOM, with the SVG markup specifying circle positions relative to the center of a 960x500 canvas, illustrating a component-based approach to static graphics.

Oct 13, 2021

Loading thumbnail…

Smiley Face, using HTML

A simple SVG smiley face rendered directly in HTML, with a large yellow circle for the head and two smaller black circles for the eyes, all drawn using basic SVG circle elements. The code sets fixed coordinates and stroke widths to position the face on a 960 by 500 canvas, with the head centered and eyes offset horizontally from the center. The page uses inline SVG markup within an HTML file, with no external libraries, and relies on static, hard-coded values for all shapes and styling.

Oct 12, 2021