MGamboa

@mhgamboa·10 public vizzes

Making a Bar Chart with React & D3

This example shows how to build a bar chart with React and D3, displaying the top 10 countries by population from a 2019 UN dataset. The chart renders SVG rectangles, with countries on the y-axis using `scaleBand` and population values on the x-axis using `scaleLinear`. The data is loaded asynchronously via `d3.csv`, and React state manages the loading and storage of the parsed dataset. The visualization demonstrates a clean separation of concerns, where D3 handles scales and data loading while React manages component rendering and state updates.

May 6, 2021

Loading thumbnail…

Visualizing Data with React & D3

This example displays a pie chart of CSS named colors, loaded from a CSV file. Each slice represents a color, and its fill is the color’s hex value. The code uses D3 v6 utilities `d3.csv` to fetch the data and `d3.pie` along with `d3.arc` to compute the pie geometry. React manages the application state, initially showing a “Loading…” message while the CSV is fetched, then rendering the chart as SVG paths.

May 5, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow smiley face rendered as SVG in a React component shows static facial features: two black eyes and a mouth arc. The face circle uses a yellow fill with a black stroke, while the mouth is drawn using the d3.arc() generator with specified inner and outer radii and start/end angles. The code uses d3 v6 and React 17, with all shapes positioned via SVG coordinates and transforms. The visualization demonstrates the fundamental D3 shape-generating API within a React rendering pipeline, with no interaction or animation.

May 5, 2021

Loading thumbnail…

Loading Data in React & D3

This example demonstrates how to load and summarize CSS named color data in a React application. The code uses `d3.csv` to fetch a remote CSV file, then computes the formatted data size, row count, and column count, displaying these statistics as text. React state manages the asynchronous data loading, showing “Loading...” until the data arrives. The visualization renders simple text output via SVG-less HTML, with D3 v6 handling data parsing and formatting while React 16 manages the component lifecycle.

May 5, 2021

Loading thumbnail…

Vega-Lite API Template

This example demonstrates how to use the Vega-Lite API to build a scatter plot of automobile data, showing the relationship between weight, horsepower, and fuel efficiency (mpg), with points colored by country of origin. The visualization leverages the vega-lite-api JavaScript library to construct the chart declaratively, then renders it using Vega and Vega-Lite with an SVG output. Data is loaded asynchronously from a CSV file using D3’s `csv` function. Custom styling is applied through a config object to adjust axis labels, fonts, and colors for improved readability.

May 3, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data using D3 v6. It fetches a dataset of CSS named colors from a GitHub gist and displays three summary values: file size in kilobytes, total row count, and column count. The code uses `d3.csv` to load the remote file and `d3.csvFormat` to calculate its size, then renders the results as large text. The page also shows a commented-out older approach using `fetch` and `d3.csvParse` for comparison.

Apr 30, 2021

Loading thumbnail…

Mouse Follower

A React application renders a blank SVG canvas that follows the mouse cursor with a single black circle. The circle’s position updates on every mouse movement through React’s state management, using the `onMouseMove` event handler to capture `clientX` and `clientY` coordinates. The component re-renders to reposition the circle via the `setState` method, while the SVG viewport remains fixed at 960 by 500 pixels. This example demonstrates interactive state-driven updates in React with SVG elements.

Apr 28, 2021

Loading thumbnail…

Let's Make a Face Part V

This gallery example shows a grid of eighteen randomly generated smiley faces, each built as a static SVG composition in React. The faces are created using React components that assemble D3-generated SVG shapes: a yellow background circle, two eye circles, and a mouth arc drawn with the D3 `arc()` generator. Each face’s stroke width, eye offset, eye radius, and mouth dimensions are randomized, producing a small variety of facial expressions. The code relies on React’s component model for structure and D3’s geometry helpers for the path data, rendering everything directly to SVG.

Apr 26, 2021

Loading thumbnail…

Let's Make a Face Part IV

A smiling face rendered as a yellow circle with black stroke, two eyes, and a curved mouth on an SVG canvas. The React component uses D3's `arc` API to generate the mouth path, while the background and eyes are simple SVG circles. The face is centered and drawn using SVG elements, with dimensions and positions defined as constants.

Apr 23, 2021

Loading thumbnail…

Let's Make a Face Part II Assignment

This example displays a stylized smiley face built from SVG primitives, rendered in React with D3.js. The face features yellow circular head with black outline, eyes, an arc-based mouth, and asymmetrical angled lines for eyebrows. The code uses D3’s `d3.arc()` to generate the mouth path and React’s JSX to define circle, path, and line elements. All coordinates are calculated relative to the center of an SVG viewport, with fixed width and height values, and the composition is static without interactivity or data binding.

Apr 22, 2021