yjhouma

@yjhouma·15 public vizzes

Styling the Bar Chart

This example demonstrates a horizontal bar chart displaying the populations of the world's top ten countries, using a clean, minimalist design with orange bars and styled axis ticks. The chart is rendered as an SVG within a React application, leveraging D3 v6 for data processing and scale generation; specifically, `scaleBand` for the y-axis categories and `scaleLinear` for the x-axis values. The SVG elements are created directly using React components, while D3's `csv` function fetches and parses the data from a remote gist. The visualization incorporates custom text formatting to abbreviate population figures and uses the Libre Franklin font for a polished appearance.

Feb 11, 2022

Loading thumbnail…

Refactored BarChart

This bar chart displays the estimated 2020 populations of the top ten countries, with each country represented as a horizontal bar. The React application loads data from a CSV file using `d3.csv`, then maps the country names to the y-axis and population values to the x-axis. It renders the chart as an SVG using React components for the axes and bars, with the x-axis scaled linearly via `d3.scaleLinear` and the y-axis using `d3.scaleBand`. The chart is updated asynchronously, showing a loading message until the data is fetched.

Feb 11, 2022

Loading thumbnail…

Axis Using React and D3

This example displays a horizontal bar chart of the top ten countries by 2020 population, with custom axes rendered in React. It uses React hooks (useState, useEffect) to fetch CSV data with d3.csv, then maps it with `scaleBand` and `scaleLinear`. Axes are manually constructed from `xScale.ticks()` and the y-domain, drawing SVG lines and text labels. The visualization renders as SVG within a React component, combining d3’s scales and data parsing with React’s declarative UI.

Feb 11, 2022

Loading thumbnail…

Creating room using margin

This example shows a horizontal bar chart of the top 10 most populous countries, using the 2020 population data from a CSV file hosted on GitHub. The chart is rendered as an SVG, with a React component managing the data loading and state via `useState` and `useEffect`. D3’s `scaleBand` and `scaleLinear` map the data to bar positions and widths, while a margin object defines the inner plotting area, ensuring the bars are offset from the SVG edges via a translated `<g>` element.

Feb 11, 2022

Loading thumbnail…

Creating Bar Chart

This bar chart visualizes the top ten countries by 2020 population, using horizontal bars whose lengths correspond to population values from a CSV dataset. The visualization is built with React and D3 v6, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded asynchronously via `d3.csv` and rendered as SVG rectangles, with the chart updating dynamically after the data arrives.

Feb 11, 2022

Loading thumbnail…

D3 Arc + React To Render Color

This example renders the full set of named CSS colors as an annular pie chart, with each color’s hex value determining its wedge’s fill. The visualization pulls data from a CSV hosted as a GitHub gist, using D3’s `csv` loader, and constructs the arcs with `d3.arc` and `d3.pie`. React manages the application state, updating the SVG paths once the data loads. The final SVG is drawn with a `path` for each color slice, centered within a 960×500 viewport.

Feb 8, 2022

Loading thumbnail…

Visualize Data React + D3

Using React 17 with hooks and D3 v6, this example loads CSS color names and their RGB hex values from a GitHub-hosted CSV via D3's `csv` method. The app displays each color as a thin 960-pixel-wide horizontal bar, stacking them vertically to form a complete spectrum. A conditional `useEffect` hook fetches the data asynchronously, and React renders the loading state with a `pre` element until the dataset arrives. The visualization simply maps each CSV row to a colored `div`, showing the full range of named CSS colors in a single view.

Feb 7, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

A bar chart visualizes the ratio of religions within each country’s population, with countries on the x-axis sorted by ratio and religions on the y-axis; color encodes the ratio, and hovering reveals the population value. The visualization uses the Vega-Lite API (vl) to define the bar marks and encodings, with data loaded from a CSV file via d3.csv. Rendering is handled by Vega and Vega-Lite, configured with custom axis and label styling, and the chart fits the full browser window using autosize.

Feb 2, 2022

Loading thumbnail…

Load Data React + D3

This example shows how to integrate D3 data loading with React state management. It displays a text summary of a CSV file containing CSS named colors, loaded from a GitHub gist, reporting the file size, row count, and column count. The code uses React’s `useState` and `useEffect` hooks to fetch the data asynchronously via D3’s `csv` function, storing the result in component state. The message is formatted and printed inside a `<pre>` element, with a “Loading…” fallback while the request is pending.

Jan 30, 2022

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates how to load and parse CSV data from a remote URL, displaying summary statistics about the dataset in a large text format. The code uses the d3.csv method from D3 v7 to fetch a CSV file containing CSS named colors from a GitHub gist, then calculates and displays the file size in kilobytes, the number of rows, and the number of columns. The visualization outputs these metrics into an HTML pre element, providing a minimal but functional example of asynchronous data loading and parsing.

Jan 30, 2022

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time. The visualization is built with React and D3 v6, using React's `useState` and `useCallback` hooks to track and update the mouse coordinates from the `onMouseMove` event. The circle is rendered as an SVG element with a fixed radius, and its `cx` and `cy` attributes are bound to the current mouse position. The example demonstrates a simple interactive pattern in a React-D3 integration.

Jan 28, 2022

Loading thumbnail…

Smiley Face Part I

A grid of randomly generated smiley faces fills the screen, each with a distinct skin color, eye size, and mouth curvature. The faces are constructed from modular React components, including separate circle elements for the background and eyes, and a d3-shaped arc path for the mouth. The code uses React with D3 v7’s `arc` generator to define the mouth geometry, while `d3.range` creates the array of face instances. Each face is rendered as an SVG group translated to the center, with all parameters randomized per face.

Jan 28, 2022

Loading thumbnail…

Fork of Test

A grid of eighteen procedurally generated smiley faces renders in SVG via React. Each face varies randomly in eye radius, cheek position, mouth radius, and eye-reflection size. The composition is built from reusable React components (`Face`, `Eyes`, `Cheeks`, `Mouth`) that wrap low-level SVG shapes like circles and ellipses, with a d3 `arc` generator shaping the mouth. Randomized values from `d3.range` drive per-face variation, while a shared gradient fill colors the cheeks.

Jan 26, 2022

Loading thumbnail…

SMILEY FACE PLAYAROUND

This visualization presents a classic smiley face drawn using React and D3.js, rendered as an SVG. The face consists of a yellow circle with a black stroke for the head, two small black circles for the eyes, and a curved arc for the mouth, all positioned relative to the center of a 960x500 canvas. The code uses D3’s `arc` API to generate the mouth’s path, calculating its inner and outer radii and angular range. React manages the SVG elements declaratively, with all coordinates and dimensions derived from constants like `centerX`, `offsetX`, and `eyeRadius`.

Jan 26, 2022

Loading thumbnail…

Face Using HTML + CSS + SVG

A smiling cartoon face rendered in yellow with black outlines, built from SVG primitives inside a React component. The face uses three circles for the head and eyes, plus an arc path for the mouth, all positioned relative to a central transform. The code imports React and the `arc` function from `d3` (v6) to generate the mouth’s path data, while React (v17) handles the SVG rendering.

Mar 22, 2021