R

Reymond Mesuga

@Rey-commits·45 public vizzes

Loading thumbnail…

Fork of Polished World Map

This example displays a world map with country boundaries rendered as filled landmasses, graticules, and interior borders, using a natural Earth projection. The visualization loads TopoJSON data from the World Atlas via `d3.json`, converts it with `topojson.feature` and `topojson.mesh`, and draws the map with `d3.geoPath` and `d3.geoNaturalEarth1` in a React component. Styling applies a teal land fill and subtle gray strokes, with SVG output.

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the classic Iris flower dataset, allowing users to explore relationships between four numeric attributes (sepal length, sepal width, petal length, and petal width) and the species classification. Two dropdown menus independently control which attribute is plotted on the X and Y axes, dynamically updating the scatter plot in real time. The visualization uses React for the interactive interface and event handling, while D3 v5 provides the scaling, data loading via `d3.csv`, and SVG rendering of the axes and circle marks. Axis tick labels are formatted using D3’s `format` function to compact large numbers.

Loading thumbnail…

Fork of Fork of Menus with React

This example demonstrates a single interactive dropdown menu for selecting a pet, with the current choice logged to the console. The interface shows a large label and select element rendered via the React `useState` hook to track the selected value. The `Dropdown` component maps over a static array of pet options, using each option’s `value` and `label`. The code imports React and ReactDOM from UMD builds hosted on unpkg, and the menu updates its displayed selection when the user changes the dropdown.

Loading thumbnail…

Fork of Menus with React

This interactive example demonstrates a pet-selection dropdown menu built with React. It showcases a simple form interface where users can choose from six different pets, with the state managed through React’s `useState` hook and the `Dropdown` component handling the select element. The application uses `ReactDOM.render` to render the `App` component into the DOM, and relies on React’s `onChange` event to update the selected value in real time.

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

A scatter plot of the Iris dataset displays sepal and petal measurements as circles, with interactive dropdown menus to select which attributes appear on the X and Y axes. The visualization is built with React components, using `d3.csv` to load data and `d3.scaleLinear` with `extent` for scaling. It renders SVG circles, axes, and labels through reusable components, with native HTML `<title>` elements providing tooltips on hover. React state management updates the scales and axes when either dropdown selection changes.

Loading thumbnail…

Fork of Polished World Map

This example displays a world map with country boundaries rendered as filled landmasses, graticules, and interior borders, using a natural Earth projection. The visualization loads TopoJSON data from the World Atlas via `d3.json`, converts it with `topojson.feature` and `topojson.mesh`, and draws the map with `d3.geoPath` and `d3.geoNaturalEarth1` in a React component. Styling applies a teal land fill and subtle gray strokes, with SVG output.

Loading thumbnail…

Fork of Stylized Line Chart

A stylized line chart visualizes San Francisco temperature trends over a week, with a smooth natural curve connecting data points. The chart loads CSV data from the Data Canvas Sense Your City dataset and renders time-scaled x-axis with day labels, paired with a linear temperature y-axis. Built with React, the visualization uses d3.csv, scaleTime, scaleLinear, and line with curveNatural to create the path. SVG rendering with Poppins typography and teal color accents provides a clean, modern aesthetic.

Loading thumbnail…

Fork of Working with Time

A scatter plot visualizes temperature readings over time for one week in San Francisco, using data from the Data Canvas Sense Your City dataset. React components render SVG circles positioned with d3.scaleTime and d3.scaleLinear, while d3.timeFormat formats weekday tick labels. The visualization uses React hooks to load and parse CSV data asynchronously, with native SVG `<title>` elements providing hover tooltips.

Loading thumbnail…

Fork of Fork of Stylized Scatter Plot

A scatter plot of the Iris dataset visualizes petal length versus sepal width, with each point colored teal and mapped to scales built using `d3.scaleLinear` and `d3.extent`. The React components `AxisBottom`, `AxisLeft`, and `Marks` render SVG elements, while `useData` loads the CSV via `d3.csv`. Axis ticks and labels are styled with custom formatting, and circles include native tooltips.

Loading thumbnail…

Fork of Stylized Scatter Plot

