P

Pedro Henrique Vanali

@pedrovanali·24 public vizzes

Loading thumbnail…

Combined Missing Migrants on a Map

This visualization combines a bubble map with a time-series histogram to display missing migrant incidents. The map projects geographic coordinates using a natural Earth projection via `d3.geoPath`, with circle sizes scaled by the square root of the total dead and missing count. A histogram below aggregates incidents by month using `d3.bin` and `d3.timeMonths`, summing casualties per bin. The visualization is rendered with React and SVG, using D3 v5 for scales, projections, and data loading from the Missing Migrants Global subset dataset.

Loading thumbnail…

Missing Migrants Scatter Plot

This scatter plot visualizes the total number of dead and missing migrants over time, using a bar chart representation where each bar aggregates the monthly sum of casualties from the Data Canvas Sense Your City dataset. The visualization uses D3 v5 scales and binning functions (scaleTime, scaleLinear, histogram, timeMonths) to group data by month. React renders the SVG, with custom axis components drawing tick marks and labels. Tooltips provide the precise total for each monthly bar when hovered.

Loading thumbnail…

Missing Migrants on a Map

This visualization maps the global distribution of missing migrants, with circle size encoding the total dead and missing per location. The map uses a natural Earth projection rendered via `d3.geoPath`, with land, graticules, and country interiors drawn in SVG. React manages the component state, while D3 scales (`scaleSqrt`) determine circle radii. Data comes from the Missing Migrants Global 2019 subset CSV, loaded with `d3.csv`.

Loading thumbnail…

Rendering data with React & D3

A donut chart of CSS named colors rendered as SVG, with each color represented as a wedge of identical size. The visualization loads color data from a CSV file using `d3.csv`, then uses `d3.pie` to generate arc segments and `d3.arc` to compute their paths. React manages the data-fetching lifecycle through `useState` and `useEffect`, displaying a loading message until the dataset arrives and then mapping each color to an SVG `path` element with its hex value as the fill.

Loading thumbnail…

Points on a Map

This visualization displays world cities as semi-transparent points on an equal-Earth projection map, with circle size encoding each city’s population using d3.scaleSqrt. It renders the landmasses, graticules, and interiors from the World Atlas TopoJSON via d3.geoPath and topojson.mesh. City coordinates and populations come from a CSV loaded with d3.csv. Data loading is managed through React hooks (useState, useEffect), and the SVG scene is composed with React components, using d3.geoNaturalEarth1 for projection and d3.geoGraticule for grid lines.

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between different flower measurements by selecting attributes for the X and Y axes via dropdown menus. The color of each point represents the flower species. Hovering over a species in the color legend dims all other points, making it easy to isolate and compare that group. The visualization is built with React and D3, using `scaleLinear` and `scaleOrdinal` for scales and rendering SVG circles.

Loading thumbnail…

ScatterPlot With Color

This interactive scatter plot visualizes the Iris dataset, displaying the relationship between selected flower measurements with points colored by species. Users can change the x and y axes using React Dropdown menus, with D3 scales determining the plot extents. The visualization uses React with D3 v5 APIs such as `scaleLinear`, `scaleOrdinal`, `extent`, and `csv` for data loading, rendering circles as SVG marks with a color legend.

Loading thumbnail…

Polished ScatterPlot With Menus

This scatter plot displays the Iris dataset, showing relationships between flower measurements. Users select which attributes appear on the x and y axes via two dropdown menus, updating the visualization. The SVG chart uses d3.scaleLinear for scales, d3.extent for domains, and custom axis components. React manages the application state, while ReactDropdown provides the menu interface.

Loading thumbnail…

ScatterPlot With Menus

This interactive scatter plot displays the Iris dataset, allowing users to dynamically select which sepal and petal measurements appear on the x- and y-axes through dropdown menus. Each flower’s measurements are plotted as SVG circles with tooltips showing their values. Built with React and D3 v5, the visualization uses d3.csv for data loading, d3.scaleLinear and d3.extent for scaling, and custom React components for axes and marks. The axis labels update to reflect the currently selected attributes.

Loading thumbnail…

Menus With React

This example shows a React-based dropdown menu for selecting a pet, with the current choice displayed via a label and console output. The dropdown uses React’s `useState` hook to manage the selected value, and a reusable `Dropdown` component renders the `<select>` element and handles `onChange` events. The code integrates D3 v5 and React 16.9 via UMD builds, though D3 is not actively used in this visualization. A list of predefined pet options (dog, cat, hamster, etc.) serves as the data source, with “hamster” as the initial value.

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders an empty `<div>` element as its entire user interface. The code manually loads React 16.9.0, ReactDOM, and D3 v5.11.0 via CDN script tags in the HTML, then uses `ReactDOM.render` to mount a functional `App` component into the root DOM node. While the component itself contains no visualizations, the setup serves as a foundation for integrating D3 with React, with the body hidden by `overflow: hidden` and all content constrained to the viewport.

Loading thumbnail…

World Example

This world map visualization displays global landmasses and country interiors using an SVG rendering. The map is constructed with D3’s geoNaturalEarth1 projection and geoPath for geographic shapes, while topojson’s feature and mesh functions process the world-atlas topology data. The graticule, sphere outline, and land areas are styled with distinct colors, and the visualization is built as a React component that loads data asynchronously via d3.json.

Loading thumbnail…

Fork of Stylized Line Chart

