F

Felipe Mejías

@fmejias·19 public vizzes

Loading thumbnail…

DataViz Project - Third Visualization - Mental Illness Choropleth Map with Linked Line Chart and Color Legends

A choropleth map displays the global percentage of national populations with mental illness for a selected year, with a linked line chart below showing each country's trend over time. Moving the mouse across the chart updates the selected year, redrawing the map's sequential blue color scale and positioning a vertical line on the line chart. The visualization uses React with D3 v5, including `geoNaturalEarth1` and `geoPath` for map projections, `scaleSequential` for coloring, and `scaleTime`/`scaleLinear` for the line chart. Data comes from a CSV of mental health disorders, with country boundaries from TopoJSON.

Loading thumbnail…

DataViz Project - Third Visualization - Mental Illness Choropleth Map

This choropleth map visualizes the percentage of each country’s population affected by mental illness in 2017, highlighting geographical disparities and enabling comparisons across regions. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` to render country boundaries and graticules, while a `scaleSequential` with `interpolatePuBu` encodes data values as color intensity. Country codes are mapped to numeric identifiers via CSV data, and missing values appear in black. The map is interactive through SVG tooltips showing country names.

Loading thumbnail…

Project Dashboard - Mental Illnesses, Unemployment and Suicides over the years

This dashboard combines multiple linked views to explore mental illness, unemployment, and suicide rates. It shows how the top five countries affected by unemployment compare in mental illness prevalence for a selected year, alongside line charts tracking these metrics over time for chosen countries and conditions. The visualization uses React with D3 v5, employing `scaleBand` and `scaleLinear` for the bar chart, `scaleTime` for temporal axes, and custom drop-down menus for filtering. Data comes from an external CSV file, rendered as SVG with interactive color legends and hover effects.

Loading thumbnail…

DataViz Project - Second Visualization

This interactive bar chart compares unemployment rates and mental illness prevalence across the five most affected countries for a selected year. Users can switch between 1995, 2000, 2005, 2010, and 2015 via a React dropdown menu. The visualization uses React hooks, d3.scaleBand and d3.scaleLinear for axes, and d3.csv to load the mental health dataset from a GitHub gist. Hovering over the color legend highlights corresponding bars and fades others, with tooltips showing exact values.

Loading thumbnail…

People affected by mental diseases over the years in American Countries

This interactive visualization shows how the percentage of a population affected by various mental health disorders changes over time across American countries. Users can select a country and a mental disease from dropdown menus to filter the view. A single line chart displays the trend using SVG paths generated with d3.line and curveNatural. The React application uses D3 v5 scales (scaleTime, scaleLinear) for axes and data from a CSV file loaded via d3.csv.

Loading thumbnail…

DataViz Project - Suicides Visualization

An interactive line chart visualizes suicide death rates in American countries over time, alongside related mental health and unemployment metrics. A country selector filters the dataset, and a color legend distinguishes unemployment from mental illness data. Built with React and D3 v5, the visualization uses `scaleTime`, `scaleLinear`, and `curveNatural` for path rendering, with data from a CSV hosted on GitHub Gist. The SVG output includes custom axes and a dropdown menu for country selection.

Loading thumbnail…

DataViz Project - First Visualization

This interactive line chart, built with React and D3 v5, visualizes the percentage of a country's population affected by mental illness and unemployment over time, with a dropdown menu to select among six American countries. The SVG rendering uses D3's `scaleTime` and `scaleLinear` for the axes, and natural cubic spline curves via `line().curve(curveNatural)` to smooth the trends. A custom color legend distinguishes the two metrics, shown as green (mental illness) and orange (unemployment) lines, using data from a CSV file hosted on Gist.

Loading thumbnail…

DataViz Project - Third Visualization - Mental Illness Choropleth Map with Linked Line Chart

A choropleth map shades countries by the percentage of their population with mental illness for a selected year, while a linked line chart below plots the same metric over time for every country. Moving the mouse horizontally across the chart updates the map to the corresponding year. The visualization uses React with D3 v5, including `geoNaturalEarth1` and `geoPath` for the map, `scaleSequential` with `interpolatePuBu` for color encoding, and `scaleTime` for the year axis. Data comes from a CSV of mental health disorders, with country boundaries from World Atlas TopoJSON.

Loading thumbnail…

Selecting a year on a line chart using React

A line chart displays mental health disorder rates in Costa Rica from 1990 to 2017, with a dropdown menu to switch between seven disorder categories. The chart uses React and D3 v5, rendering an SVG with a vertical black line that follows the mouse cursor to select a year. This selection is computed by inverting the x-scale from the mouse position, and the x-axis uses a time scale with yearly ticks. Data comes from a CSV file loaded via `d3.csv`.

Loading thumbnail…

People affected by mental diseases over the years in American Countries with Interactive Legends

This interactive line chart shows the percentage of the population affected by mental health disorders in four American countries—Costa Rica, Colombia, Honduras, and Ecuador—from 1990 to 2017. A dropdown menu lets users select among seven disorder types, while a color legend highlights individual country trends. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map data, with hover interactions on the legend fading non-selected countries. The visualization draws SVG paths using `d3.line` with `curveNatural`, rendering data from a CSV loaded via `d3.csv`.

Loading thumbnail…

Pacman Simulation

This interactive Pacman simulation presents a maze with blue walls, a yellow player circle, and collectible red and green fruit. The player controls Pacman by moving the mouse cursor within the maze’s boundaries. The simulation uses React to manage state and D3.js functions like `scaleOrdinal` for color mapping and `range` to generate game points. SVG elements render the maze, Pacman, and fruits, with mouse events triggering point collection and hiding consumed items.

Loading thumbnail…

Tweak a Face - Assignment

This example shows a stylized face built from basic SVG shapes, including a head, eyes, pupils, nose, mouth, and angular eyebrows, with additional line-based accents on either side. All elements are rendered in a single SVG canvas using React components. The code defines the face’s geometry with D3’s `arc` generator for the mouth and eyebrows, and uses fixed coordinates and radii for the circles and lines. It demonstrates a straightforward combination of React’s declarative JSX with D3 shape utilities to produce a static vector illustration.

Loading thumbnail…

Mental health disorders Dataset Summary

This example displays a plain-text summary of a mental health disorders dataset, showing the dataset’s name, size in kilobytes, row count, and column count on the page. It loads the CSV file from a GitHub gist using `d3.csv`, then formats the data with `d3.csvFormat` to compute the file size and accesses the parsed rows and columns. The resulting message is rendered into a `<pre>` element, while the full parsed dataset is also printed to the browser console. The code relies on D3 v5 for data loading and formatting.

Loading thumbnail…

Suicide Deaths Rate Dataset Summary

This interactive web page displays a plain-text summary of the Suicide Deaths Rate dataset, including its size in kilobytes, row count, and column count. It loads the CSV data from a GitHub Gist using the `d3.csv` method, then formats the data in memory with `d3.csvFormat` to estimate its size. The resulting message is rendered inside an HTML `<pre>` element, while the full parsed data is output to the browser console via `console.log`. The page relies on D3 version 5.11 and uses no other visualization libraries.

Loading thumbnail…

Unemployment Rate Dataset Summary

This example presents a plain-text summary of the Unemployment Rate dataset, displaying its name, size, row count, and column count in large type. The program loads the data from a GitHub-hosted CSV file using D3 v5’s `d3.csv` method, then calculates the file size by formatting the parsed data with `d3.csvFormat` and measuring the length in kilobytes. The resulting statistics are rendered to the page via the DOM’s `textContent` property, while the full dataset is also printed to the browser console for inspection.

Loading thumbnail…

Unemployment in all the world over the years

This visualization displays the unemployment rate as a percentage of the population for five countries—Costa Rica, Argentina, Brazil, Ecuador, and Colombia—from 2000 onward, using a multi-line chart. It uses the vega-lite-api to define the visualization, with D3’s `csv` loader fetching data from a Gist-hosted dataset. The code filters years, multiplies raw values by 100, and configures axes, colors, and tooltips via Vega-Lite specifications.

Loading thumbnail…

Percentage of deaths by suicide in some countries over the years

This visualization displays the percentage of deaths by suicide for selected countries (Japan, South Korea, and Greenland) from the year 2000 onward, using a multi-line chart where each line represents a country’s trend over time. The chart filters data to post-2000 records and encodes the year as an ordinal axis, the death percentage as a quantitative axis, and the country as a categorical color. Built with the Vega-Lite API, it registers custom configuration for axis styling and fetches the dataset from a remote CSV via `d3.csv`. The visualization renders as an SVG, with tooltips provided by the Vega Tooltip handler.

Loading thumbnail…

Percentage of the population that suffered from schizophrenia in Central American countries over the years

This visualization uses grouped bar charts to compare the percentage of the population suffering from schizophrenia in Costa Rica, Guatemala, Nicaragua, and Panama for the years 1995, 2005, and 2015. The vega-lite-api, built on Vega-Lite and Vega, renders the chart, with bar color encoding each country. Tooltips display the average schizophrenia percentage per country via a vega-tooltip handler. Data is loaded asynchronously from a CSV file using d3.csv and filtered to select the specified countries and years, with a custom config adjusting axis colors and font sizes.

Loading thumbnail…

Mental illneses in American countries throughout the years

This visualization uses a multi-line chart to show the percentage of the population affected by mental illnesses in Costa Rica, Colombia, and Brazil from 2000 onward. The graph highlights that overall levels remain stable, with slight recent declines in Brazil and Colombia. It is built with Vega-Lite’s API for chart specification, using D3 to load CSV data from a Gist and vega-tooltip for interactivity. The chart applies a custom color scale and filters data to post-2000 years.