This example visualizes the classic Iris Dataset, plotting petal length against sepal width as a stylized scatter plot. The implementation uses React to render the SVG elements, while D3.js provides the data loading, linear scaling, and axis tick generation through `scaleLinear` and `extent`. The `Marks` component draws each circle with a tooltip showing the formatted x-value, and the axes are constructed from reusable `AxisBottom` and `AxisLeft` components. The design features a Poppins typeface, muted gray and teal colors, and generous margins for axis labels.

Loading thumbnail…

Fork of Stylized Bar Chart

This example visualizes the top 10 most populous countries using a horizontal bar chart, with population values from the United Nations World Population Prospects 2019. The bars are rendered as SVG rectangles, and the chart includes styled axes with formatted tick labels and a tooltip on each bar. It is built with React and D3 v5, using `scaleBand` and `scaleLinear` for scales, and `csv` to load the data. The code also uses custom React components for the axes and marks.

Loading thumbnail…

Fork of Refactored Bar Chart

This example displays the top 10 most populous countries as horizontal bars using React and D3 v5. It loads UN World Population Prospects 2019 data via d3.csv, sorts by 2020 population, and renders SVG rectangles with d3.scaleBand, d3.scaleLinear, and d3.max. The component structure separates axis and mark rendering into reusable functions, with d3.ticks generating the bottom axis labels and scaleBand domains for the left axis.

Loading thumbnail…

Fork of Refactored Bar Chart

This example displays the top 10 most populous countries as horizontal bars using React and D3 v5. It loads UN World Population Prospects 2019 data via d3.csv, sorts by 2020 population, and renders SVG rectangles with d3.scaleBand, d3.scaleLinear, and d3.max. The component structure separates axis and mark rendering into reusable functions, with d3.ticks generating the bottom axis labels and scaleBand domains for the left axis.

Loading thumbnail…

Fork of Axes with React & D3

This chart displays the top 10 most populous countries using a horizontal bar chart with labeled axes. It builds the visualization with React components and D3 scales, including `scaleBand` for the categorical y-axis and `scaleLinear` for the population values on the x-axis. Tick marks and labels are manually generated from `xScale.ticks()` and the domain of the y-scale, while bars are rendered as SVG `rect` elements. Data comes from the United Nations World Population Prospects 2019 dataset, loaded via `d3.csv`.

Loading thumbnail…

Fork of Axes with React & D3

A horizontal bar chart displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset. D3’s `scaleBand`, `scaleLinear`, and `max` are used to compute positions and widths, while React’s `useState` and `useEffect` manage asynchronous CSV loading. The chart renders SVG rect elements for bars and manually constructs axes using `xScale.ticks()` for tick values and SVG line/text elements, with margins shifting the plot via a `<g>` transform.

Loading thumbnail…

Fork of Fork of Pathetic Bar Chart

A bar chart displays the top 10 most populous countries for 2020, using horizontal rectangles without axes or labels. Built with React and D3 v5, the app loads data from the United Nations World Population Prospects via `d3.csv`, filters the first ten rows, and scales bar widths with `d3.scaleLinear`. The SVG rendering uses `d3.scaleBand` to position each country vertically, while React's `useState` and `useEffect` manage asynchronous data loading and render the final chart.

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a bar chart without axes or labels, rendering each country as a horizontal rectangle scaled by its 2020 population. Built with React and D3 v5, it uses `d3.csv` to load United Nations World Population Prospects 2019 data, then applies `scaleBand` and `scaleLinear` to map countries and population values to screen coordinates. The visualization displays rectangles in an SVG container, with the loading state shown as plain text until data arrives.

Loading thumbnail…

Fork of Pathetic Bar Chart

This visualization displays the top 10 most populous countries as a minimal bar chart with no axes or labels, rendering each country as a simple SVG rectangle. The bars are positioned using `d3.scaleBand` for the vertical country categories and `d3.scaleLinear` for horizontal population values, with data loaded from the United Nations World Population Prospects 2019 via `d3.csv`. The chart is built with React hooks (`useState`, `useEffect`) to fetch and slice the dataset, while React renders the SVG elements in a browser environment.

