Mehika Patel

@mehiks11·5 public vizzes

array filtering

This example demonstrates array filtering by loading a small dataset of U.S. mortality statistics and displaying the raw data as JavaScript objects. The code uses plain JavaScript arrays and object literals, with each entry containing year, death count, population, and mortality rate. The visualization gallery entry highlights how data can be structured and filtered using standard array methods, though the current code only initializes the dataset and logs the data structure to the console. No charting library is used; the example focuses on fundamental data handling before any graphical rendering.

Aug 30, 2021

Loading thumbnail…

choropleth

This choropleth map uses the Albers USA projection to visualize the number of earthquakes per state in the United States, rendered as Scalable Vector Graphics (SVG) paths. The map employs a threshold color scale with a sequential color scheme (OrRd) to encode the logarithmically transformed earthquake counts for each state. The visualization is built using D3's `geoPath` and `geoAlbersUsa` for projection and map generation, with `topojson` for feature extraction. Data is loaded from external CSV and TopoJSON files. Hovering over a state turns it light green, revealing tooltips with the region, state name, and earthquake count.

Aug 24, 2021

Loading thumbnail…

make choropleth map

A choropleth map displays the global prevalence of AIDS across countries for the year 2017, using a yellow-orange-red sequential color scale to indicate severity. Countries without data appear gray. Built with React and D3 v5, the visualization uses `geoNaturalEarth1` and `geoPath` to render country boundaries from World Atlas TopoJSON, with graticules and interiors drawn as separate SVG paths. Data is loaded from CSV files via D3's `csv` function, and country codes are matched to join the dataset.

Aug 24, 2021

Loading thumbnail…

Fork of Smiley Face Part III

A yellow smiley face with light blue fill and thick black outline is rendered, centered on a 960x500 SVG canvas. It uses React to create the SVG elements, and D3's `arc` function to draw a partial mouth arc. Two black eye circles are positioned via translation and offset coordinates, while the face’s radius is derived from the canvas height and stroke width.

Aug 22, 2021

Loading thumbnail…

Smiley Face Part II

A dynamic smiley face visualization fills the browser window, centered and scaled to the viewport’s dimensions. Built with React and rendered as SVG, the face’s yellow circle, eyes, and mouth are defined using basic shape elements like `circle`, with positions and radii computed from the window size. The code uses ReactDOM to mount the component, and adjusts the face’s scale responsively based on `window.innerWidth` and `window.innerHeight`. The visualization demonstrates a simple, programmatic approach to drawing a smiley using SVG primitives within a React framework.

Aug 22, 2021