Gonzalo Alarcón Usui

@Gonxolo·16 public vizzes

Scatter Plot with Color

This interactive scatter plot displays the Iris flower dataset, plotting measurements like petal length and sepal width. Users can select which attributes to display on the X and Y axes via dropdown menus, and hovering over a circle reveals its exact value through a tooltip. The visualization uses React for state management and D3 v7’s `scaleLinear` and `extent` functions to compute axes and scales. Points are rendered as SVG circles, with styled tick marks and axis labels for clarity.

Dec 5, 2021

Loading thumbnail…

Polished Scatter Plot with Menus

An interactive scatter plot displays the Iris dataset, mapping four numeric flower measurements along selectable X and Y axes. Two dropdown menus, implemented with ReactDropdown, let users choose which measurement to visualize on each axis. The plot uses D3.js scales and axes within a React framework, rendering SVG circles with tooltips that show formatted values. The interface also includes axis labels that update dynamically to reflect the currently selected attributes.

Dec 5, 2021

Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus control which numeric attribute is displayed on the x-axis and y-axis, with the chart updating dynamically. The visualization is built with React and D3 v7, using `scaleLinear` for axes and `csv()` to load the data. SVG circles represent individual flowers, with tick marks and axis labels rendered via custom React components.

Dec 5, 2021

Loading thumbnail…

Menus with React

This interactive example demonstrates a pet selector with six options, showing the current selection in a large dropdown menu. Built with React, the app uses a `Dropdown` component that renders an HTML `<select>` element, managing state through `useState` and passing the selected value back via `onSelectedValueChange`. The interface includes a label and styled options with large font sizes on a full-viewport canvas. The code imports React and ReactDOM to render the application into a root div, while styling is applied directly in the HTML head.

Dec 5, 2021

Loading thumbnail…

React Starter

This React starter example renders a simple “Hello React!” message to the browser. The code uses React 17 and ReactDOM to mount the root component into a div with the ID `root`. The app is defined as a functional component that returns a single div containing the text. The example demonstrates the minimal setup required for a React visualization gallery entry, with the page’s styling clearing body margins and hiding overflow.

Dec 5, 2021

Loading thumbnail…

World Map

This visualization renders a natural Earth projection world map using SVG paths. The map displays landmasses in teal with country borders drawn as interior mesh lines, set against a light gray sphere and graticule grid. Built with React and D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule`, it loads geographic data from World Atlas TopoJSON, converting it with `feature` and `mesh` to draw each country. The static composition highlights global geography with clean styling.

Dec 5, 2021

Loading thumbnail…

Working with Time

This interactive line chart visualizes temperature fluctuations over the course of a week in San Francisco. The visualization uses React to render SVG elements and D3.js scales and axes to map timestamps and temperature values. A natural curve connects the data points, while circles with tooltips appear at each measurement, and the x-axis displays abbreviated day names using the `timeFormat` function. Data is loaded from a CSV file using d3.csv.

Dec 5, 2021

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris flower dataset, plotting petal length against sepal width with circular marks. React renders the SVG visualization, while D3 v7 handles data loading via `csv` and scales with `scaleLinear` and `extent`. The tooltip displays formatted values through native SVG `<title>` elements, and the Poppins font styles the axis labels and tick text with a custom color scheme.

Dec 5, 2021

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 countries by population from the UN Population 2019 dataset, with horizontal bars ranked by country name. The visualization uses React and D3 v7 to render SVG elements, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the numerical x-axis. A custom tick formatter converts large population values into abbreviated SI units, and CSS styling applies a teal bar color with Poppins font, while hover tooltips reveal exact values via SVG `<title>` elements.

Dec 3, 2021

Loading thumbnail…

Refactored Bar Chart

A bar chart displays the 2020 populations of ten countries using D3.js v7 scales, with country names on the y-axis and population magnitudes on the x-axis. React components—AxisBottom, AxisLeft, and Marks—render the SVG axes and horizontal rectangles. The data loads from a CSV via `useData` and `d3.csv`, while `scaleBand` and `scaleLinear` map values to pixel coordinates.

Dec 2, 2021

Loading thumbnail…

Axes with React & D3

This example shows a horizontal bar chart of the top 10 countries by 2020 population, with axes labels rendered as individual SVG elements. It uses React’s useState and useEffect hooks to load CSV data from a GitHub gist, then builds scales with d3.scaleBand and d3.scaleLinear. Axes ticks are generated manually via d3’s tick() method, with each tick and label positioned using SVG transforms, while bars are drawn as rect elements.

Dec 2, 2021

Loading thumbnail…

Rendering Data with React & D3

This example renders a pie chart of CSS named colors using React for component structure and D3 for data processing and shape generation. It loads color data from a CSV file via `d3.csv`, transforms it with `d3.pie`, and draws arcs using `d3.arc` within an SVG canvas. Each slice is filled with its corresponding RGB hex value, creating a full circle where the data is mapped to distinct color segments. The visualization demonstrates a hybrid approach where React manages state and rendering while D3 handles the mathematical and geometric computations.

Dec 2, 2021

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a bar chart of presidential election totals by candidate, with bars sorted in descending order and tooltips showing the total votes for each candidate. The visualization uses the Vega-Lite API to declaratively define the chart specification, while D3’s `csv` loader fetches the dataset from a Gist, and the UCI Auto MPG data source is referenced. The code registers Vega and Vega-Lite libraries, applies a custom configuration for axis and label styling, and renders the output as a full-screen, responsive SVG using the `vega-lite-api` `render()` method.

Dec 2, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and summarize external CSV data within a React application using D3. The interface displays a text summary of the dataset, including file size in kilobytes, row count, and column count, which updates once the data finishes loading. The code uses React hooks (`useState`, `useEffect`) to manage asynchronous state, fetches data via D3’s `csv` function from a GitHub gist containing CSS named colors, and formats the output with `d3.csvFormat`. A loading message appears while the request is pending, and the result is rendered inside a `<pre>` element.

Dec 2, 2021

Loading thumbnail…

Mouse Follower

A single yellow circle tracks the mouse position within an SVG viewport of 960 by 500 pixels. The React component uses the `useState` hook to store the mouse coordinates, which are updated on every `mousemove` event via the `handleMouseMove` callback. The circle’s `cx` and `cy` attributes are bound to the current state, causing it to follow the cursor directly without any animation or interpolation. The rendering is handled entirely by React’s declarative SVG elements, with no D3 API calls used.

Dec 2, 2021

Loading thumbnail…

Smiley Face Part IV

This example shows a yellow smiley face with black outlines, featuring two eyes and an arc-shaped mouth, centered on a plain white background. The face is constructed from React component primitives (BackgroundCircle, Eyes, Mouth, and FaceContainer) that assemble the SVG elements. The code uses `d3.arc()` from the d3 library to generate the mouth’s path, with parameters for radius, width, and start/end angles. The overall positioning—face center, eye offsets, and stroke thickness—is configured through props passed to the main `Face` component, which renders the SVG output.

Dec 2, 2021