Fork of Choropleth Map with D3 2 and SVG Final

100%

Fork of Choropleth Map with D3 2 and SVG Final

✓ Published0🌍 Public

Last edited Dec 27, 2022

Created on Dec 27, 2022

Forked from Choropleth Map with D3 and SVG Final

This interactive world map uses a geoStereographic projection to display which countries Chawin S. has visited, with each nation colored according to its `adm0_dif` value via a spectral color scale. The visualization is built with D3 v5, using `d3.geoPath` for rendering country boundaries and a custom legend component. Country names and visit data are joined from a TSV file hosted on GitHub with world atlas GeoJSON from unpkg, linked by ISO numeric codes. Hovering over a country highlights it in pink and shows a tooltip with its name and visit status.

AI-generated description

Interactive Worldmap with geoStereographic view. It demonstarte which countries Chawin S. has visited. The Orange color on the map indicate that the JSON file is responsive. The problem is I manupulate on only tsv but json.

dataForclass-HW/test3 - Sheet1.tsv

Bostock: Dataset for title function to return country names

The Data is pulled from unpkg file and linked based on adm0_dif. The data can be change if prefer.

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map with D3 and SVG Final

This interactive world map uses a stereographic projection to display countries colored by income group. Built with D3 v5 and rendered as SVG, it loads GeoJSON and TSV data from the world-atlas package. Users can pan and zoom the map, which features a color legend and tooltips showing country names and income classifications. The visualization relies on d3.geoStereographic, d3.geoPath, d3.scaleOrdinal, and d3.zoom APIs.

CChawin Sungwalngern

86% match

Loading thumbnail…

Fork of Choropleth map with D3.js!

This choropleth map colors countries by income group using a categorical color scale from `scaleOrdinal` and `schemeSpectral`. The visualization loads world geometry from TopoJSON via `world-atlas` and joins it with tab-separated metadata, then renders paths with `geoPath` and a `geoNaturalEarth1` projection. The map supports zooming through `d3.zoom`, highlights countries on hover via CSS, and includes a custom color legend built with SVG circles and text.

NNikithakatta30

85% match

Loading thumbnail…

Fork of Choropleth Map

This interactive choropleth map colors countries by economic classification, with a hover effect that turns each country red and a custom color legend showing the categorical scale. Built with D3 v5, it uses `geoNaturalEarth1` and `geoPath` for map projections and rendering, while `scaleOrdinal` and `schemeSpectral` assign colors. The map loads world geometry from the world-atlas TopoJSON and TSV files, and supports zooming via the `zoom` event, which updates the SVG group’s transform.

Eexplorer123PiN

84% match

Loading thumbnail…

Fork of Choropleth Map

This choropleth map colors countries by economic grouping using an ordinal color scale with a spectral scheme. It visualizes world geography with a natural Earth projection and includes a custom SVG color legend with circles and labels. The map supports zooming and panning via d3.zoom, and country paths are generated with d3.geoPath from TopoJSON data loaded from the World Atlas. Hovering highlights countries in red, with tooltips prepared via the title element.

HHadi Ghafouri

84% match

Loading thumbnail…

Fork of Choropleth Map

This choropleth map colors world countries by economic grouping, using a spectral color scale with a custom legend. The visualization reacts to user zoom and pan gestures, redrawing country boundaries through D3’s `geoPath` and `geoNaturalEarth1` projection. Country data merges TSV attributes with TopoJSON geometry via `topojson.feature`, and hovering any country highlights it in red, while a tooltip shows its name and economic category. The project relies on D3 v5’s `scaleOrdinal`, `schemeSpectral`, and the `zoom` event helper for interactivity.

MMajaha21

84% match

Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map colors world countries by economic group using a spectral color scale. The visualization includes a color legend with circles and labels, and countries highlight red on hover. Built with D3 v5, the map uses a natural Earth projection and renders as SVG paths. Data is loaded from the world-atlas package, combining TopoJSON geometry with TSV metadata. Interactive zooming is enabled via D3’s zoom behavior, and the legend is generated with a custom `colorLegend` function.

EElena Momtcheva

83% match

Loading thumbnail…

Fork of Choropleth Map

EElena Momtcheva

83% match

Loading thumbnail…

Fork of Choropleth Map

This choropleth map colors world countries by their economic classification using a spectral color scale, with an interactive color legend showing the categorical values. The map renders geographic boundaries and landmasses through D3’s geospatial projection and path generation, while hover effects highlight individual countries. Data is loaded from the World Atlas topojson and TSV files, processed via the `topojson` feature API, and colors are assigned using `d3.scaleOrdinal` with a `schemeSpectral` range. The view supports zoom and pan through D3’s interactive zoom behavior.

CChase Hall

83% match