sureshreddypr

@sureshreddypr·6 public vizzes

Untitled

This visualization uses a natural Earth projection to display global population estimates for 2018, with countries colored to indicate data presence or absence. Circles sized by population are plotted at country centroids using a square-root scale, with a legend showing the population scale. The code leverages D3 modules including `geoPath`, `geoNaturalEarth1`, `geoCentroid`, `scaleSqrt`, and `zoom` for interactivity. Data comes from a UN population estimates CSV and a TopoJSON world atlas, processed via `topojson.feature`.

Aug 3, 2020

Loading thumbnail…

Let's make a map

This interactive map visualizes COVID-19 case and death counts by country, with bubble sizes scaled to total cases and colors indicating severity. Users can zoom and pan using d3.zoom, while hovering over bubbles reveals detailed statistics via tooltips. The visualization combines a Natural Earth projection using d3.geoNaturalEarth1 and d3.geoPath, with geographic data loaded from the world-atlas TopoJSON and COVID-19 statistics from an external dataset. Countries are rendered as SVG paths with hover highlighting, and the animated bubble layer uses d3.scale.sqrt and linear color scales for proportional encoding.

Jul 31, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn in SVG, whose right eyebrow animates upward while the left remains still. It demonstrates basic DOM manipulation with D3.js v5, using `d3.select` to append circles, rectangles, and an arc-generated path for the mouth. The code relies on D3’s `arc` generator for the smile and `transition` with a 2-second duration to move the eyebrow. All shapes are positioned via SVG attributes like `cx`, `r`, and `transform`, with a static yellow face and black features.

Jul 30, 2020

Loading thumbnail…

Circles on a map

This example uses a natural Earth projection to render a world map with circles sized by 2018 population estimates. The visualization displays countries in two colors, distinguishing those with population data from those without. It uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoCentroid to project country boundaries and position circles at country centroids. A d3.scaleSqrt maps population values to circle radii, with a custom size legend and zoom interaction via d3.zoom. Population data comes from a CSV file merged with TopoJSON world atlas geometry.

Jul 30, 2020

Loading thumbnail…

Cheap Tricks for Interaction

This example displays an interactive natural Earth projection of world countries, rendered as SVG paths with hover highlighting. Users can pan and zoom the map via d3.zoom, which applies transforms to a parent group element. Country boundaries come from TopoJSON world-atlas data, matched to names from a TSV file, and are drawn using d3.geoPath with a geoNaturalEarth1 projection. Hovering changes fill colors through CSS, while d3 v5 handles the zoom event listeners and asynchronous data loading via Promise.all.

Jul 30, 2020

Loading thumbnail…

Let's make a map

This example displays a world map using the Natural Earth projection, with countries rendered as SVG paths and labeled according to their names from a TSV file. Users can pan and zoom the map via the d3.zoom behavior. The visualization loads geographic data from the world-atlas TopoJSON dataset, converts it to GeoJSON using topojson.feature, and projects it with d3.geoNaturalEarth1 and d3.geoPath. Country names are joined to numeric IDs via a reduce operation, and hover effects highlight individual nations.

Jul 30, 2020