A

Alex Gomes

@agomesd·19 public vizzes

Loading thumbnail…

React Dropdown Menus

This example demonstrates a simple React dropdown menu for selecting a pet, with a large, readable interface optimized for demonstration purposes. The code uses React 16.9.0 and ReactDOM to render a single `<select>` element containing seven options, including a placeholder prompt. Styling is applied via inline CSS in the HTML file, adjusting font sizes for the label and select controls. The application mounts to a root `<div>` element, and the implementation is minimal, showing basic form control composition without any external data sources or event handling logic.

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders a static “Hello world” message in the browser. The page loads the React and ReactDOM libraries from unpkg, and the `index.js` file defines a simple functional component before mounting it to the `#root` element via `ReactDOM.render`. The accompanying `README` mentions a smiley-face implementation, though the displayed code only shows the basic text output, not additional visual content.

Loading thumbnail…

World Map

This world map visualizes global land masses and country boundaries using a natural Earth projection. The code renders geographic features as SVG paths, with a light blue sphere, graticules, and land areas colored via CSS. It uses React to manage state and render components, while D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` handle projection and path generation. TopoJSON data from the World Atlas (`countries-50m.json`) is loaded with `d3.json` and processed using `feature` and `mesh` to extract land polygons and interior borders.

Loading thumbnail…

Fork of Gunz N' Roses Moving Bars

This interactive bar chart visualizes the values of "gunz" and "roses" over seven days in January 2020. It uses a grouped bar layout where each date has two colored bars, with a legend and draggable bars that allow users to manually adjust values. The visualization is built with D3 v5, using SVG rendering and animation. It relies on D3's `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `scaleOrdinal` for color encoding. The `drag` API from D3 enables the interactive bar manipulation.

Loading thumbnail…

Fork of Bar Graph - New York Homeless Population (2009-2012)

This visualization displays New York's homeless population from 2009 to 2012, broken down by area and year using grouped bar charts. Each bar represents the population count for a specific area, with colored segments distinguishing the four years. The chart uses D3 v5’s `scaleBand`, `scaleLinear`, and `scaleOrdinal` APIs to position bars, scale values, and assign colors. A legend identifies each year, while axes and a title provide context. Data comes from the local `data.csv` file, rendered as SVG elements.

Loading thumbnail…

World Map

This visualization displays temperature data over time as a line chart with circular markers for each data point. The x-axis uses a time scale (d3.scaleTime) with day-of-week tick labels, while the y-axis uses a linear scale (d3.scaleLinear). Built with React and D3 v5, it renders SVG elements, with the line path created using d3.line() with curveNatural smoothing. Data is fetched via d3.json from a world-atlas TopoJSON file (though the chart plots temperature readings, not map features). Hovering over circles shows tooltips formatted with d3.timeFormat.

Loading thumbnail…

Working with Time

This example visualizes weekly temperature variations in San Francisco using a smooth, natural curve with circular data points. The SVG chart displays temperature on the y-axis and time on the x-axis, with tick marks formatted to show abbreviated weekday names. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, `extent`, and `line().curve(curveNatural)` to construct the visualization. Data is loaded asynchronously from a remote CSV file via `d3.csv`, while React state manages the loading process.

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris flower dataset, plotting sepal length against sepal width for individual specimens. The visualization uses React components to render SVG circles and axes, with D3 v5 utilities handling data loading via `d3.csv`, linear scaling with `scaleLinear`, and axis tick generation. The chart features custom styling for marks and axes, including a distinctive cyan fill for data points and a loading state displayed before data arrives.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 countries by population in 2020, using a neon cyan fill and a custom Smooch Sans font for a distinctive visual style. The chart renders as an SVG via React components, with D3’s scaleBand and scaleLinear mapping country names to vertical bands and population counts to horizontal bar lengths. Axis ticks and tooltips are formatted using d3.format, converting large numbers into abbreviated “B” for billions. Data is loaded asynchronously from a CSV URL using d3.csv and managed through React’s useState and useEffect hooks.

Loading thumbnail…