Loading thumbnail…

Fork of Pathetic Bar Chart

This visualization displays the top 10 most populous countries as a minimal bar chart with no axes or labels, rendering each country as a simple SVG rectangle. The bars are positioned using `d3.scaleBand` for the vertical country categories and `d3.scaleLinear` for horizontal population values, with data loaded from the United Nations World Population Prospects 2019 via `d3.csv`. The chart is built with React hooks (`useState`, `useEffect`) to fetch and slice the dataset, while React renders the SVG elements in a browser environment.

Loading thumbnail…

Fork of Pathetic Bar Chart

This visualization displays the top 10 most populous countries as a minimal bar chart with no axes or labels, rendering each country as a simple SVG rectangle. The bars are positioned using `d3.scaleBand` for the vertical country categories and `d3.scaleLinear` for horizontal population values, with data loaded from the United Nations World Population Prospects 2019 via `d3.csv`. The chart is built with React hooks (`useState`, `useEffect`) to fetch and slice the dataset, while React renders the SVG elements in a browser environment.

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays a scatterplot of auto-mpg data, plotting engine displacement against horsepower, with points colored by opacity and tooltips revealing car names. The code uses the Vega-Lite API integrated with D3.js (d3.v5) to fetch CSV data and render the chart via Vega. It loads the visualization libraries (vega, vega-lite) and configures custom axis and label styling. The chart resizes to fit the browser window and employs an opacity of 0.1 to handle overlapping points.

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile displacement against horsepower, with each point representing a vehicle and its name available via tooltip. The visualization uses Vega-Lite’s declarative API through the `vega-lite-api` library, combining it with D3’s `csv` loader to fetch the auto-mpg dataset. The plot features a dark-themed configuration, semi-transparent points, and an axis style that suppresses domain lines. Rendering is handled by Vega, with tooltip interactions enabled using `vega-tooltip`, and the chart auto-fits to the window size.

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays a scatterplot of auto-mpg data, plotting engine displacement against horsepower, with points colored by opacity and tooltips revealing car names. The code uses the Vega-Lite API integrated with D3.js (d3.v5) to fetch CSV data and render the chart via Vega. It loads the visualization libraries (vega, vega-lite) and configures custom axis and label styling. The chart resizes to fit the browser window and employs an opacity of 0.1 to handle overlapping points.

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile displacement against horsepower, with each point representing a vehicle and its name available via tooltip. The visualization uses Vega-Lite’s declarative API through the `vega-lite-api` library, combining it with D3’s `csv` loader to fetch the auto-mpg dataset. The plot features a dark-themed configuration, semi-transparent points, and an axis style that suppresses domain lines. Rendering is handled by Vega, with tooltip interactions enabled using `vega-tooltip`, and the chart auto-fits to the window size.

Loading thumbnail…

Fork of Fork of Loading Data with React & D3

This example shows a React app that asynchronously loads a CSV dataset of CSS named colors using D3’s `csv` utility, then displays a text summary of its contents. While the data is loading, the interface shows “Loading...”; once resolved, the app renders a `<pre>` block with the file size in kilobytes, the number of rows, and the number of columns. The code uses React hooks (`useState` and `useEffect`) to manage state and trigger the data fetch, with a custom `message` function that relies on `d3.csvFormat` to compute the byte length. The visualization is minimal, focusing on data loading behavior rather than graphical rendering.

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates a React component that asynchronously loads a CSV file of CSS named colors via D3’s `csv` utility, then displays a summary of the dataset using React’s `useState` and `useEffect` hooks. While the data is fetching, the interface shows a “Loading...” message. Once loaded, it renders a text summary reporting the file size in kilobytes, row count, and column count. The code uses `d3.csvFormat` to calculate the byte size and relies on React’s state management to update the view.

Loading thumbnail…

Fork of Fork of Loading Data with React & D3