This fork of the stylized line chart displays weekly temperature data for San Francisco as a smooth, natural curve. The React component uses the d3.scaleTime and d3.scaleLinear functions to map timestamps and temperature values to SVG coordinates, with d3.line's curveNatural interpolation creating the flowing path. The chart includes axis labels and tick marks generated by custom React components, while the commented-out circles suggest a potential tooltip feature that is not currently rendered. Data loads asynchronously via the d3.csv function from a GitHub-hosted CSV file.

Loading thumbnail…

Stylized Line Chart

A stylized line chart visualizes weekly temperature trends in San Francisco from the Canvas Sense Your City dataset. The visualization renders temperature readings over time, with circular marks for each data point and styled axes labeled "Temperature" and "Time." Built with React and D3 v5, the code uses `scaleLinear` and `scaleTime` for axes, `csv` for data loading, and displays tooltips via SVG `<title>` elements. The chart employs a Poppins font, teal circular markers, and custom axis styling to create a clean, modern aesthetic.

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot displays the Iris dataset, plotting sepal length on the x-axis and sepal width on the y-axis as teal circles. Built with React and D3 v5, the visualization uses `scaleLinear` for both axes, `extent` to compute domains, and renders marks as SVG circles via a custom `Marks` component. The axes are generated by `AxisBottom` and `AxisLeft` components, with tick labels formatted using D3's `format` function. The chart features a Poppins font, styled gridlines, and tooltips that show the x-value on hover, with data loaded asynchronously via the `csv` function.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries, using horizontal bars to compare their 2020 populations. The visualization uses a D3.js v5 linear scale for the x-axis and a band scale for the categorical y-axis, rendered as an SVG through React. Data comes from the United Nations World Population Prospects 2019, loaded via D3's CSV parser. The chart includes labeled axes and tooltips that format population values in billions.

Loading thumbnail…

Refactor Bar Chart

This bar chart visualizes the top 10 most populous countries using data from the United Nations World Population Prospects 2019, with a shameful lack of axes emphasizing the raw bar lengths. The React application uses D3 v5 utilities like `csv`, `scaleBand`, and `scaleLinear` to load and scale the data, while custom components `AxisBottom`, `AxisLeft`, and `Marks` render the SVG output. The x-axis uses a linear scale for population values, the y-axis employs a band scale for country categories, and the chart is drawn with SVG rectangles whose widths encode population.

Loading thumbnail…

Pathetic Bar Chart

This example displays the top 10 most populous countries as a minimal bar chart with no axes or gridlines, using only bars and country labels. The visualization is built with React and D3 v5, employing `scaleBand` for the y-axis positioning of countries and `scaleLinear` for the x-axis bar lengths based on population values. Data comes from the United Nations World Population Prospects 2019, loaded via `csv`. The chart renders as SVG, with tick marks and labels generated programmatically, though no axes are drawn.

Loading thumbnail…

Vega Lite API

This example demonstrates a bar chart of population by country, built using the Vega Lite API within a React application. The chart sorts countries by population in descending order and displays a tooltip with the population value for each bar. The visualization is rendered as an SVG, using the Vega, Vega-Lite, and Vega-Lite API libraries, along with D3 for data loading. The data is fetched from a remote CSV file containing population figures by country.

Loading thumbnail…

Fork of Loading and Parsing React

This example displays the loading and parsing of a CSS color dataset. It uses a `React` component with a `useEffect` hook to parse CSV data, provided as a string, via `d3.csvParse`. The visualization then reports the file size, row count, and column count of the dataset in a `<pre>` element. The project relies on React for the UI and D3 for data parsing.

Loading thumbnail…

Loading and Parsing

A React component renders an interactive smiley face as an SVG circle that follows the mouse cursor across a 960x500 canvas. The code uses React's `useState` and `useCallback` hooks to track mouse position and updates the circle's `cx` and `cy` attributes on every `mousemove` event. It imports the `arc` function from D3 v5, though the visible SVG only draws a single circle without additional facial features. The example demonstrates basic event handling and state-driven rendering in a React-D3 integration.

Loading thumbnail…

Mouse Follower

A small yellow circle tracks the mouse cursor across a blank SVG canvas in real time. The example demonstrates a simple interactive follower effect, where the circle’s center coordinates update on every mouse movement event. Built with React and D3.js v5, it uses `useState` to store cursor position and an SVG `onMouseMove` handler to trigger state changes. The rendering approach is purely declarative, with the circle’s `cx` and `cy` attributes directly bound to the current mouse coordinates, and D3 is imported but not used beyond the basic setup.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the size and structure of a CSV dataset containing CSS named colors. The visualization presents three key statistics—file size in kilobytes, row count, and column count—as large text rendered inside an HTML `<pre>` element. The code uses D3 v5’s `d3.csv` promise-based loading API to fetch the remote CSV file and parse it, then `d3.csvFormat` and `data.columns` to compute the metrics. It highlights the simplicity of D3’s built-in CSV handling compared to alternative fetch and async/await approaches included as commented-out code.

Loading thumbnail…

Fork of Smiley Face Part VI

A grid of twenty randomly generated smiley faces is rendered in SVG, each with slightly different eye positions, radii, stroke widths, and mouth arcs. The code builds the faces from reusable React components, including a face container that translates the SVG group, and uses the D3 `arc` API to generate the mouth path. All faces are created from a `range` array and mapped to the `Face` component, with visual variation driven by `Math.random` values passed as props.