Cesar Varela

@cesarvarela·3 public vizzes

Fork of Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent, scaled circles, using a square-root size scale to encode population values. The visualization layers a Natural Earth projection with graticules and country boundaries from the World Atlas TopoJSON, while city data comes from the Simplemaps World Cities Database. Built with React and D3 v5, the code uses `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for map geometry, and `scaleSqrt` to map population to circle radii, rendering all marks as SVG elements.

Nov 25, 2021

Loading thumbnail…

Fork of Pantheon - Tracking Cultural Output Through The Ages (With Tooltips)

This visualization maps the cultural output of notable women throughout history, plotting each person as a circle on a world map with circle size representing their Historical Popularity Index. A date histogram with a brush filter is intended to allow temporal exploration. The visualization uses D3 v5 for geographic projections, scales, and histogram binning, with React managing the component structure. Tooltips are implemented using Tippy.js and render additional biographical data on hover. The data comes from the Pantheon dataset, filtered to women with confirmed birthdates.

Nov 25, 2021

Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes weekly temperature readings from San Francisco, sourced from the Data Canvas Sense Your City dataset. The visualization displays temperature against time, with each circle representing a temperature measurement at a specific timestamp. Built with React and D3 v5, the example uses `scaleTime` for the x-axis and `scaleLinear` for the y-axis. The SVG rendering includes custom axis components and circle marks, with tooltips showing the day of each data point through D3's `timeFormat` function.

Oct 6, 2021