This example shows a React app that asynchronously loads a CSV dataset of CSS named colors using D3’s `csv` utility, then displays a text summary of its contents. While the data is loading, the interface shows “Loading...”; once resolved, the app renders a `<pre>` block with the file size in kilobytes, the number of rows, and the number of columns. The code uses React hooks (`useState` and `useEffect`) to manage state and trigger the data fetch, with a custom `message` function that relies on `d3.csvFormat` to compute the byte length. The visualization is minimal, focusing on data loading behavior rather than graphical rendering.

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates a React component that asynchronously loads a CSV file of CSS named colors via D3’s `csv` utility, then displays a summary of the dataset using React’s `useState` and `useEffect` hooks. While the data is fetching, the interface shows a “Loading...” message. Once loaded, it renders a text summary reporting the file size in kilobytes, row count, and column count. The code uses `d3.csvFormat` to calculate the byte size and relies on React’s state management to update the view.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This visualization demonstrates a minimal CSV loading and parsing routine. It displays the size of the fetched data in kilobytes, the number of rows, and the number of columns. The example uses d3.v5’s `d3.csv` function to asynchronously load the CSS Named Colors dataset from a gist URL, and `d3.csvFormat` to compute the data’s size. The result is rendered as large text inside an HTML `<pre>` element, with commented alternatives showing `fetch` and `d3.csvParse`.

Loading thumbnail…

Fork of Fork of Fork of Smiley Face Part II

A React component renders a single SVG circle that follows the mouse cursor across a 960×500 viewport. The application tracks pointer movement via an `onMouseMove` event handler and uses React’s `useState` and `useCallback` hooks to update the circle’s `cx` and `cy` coordinates. Built with React 16.9 and ReactDOM, it demonstrates interactive SVG rendering where user input directly drives visual output in real time.

Loading thumbnail…

Fork of Fork of Smiley Face Part II

This example shows a single circle that follows the user's mouse movement across an SVG canvas. Built with React 16.9 and rendered as SVG, the application uses the `useState` hook to track the mouse’s client coordinates and the `useCallback` hook to handle the `onMouseMove` event, updating the circle’s center position in real time. The visualization demonstrates interactive state management within a React component.

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a single yellow circle that moves across an SVG canvas in response to mouse movement. Built with React 16.9.0 and rendered via SVG, the circle is positioned using the `clientX` and `clientY` coordinates from the `onMouseMove` event, with initial state centered at (480, 250). The code uses React's `useState` hook to track mouse position and the ReactDOM `render` method to update the circle's `cx` and `cy` attributes dynamically.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example loads a CSV file of CSS named colors and displays its key statistics: file size in kilobytes, row count, and column count. The code uses the D3 v5 `d3.csv` method to fetch and parse the remote data, then formats the results with `d3.csvFormat`. A commented-out alternative demonstrates fetching the raw text with the Fetch API and parsing it manually using `d3.csvParse`, alongside an async/await approach. The output is rendered into a large `<pre>` element using plain text.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Smiley Face Part II

A reusable React component renders a smiley face, composed of a yellow circular background, two eyes, and an arc-based mouth, all positioned dynamically within the SVG canvas based on window dimensions. The code uses d3's `arc` generator within the `Mouth` component to define the mouth path, while `FaceContainer` and related components manage SVG grouping and attribute passing. The example demonstrates a compositional approach to building SVG visualizations in React, with all shape properties—such as eye offset, radius, and stroke width—passed as props to the `Face` component.

Loading thumbnail…

Fork of Fork of Fork of Fork of Smiley Face Part II

This example shows a scalable smiley face built from reusable React components, with its size and position adapting to the full browser window. The face consists of a yellow background circle, two black eyes, and a D3-generated mouth arc, all composed through nested functional components like `Face`, `BackgroundCircle`, `Eyes`, and `Mouth`. Rendering uses SVG within a React tree, while the mouth shape is created with the `d3.arc()` API, setting inner and outer radii and angular ranges. The code applies React 16.9 and D3 v6, with prop-driven customization for all facial features.

Loading thumbnail…

Fork of Fork of Fork of Smiley Face Part II

A yellow smiley face with black-outlined circular background, eyes, and a curved mouth is rendered full-screen using React components. The face is centered dynamically based on window dimensions, with the mouth drawn using a D3 arc generator. React 16.9 and D3 v6 build the SVG structure, while the Face component composes reusable subcomponents like BackgroundCircle, Eyes, and Mouth.