Refactored Bar Chart

This example presents a bar chart of population data for the top ten countries in 2020, sourced from a CSV file via a custom React hook that uses D3’s `csv` utility. The visualization is rendered as SVG, with React components for the axes (`AxisBottom`, `AxisLeft`) and bars (`Marks`), using D3 scales (`scaleBand`, `scaleLinear`) to map country names and population values to pixel coordinates. The chart loads asynchronously and displays a placeholder while fetching data.

Loading thumbnail…

Axis with react and d3

This example displays a horizontal bar chart of the top 10 countries by 2020 population, loaded from a CSV file via `d3.csv`. It combines React state management with D3 scales: `d3.scaleBand` positions country labels on the y-axis while `d3.scaleLinear` maps population values to bar widths. The SVG rendering includes axes with tick marks and labels generated from `xScale.ticks()`, with bars drawn as `<rect>` elements and a loading message shown before data arrives.

Loading thumbnail…

The Margin Convention

This example demonstrates the margin convention for D3 visualizations in a React application. It displays a horizontal bar chart of the top 10 countries by 2020 population from UN data, loaded via d3.csv. The SVG rendering uses d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis, with a margin object defining the inner plotting area. React state manages the async data loading, and the chart updates once the CSV parsing completes.

Loading thumbnail…

Fork of Loading Data with React & D3

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, based on UN population data loaded from a CSV file. The visualization uses React state to manage the asynchronous data loading, with the `useEffect` hook triggering a D3 `csv` request. The chart renders SVG rectangles whose widths are scaled by population using `scaleLinear`, while country names are positioned along the y-axis with `scaleBand`. The code demonstrates integrating D3 utilities for data fetching and scaling within a React component architecture.

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting vehicle weight against horsepower with points colored by origin and sized by miles per gallon. Built with the Vega-Lite API, it renders an interactive scatter plot using d3.csv for data loading and Vega-Lite’s markCircle encoding for graphical marks. The visualization uses a custom configuration to adjust axis styling, font sizes, and tooltip appearance, all rendered as SVG with dynamic width and height based on the viewport.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to combine React and D3 to load and summarize a CSV dataset, displaying file size, row count, and column count. The app uses React’s `useState` and `useEffect` hooks to fetch data asynchronously via `d3.csv` from a GitHub Gist, then renders the summary using a custom `message` function that leverages `csvFormat`. While loading, it shows a "Loading..." placeholder. The code relies on D3 v7 and React 16.9, with the browser rendering the output in a large `<pre>` element.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data by fetching a dataset of CSS named colors and displaying basic statistics about it. The code uses the Fetch API with async/await to retrieve the data, then parses it with d3.csv, which returns a promise. It computes the file size in kilobytes, row count, and column count from the parsed data, displaying these values in a large pre-formatted text element. The visualization also includes commented-out code showing an alternative approach using d3.csvParse on raw text.

Loading thumbnail…

Mouse Follower

A single black circle follows the mouse cursor across a blank SVG canvas. The React component tracks pointer coordinates via the `onMouseMove` event, updating the circle’s `cx` and `cy` attributes with the client’s position. Using `useState` to hold the origin and `useCallback` for the handler, it re-renders the circle at the new location on every movement. The example demonstrates dynamic SVG updates driven by React state changes without external data.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file from a remote URL using JavaScript's built-in `fetch` API, logging the raw text content to the console. The code defines an asynchronous `fetchText` function that retrieves the CSV data from a GitHub Gist containing CSS named colors. After fetching, the `.then()` callback simply prints the retrieved CSV text. While it does not visualize the data, it serves as a foundational starting point for parsing and processing tabular data in web applications.

Loading thumbnail…

Smiley face part 1

A grid of identical smiley faces fills the screen, each rendered as an SVG circle with two eyes and an arc-shaped mouth. The example demonstrates React component composition, with separate components for the face, background, eyes, and mouth. It uses d3.arc to generate the mouth path and d3.range to create 15 faces. The SVG viewport is centered via a translation transform, and styling comes from inline attributes.