abhijit01

@abhijit01·4 public vizzes

Cheap Tricks for Interaction On a D3.js World Map!

This example shows a world map rendered as SVG paths, with hover highlighting on individual countries and zoom and pan interaction. It uses d3.geoMercator, d3.geoPath, and topojson.feature to project and draw the map from world-atlas TopoJSON and TSV data. d3.zoom and d3.event handle the zoom transform. A CSS :hover rule changes country fill to red, and SVG <title> elements display country names from the TSV mapping.

Apr 28, 2020

Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map using D3.js and TopoJSON. It loads the world-atlas dataset and converts its TopoJSON topology into GeoJSON features, then draws each country as an SVG path. The map uses the Mercator projection via `d3.geoMercator` and `d3.geoPath` to generate the path data. Country polygons are filled with steelblue and outlined with black strokes, displaying a basic choropleth-style world map without additional data encoding.

Apr 28, 2020

Loading thumbnail…

HIV/AIDS Choropleth Map

This choropleth map visualizes HIV/AIDS prevalence by country for the year 2017, with each nation shaded on a yellow-orange-red sequential color scale (`scaleSequential` with `interpolateYlOrRd`). The visualization pairs HIV data from a CSV dataset with country geometries from the World Atlas TopoJSON, mapping numeric country codes to join the data to the map. Countries without matching data appear gray. The SVG rendering uses `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` from d3.v5, with React managing the component lifecycle and state through custom hooks for loading the world atlas, HIV statistics, and country codes.

Apr 28, 2020

Loading thumbnail…

Let's make a face with D3.js

A single large circle is drawn in the center of an SVG canvas, creating a minimal abstract face. The example demonstrates basic D3.js shape creation and attribute manipulation. The code uses `d3.select` to target the SVG element, then appends a circle and sets its radius, horizontal position, and vertical position based on the SVG's dimensions. The circle's radius is half the SVG's height, and its center is placed at the midpoint of the width and height, resulting in a simple, responsive composition.

Apr 25, 2020