Skip to main content
SimilarExport ZIP
100%

morocco map

✓ Published0🌍 Public
AAbdouEnsaj
Last edited Sep 21, 2022
Created on Sep 8, 2022

This choropleth map of Morocco displays its administrative regions, with hover effects that turn each region green. The visualization loads geographic data from a GeoJSON file containing regional boundaries and attributes. Using D3.js v5, the code applies a Mercator projection via `geoMercator` and draws the regions with `geoPath`. Region names are placed at each polygon's centroid. The map renders as SVG, with red fill colors for regions, black strokes, and interactive hover styling managed through CSS.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

choropleth!

This choropleth displays a world map rendered with a natural Earth projection, coloring countries in light green against a blue sphere. Built with D3 v5 and TopoJSON, it loads country boundaries from the world-atlas dataset and draws them as SVG paths using d3.geoPath. Interactive zooming is enabled through d3.zoom, and hovering over any country turns it red. Each country path includes a title element showing its name, though the display of that name is not implemented.

AAbhijeet Panda
70% match
Loading thumbnail…

Choropleth Map

This choropleth map displays the world’s countries, each filled with a light green color that turns red on hover, while the ocean remains blue. It uses D3 v5 and TopoJSON to load world-atlas data, combining a TSV file for country names with a JSON topology for geographic boundaries. The map is rendered with an SVG using a natural Earth projection via `d3.geoPath`, and interactive panning and zooming are enabled through `d3.zoom`.

MMajaha21
70% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes geographic regions using color-coded areas, with countries filled in light green and strokes in black at low opacity. The visualization employs a blue sphere to represent the globe, set against a clean white background. Built with D3 v5, the code uses `select` to target the SVG element and `json` to load geographic data from the OneMap service, while the `topojson` library’s `feature` function processes the topology. The map is rendered as an SVG with a fixed 960x500 viewport, with styling defined in CSS.

AAdrian Tan
70% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes world countries using color to distinguish region boundaries and a blue sphere to represent the Earth’s surface. It loads geographic data from the World Atlas TopoJSON and TSV files via Promise.all, then renders each country as an SVG path using d3.geoPath with the d3.geoNaturalEarth1 projection. Hovering turns countries red, and tooltips display country names through appended title elements. The visualization supports zoom interaction via d3.zoom, with light green fills and black strokes for borders.

Yylzami40
69% match
Loading thumbnail…

interactive_choropleth_map

An interactive choropleth map colors world countries by economic classification using d3.geoNaturalEarth1 and d3.geoPath, with a clickable ordinal color legend to filter highlighted regions. Built with D3 v5 and TopoJSON world-atlas data, it supports zooming via d3.zoom and renders as SVG. Hovering dims non-selected countries while selected ones gain emphasis.

MMauradion
68% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic group using a spectral color scale, with hover effects that highlight individual nations. The visualization uses D3.js (v5) to load world map data from TopoJSON and TSV files, projecting geographic coordinates with d3.geoNaturalEarth1 and rendering paths via d3.geoPath. A custom color legend with circles and text labels is built using D3 selections, while zooming is enabled through d3.zoom. The map data comes from the world-atlas package, and SVG is used for all rendering.

FFerrandiaz92
68% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes world countries with a green fill and a blue sphere background, using a natural Earth projection rendered to SVG. It draws country boundaries and names from the world-atlas TopoJSON dataset, with each country’s name displayed as a tooltip. The map supports pan and zoom via d3.zoom, and hovering over a country turns it red. The code leverages d3.geoNaturalEarth1, d3.geoPath, and topojson.feature to generate the geographic paths.

Ccpsshan
68% match
Loading thumbnail…

Choropleth Map

This choropleth map displays world countries in solid red against a blue sphere, with each country labeled by name on hover. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to render geographic features from TopoJSON data loaded via the world-atlas package. Interactive zooming is implemented with D3’s zoom behavior, while country styling and hover effects are defined in CSS. The map draws all features as SVG paths, with a title element added per country for tooltip-like labels.

Bbenben1996
68% match