Loading thumbnail…

Fork of Fork of Smiley Face Part II

A smiley face is rendered as a full-screen SVG, with its size and position derived from the browser window dimensions. The face is composed of three React components: a yellow background circle, two eyes, and a mouth drawn using D3’s `arc` generator. The code uses React 16.9 for component structure, D3 v6 for arc calculations, and SVG for all visual output, with dimensions and offsets defined as constants in the main `App` component.

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a full-screen SVG smiley face using React and D3. It computes the face dimensions from the browser window size and centers the drawing with a D3 arc for the mouth, alongside circles for the head, eyes, and stroke. The code uses ReactDOM to mount the component and d3.arc to generate the mouth path, with all shapes positioned relatively to a central transform group. The visualization is static, demonstrating basic geometric composition with D3 path generation inside a React component.

Loading thumbnail…

Fork of Smiley Face Part II

A smiley face is rendered across the full browser window using React and D3. The code draws a yellow circle with a black stroke as the head, two black eyes positioned symmetrically, and defines a mouth arc via `d3.arc()` that is not yet appended to the SVG. All shapes are generated as React components within an SVG element, with dimensions computed from `window.innerWidth` and `window.innerHeight`. The example uses React 16.9 and D3 v6, relying on declarative JSX for the visualization.

Loading thumbnail…

Fork of smiley face part I

This example shows a simple smiley face drawn with two eyes and a yellow circular head on a blank SVG canvas, with no interactive or animated behavior. The page combines React and D3 v6 by loading both libraries via CDN in the HTML, while the SVG shapes are defined directly in the markup using circle elements with fixed coordinates and stroke styling. A separate React component renders a static "Hello JSX" heading into a root div, demonstrating a minimal integration of React’s component syntax alongside raw SVG rendering.

Loading thumbnail…

Fork of Fork of Fork of Smiley Face Part II

This example adapts the classic smiley face drawing into a responsive React component that fills the browser window. Using React 16.9 and ReactDOM, it renders an SVG with a yellow circle face, two black eye circles, and a mouth outline, all positioned relative to the viewport’s center. The code calculates dimensions dynamically from `window.innerWidth` and `window.innerHeight`, and applies a transform to center the drawing group. It demonstrates React’s declarative approach to SVG composition, with coordinates and radii stored as constants for easy adjustment.

Loading thumbnail…

Fork of Fork of Smiley Face Part II

A yellow smiley face with black outlined eyes and a wide, black-stroked circular head is rendered to fill the entire browser window. The visualization uses React to define the SVG components, with dimensions and positions calculated from the viewport’s `window.innerWidth` and `window.innerHeight`. The code uses `ReactDOM.render` to mount the SVG, which is composed of three `circle` elements: one for the head and two for the eyes, all transformed from the center via an SVG `<g>` group.

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face centered on a responsive full-screen SVG. It uses React (via the `react` and `react-dom` production UMD builds) to declaratively render three circles: a large yellow face with a black stroke, and two smaller eye circles positioned symmetrically from the center. The face radius is derived from the window height minus half the stroke width, while the eyes use fixed offsets and radius. The code configures dimensions and offsets as JavaScript constants, then translates the SVG group to the screen’s center.

Loading thumbnail…

smiley face part I

This example shows a simple smiley face drawn as three circles on a yellow circular background with a black outline. The SVG markup places two smaller circles for eyes and a larger circle for the face, all rendered statically without animation or interaction. The code uses raw SVG elements within an HTML page, setting attributes like `cx`, `cy`, and `r` directly. The rendering approach is SVG with a fixed viewport of 960 by 500 pixels, and no external JavaScript libraries are required.

Loading thumbnail…

Fork of Hello HTML

This example contains a nearly empty HTML page with no visible content or visualization. The page uses fundamental HTML structure, declaring an empty `<body>` element and a title, with no JavaScript libraries, data sources, or rendering logic included. It simply demonstrates the minimal skeleton required for an HTML document to be displayed in a web browser.