Colombia Map ICE8

100%

Colombia Map ICE8

✓ Published0🌍 Public

Bbmurill2019

Last edited Apr 13, 2023

Created on Apr 13, 2023

This example displays a choropleth map of Colombia, with each department rendered as a green SVG path with black borders. The visualization uses a geoMercator projection to center and scale the country within a 600 by 500 pixel canvas. The code loads GeoJSON data from a remote GitHub gist using `d3.json`, then applies `d3.geoPath` with the projection to generate the map shapes. The implementation combines React 16.9 for the layout and D3 v5 for geographic rendering within an SVG container.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

GeoJson map of Colombia

This interactive map of Colombia uses D3.js v4 to visualize GeoJSON data of the country's departments and municipalities. Each province is color-coded based on the length of its English name, with a choropleth-style encoding. Users can hover over a province to apply dynamic text effects and trigger a random font change, while clicking a province zooms in for a closer look; clicking elsewhere zooms back out. The map is rendered with SVG and includes smooth transitions for the zoom interactions, all built from GeoJSON data converted from Colombian shapefiles.

663anp3ca

83% match

Loading thumbnail…

GeoJson map of Colombia

This interactive map of Colombia uses D3.js to render GeoJSON data as an SVG. Each department is color-coded by the length of its English name, and hovering over a province triggers a random font change with text effects, while clicking zooms in and out of regions. The map is built from Colombian shapefiles converted to GeoJSON and supports smooth animated transitions.

AAndresAnayaIsaza

83% match

Loading thumbnail…

GeoJson map of Colombia

This interactive map of Colombia, built with D3.js and GeoJSON, color-codes each department according to the length of its English name. Hovering highlights regions with animated text effects, and clicking a department triggers a smooth zoom-in, while clicking elsewhere zooms back out. The visualization also adds a playful touch by randomly switching fonts whenever you hover over a different department. The map renders with SVG paths and includes subtle transitions for an engaging exploration of Colombian geography.

GGerardoFurtado

81% match

Loading thumbnail…

GeoJson map of Colombia

This map of Colombia uses D3.js and GeoJSON to display province boundaries, with each province color-coded by the length of its English name. The visualization includes interactive features: hovering over a province triggers a text effect and randomly selects a new font for the label, while clicking a province zooms in for a closer view, and clicking elsewhere zooms back out. The map is rendered using SVG and supports smooth animated transitions. The GeoJSON data was derived from Colombian shapefiles converted with ogr2ogr.

GGerardoFurtado

80% match

Loading thumbnail…

ICE08 11604571

This example displays a choropleth-style world map rendered as an SVG, with countries shown in a light color against an olive-green sphere background. The visualization uses D3 v5's `geoEquirectangular` projection and `geoPath` to generate the map geometry from TopoJSON data loaded from the world-atlas dataset. Country boundaries are drawn as individual path elements, and hovering highlights the selected country in cyan, using CSS transitions on the fill property. The implementation leverages D3 selections and data joins to bind country features to paths, with a static projection of the globe.

KKiran Jyothi Bodduluri-11604571

76% match

Loading thumbnail…

ICE-8(Europe)

This example displays a choropleth-style map of Europe, with each country rendered as a light blue filled polygon outlined in black. The visualization uses the D3.js library's `d3.geoMercator` projection to transform geographic coordinates, and `d3.geoPath` to generate SVG path data from GeoJSON features. The geographic data is fetched from a remote URL using `d3.json`. The entire rendering occurs in an SVG element, and the map is built using React for the page structure while D3 handles the drawing.

Jjayanthamol99

74% match

Loading thumbnail…

Swedish Country Map ICE-8

This example displays a choropleth map of Swedish counties using the Mercator projection, with each county filled in blue and interior boundaries outlined in gray. The map renders as SVG through React, with geographic features generated from TopoJSON data using `d3.geoPath` and `d3.geoMercator`. The code applies `projection.fitExtent` to scale the map to fit the viewport, and county boundaries are extracted via `topojson.feature` and `topojson.mesh`. The visualization uses the d3 v5 library alongside React 16.9.

Aarcothanmukha

74% match

Loading thumbnail…

Anv_ICE8_Argentina_(Topojson)

This example displays a choropleth-style map of Argentina’s provinces and departments, rendered with a Transverse Mercator projection and interactive zoom. The map shows administrative boundaries filled in green, with a title tooltip revealing each department’s name and province on hover. It uses D3’s `geoPath`, `geoTransverseMercator`, and `zoom` APIs, along with TopoJSON’s `feature` method, to load and draw geographic data from a GitHub-hosted JSON file. The SVG output includes a styled ocean sphere and country paths.

AAnvesh Chinta

74% match