Interactive WorldMap for Zara and Nike Shops

100%

Interactive WorldMap for Zara and Nike Shops

✓ Published0🌍 Public

Last edited May 21, 2022

Created on May 21, 2022

This interactive world map visualizes the distribution of Zara and Nike shops, with each country colored according to its economy classification. Built with D3.js v5, it uses a natural Earth projection (`d3.geoNaturalEarth1`) and `d3.geoPath` to render countries from TopoJSON data loaded via `topojson.feature`. The map supports pan and zoom through `d3.zoom`, and hovering over a country changes its fill to red while a tooltip shows the country name and economy value. Color encoding uses a spectral scale from `d3.schemeSpectral`.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive WorldMap

This interactive visualization displays a world map colored by each country’s economy type, using a natural Earth projection. The map supports pan and zoom through `d3.zoom`, with country names and economy values shown as tooltips via SVG `<title>` elements. It loads geographic data from the world-atlas TopoJSON and country names from a TSV file, then maps economy categories to a spectral color scale using `d3.scaleOrdinal`. The code relies on `d3.geoPath` to render countries and a sphere outline, with hover effects changing country fills to red.

KKelsey Xu

83% match

Loading thumbnail…

world map with colors

This interactive choropleth map colors each country by its economy category, using a spectral color scale and click-to-highlight interaction to compare regions. Built with D3 v5, it renders country outlines via `d3.geoPath` with a Natural Earth projection, loads TopoJSON country boundaries from the World Atlas, and joins economic classifications from a TSV file. A zoom behavior enables panning and scaling, while an ordinal color legend supports filtering by clicking a category to fade unmatched countries.

BBajiSharifPatan@my.unt.edu

80% match

Loading thumbnail…

Fork of Interactive WorldMap

This interactive world map uses D3.js to visualize country-level economic data, coloring each nation with a categorical scale based on its economy type. The map renders geographic boundaries using d3.geoPath with d3.geoNaturalEarth1 projection, and supports zooming through d3.zoom. Data comes from world-atlas TopoJSON and TSV metadata, while a color legend uses d3-scale-chromatic. Additional code demonstrates animated interpolation between London and New York using d3.geoInterpolate, though that feature appears incomplete in the rendered output.

NNikkko1

79% match

Loading thumbnail…

Choropleth Map Interactive

This interactive choropleth map displays countries colored by their economy category, using a spectral color scale and a natural Earth projection. Users can click legend swatches to highlight matching regions while dimming others. The visualization is built with D3 v5 modules including `geoNaturalEarth1`, `geoPath`, and `zoom`, rendering vector shapes as SVG. It loads geographic data from the World Atlas TopoJSON and TSV files, processing them via `topojson.feature`. A dedicated color legend component supports selection filtering, while CSS hover effects emphasize individual countries.

MMunTatt Yap

79% match

Loading thumbnail…

Interactive maps

This interactive map displays world countries using a natural Earth projection, with hover states that highlight individual nations in red. The visualization loads geographic data from a world-atlas TopoJSON file and renders it as SVG paths, with country names appearing as tooltips. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `d3.zoom` for panning and zooming. The map also includes a dark blue sphere background, while CSS styles control the country and hover fill colors.

Ddaanasma

78% match

Loading thumbnail…

COLORPLET INTERACTIVE

This interactive map uses D3.js to depict global economic data from the World Atlas TopoJSON and TSV files, coloring each country according to its economy classification. A zoomable Natural Earth projection via `d3.geoPath` shows the countries, while a custom `colorLegend` component allows users to click on legend items to highlight matching regions. The map uses `d3.scaleOrdinal` with `d3.schemeSpectral` to assign colors, and dims non-selected countries by adjusting their opacity. The visualization demonstrates fundamental D3 data-binding and event handling through reusable function patterns.

Ppaularl

78% match

Loading thumbnail…

Interactive World Map

This interactive world map displays country boundaries colored in green on a blue sphere, with hover states turning countries orange. The visualization uses D3 v5 and TopoJSON to load world atlas data from unpkg, combining geographic TSV metadata with 50m JSON topology. It renders through an SVG path generator with a natural Earth projection, while d3.zoom enables pan-and-zoom interaction. Country names appear as tooltips via appended title elements, and the map resizes to fill the browser viewport.

OOskar Weinfurtner

78% match

Loading thumbnail…

Interactive map with D3.js

This interactive map visualizes world countries using a natural Earth projection, with hover highlighting and zoom-and-pan navigation. The D3.js code loads GeoJSON country boundaries from a TopoJSON dataset via `d3.json` and `topojson.feature`, then renders them as SVG paths with `d3.geoPath`. A blue sphere path represents the globe’s outline. The `d3.zoom` API enables user interaction by applying transform events to the SVG group, while CSS `:hover` styles change country fills to red.

MMartin Christensen

78% match