Felipe Restrepo felipollo

@Felipecaili·8 public vizzes

Migrants Map Replica

This interactive map displays the global distribution of missing migrants, with circle size representing the number of dead or missing individuals. A linked histogram below the map allows users to brush over a time range, filtering the map to show only incidents within that period. The visualization is built with React and D3 v5, using `d3.geoPath` and `geoNaturalEarth1` for the map projection, `d3.scaleSqrt` for proportional symbol sizing, and `d3.brushX` for the interactive filtering. Data comes from a CSV file containing migrant incidents reported in 2019.

Oct 16, 2024

Loading thumbnail…

Migrants Replica

This histogram displays the monthly total of dead and missing migrants over time, with each bar representing a month and its height reflecting the aggregated count. The visualization uses React components and D3 v5 APIs including `scaleTime`, `scaleLinear`, and `histogram` to bin data by month and sum values. Rectangular marks render as SVG elements with tooltips showing exact counts and dates. The underlying data comes from the Data Canvas Sense Your City Dataset on missing migrants.

Oct 13, 2024

Loading thumbnail…

Loading Data (Replica) with React & D3

This visualization demonstrates React managing D3-driven data loading and rendering. It displays a bar chart of the top 15 most populated countries, alongside a pie chart of CSS named colors, with data fetched via D3's `csv` utility. Using React's `useState` and `useEffect` hooks, the program loads CSV data from GitHub Gists, then renders SVG using D3's `scaleBand`, `scaleLinear`, and `arc` APIs. Axes and bars are defined as reusable React components.

Sep 29, 2024

Loading thumbnail…

Vega-Lite API Template Replica

This example reproduces a Vega-Lite scatterplot using the Vega-Lite API to visualize automobile performance data from an auto-mpg CSV file. It plots miles per gallon against horsepower, colored by origin, with tooltips showing vehicle names. The chart renders as an SVG via Vega’s view system, using the vega-lite-api, vega, and vega-lite libraries. Custom configuration adjusts axis and label styling, while D3’s d3.csv loads the data.

Sep 25, 2024

Loading thumbnail…

CSV Data Loading and Parsing

This example demonstrates the process of loading and parsing a CSV file containing CSS Named Colors. The visualization presents a summary of the parsed data as text, showing the file size in kilobytes, the number of rows, and the number of columns. The code uses the `fetch` API to retrieve the remote CSV and the `d3.csvParse` function to convert the raw text into a structured data object. The resulting metrics are displayed in a large `pre` element, providing immediate feedback on the data loading operation.

Sep 24, 2024

Loading thumbnail…

Mouse Follower Replica

This example shows a circle that follows the mouse cursor across an SVG canvas, updating its position in real time. Built with React, it uses the `useState` hook to store mouse coordinates and a `handleMouseMove` callback that updates state on every SVG `onMouseMove` event. The circle’s `cx` and `cy` attributes are bound to the current state, while the SVG viewport is set to an 960×500 pixel area. No external data is used; the visualization responds solely to user input.

Sep 24, 2024

Loading thumbnail…

My first SVG face

A grid of 18 cartoon faces, each rendered as a yellow SVG circle with black outlines, eyes, and a mouth, demonstrates reusable React components for data-driven graphics. The faces are generated with randomized parameters for stroke width, eye positioning, eye radius, and mouth dimensions using `Math.random()`. The code composes `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` components, with the mouth path computed via d3's `arc()` generator. The visualization uses React 16 and d3.v7, rendering purely through SVG elements without any canvas or interactive behavior.

Sep 23, 2024

Loading thumbnail…

My first SVG face

This example shows how to create a simple, static face graphic using Scalable Vector Graphics (SVG) directly in an HTML document. The visualization is rendered from scratch, combining basic geometric shapes such as circles and lines to form the eyes, nose, and mouth. The code relies on plain SVG elements embedded in an `index.html` page, without using any JavaScript libraries or external data sources. The minimal HTML structure and SVG markup demonstrate a foundational approach to constructing vector-based illustrations for the web, providing a clean starting point for beginners.

Sep 22, 2024