munpro2002

@munpro2002·5 public vizzes

Covid19 world map

This visualization presents a world map showing cumulative COVID-19 cases as of June 6, 2021, using a natural Earth projection rendered with SVG via `d3.geoPath`. Circle markers sized by a square-root scale represent case counts per country, while a corresponding size legend and a color legend for missing data are included. The map supports zooming through `d3.zoom`, and tooltips display country names and case totals using `d3.format`. Data is loaded from a CSV file merged with TopoJSON world geometry via `topojson.feature`, with graticule lines and hover effects on country paths.

Jun 9, 2021

Loading thumbnail…

Fork of Circles on a Map

This visualization shows global population for 2018 using circles on a natural Earth projection map, with circle area proportional to population and hover tooltips revealing country names and values. Users can pan and zoom the map. The code uses d3.geoNaturalEarth1, d3.geoPath, d3.geoCentroid, and d3.zoom, with population data from a CSV processed via d3.csv and country geometries from TopoJSON. A square-root size scale and a custom size legend with tick labels display the quantitative mapping.

Jun 7, 2021

Loading thumbnail…

Fork of Circles on a Map

A world map visualization displays each country's 2018 population using semitransparent circles scaled by the square root of population, with a size legend and a color legend showing population ranges. Users can pan and zoom the map by applying d3.zoom, and hovering over a country reveals its exact population via a tooltip from a title element. The map is rendered with d3.geoNaturalEarth1 and d3.geoPath using TopoJSON data from the visionscarto-world-atlas, while population values are sourced from an Our World in Data CSV file.

Jun 7, 2021

Loading thumbnail…

Fork of Circles on a Map

This visualization displays global population by country with circles positioned at each nation’s centroid, where circle area encodes the 2018 population value. Users can pan and zoom the natural Earth projection, while hovering reveals country names and exact figures. The code uses D3 v5 APIs including `geoPath`, `geoCentroid`, `geoNaturalEarth1`, `scaleSqrt`, and `zoom`. A size legend with formatted tick labels explains the circle scaling, and countries lacking data appear in a distinct red shade. Population data loads from a CSV joined with TopoJSON world geometry, rendered as SVG.

Jun 7, 2021

Loading thumbnail…

smiley face part 1

A single yellow circle with a black outline and two smaller unfilled circles form the beginning of a smiley face, drawn in static SVG. The large circle is centered at coordinates (480, 250) with a radius of 245, while the two eyes are placed at (350, 180) and (600, 180) with a radius of 50. The visualization uses React 17.0.2 loaded via a UMD script, though no React components are defined; the SVG markup is written directly in the HTML body. The page sets body margins to zero and hides overflow, rendering the graphic at 960 by 500 pixels.

Jun 1, 2021