Kahlaoui-Ismail

@Kahlaoui-Ismail·3 public vizzes

Fork of Vizualisation

This example displays a world choropleth map colored by renewable energy levels, with a categorical color legend that allows users to click and filter countries by their energy level. The map uses SVG rendering with a Natural Earth projection, and the zoom interaction enables panning and scaling. The visualization is built with d3.js, using `d3.geoPath`, `d3.geoNaturalEarth1`, `d3.zoom`, and `d3.scaleOrdinal` for the color scale, while data is loaded from a TSV file and TopoJSON.

Sep 29, 2021

Loading thumbnail…

Vizualisation

This visualization displays renewable energy levels by country on a natural Earth projection map, with a color legend categorizing ordinal data. It uses d3.geoPath and d3.geoNaturalEarth1 to render world shapes, d3.scaleOrdinal with schemeSpectral for color mapping, and d3.zoom for panning. Data comes from a TSV file joined to TopoJSON world atlas geometries via d3.tsv and d3.json. Hovering highlights countries in red, and tooltips show country names and renewable values.

Sep 28, 2021

Loading thumbnail…

World Map

This map uses D3.js geo utilities (geoEqualEarth, geoPath, geoGraticule) within a React component to render country borders from the World Atlas TopoJSON. The SVG view shows landmasses in cyan, ocean in gray, and a graticule for reference. The code projects sphere geometry, graticules, and TopoJSON features, with interiors drawn as stroked paths, creating a polished geographic visualization.

Sep 27, 2021