100%

GeoJson map of Colombia

✓ Published0🌍 Public

Last edited Oct 18, 2016

Created on Oct 18, 2016

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.

AI-generated description

Geo Json map of Colombia

Based on the Map of Thailand by Master Krist Wongsuphasawat, a simple map of Colombia using GeoJSON and D3.js

As in Krist example:

Each province is color-coded by the length of its name in English.
Hover each province to see text effects.
New font is chosen randomly every time you change the province.
Click on a province to zoom in. Click somewhere else to zoom out.

I obtained the Colombian GeoJSON by transforming the Colombian shapefiles by Maurix Suárez, using:

ogr2ogr   -f GeoJSON -t_srs EPSG:4326  Colombia.geo.json   depto.shp

forked from <a href='http://bl.ocks.org/john-guerra/'>john-guerra</a>'s block: <a href='http://bl.ocks.org/john-guerra/43c7656821069d00dcbc'>GeoJson map of Colombia</a>

mit Licensed

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

97% 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

95% 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

95% match

Loading thumbnail…

Colombia Map ICE8

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.

Bbmurill2019

83% 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

71% match

Loading thumbnail…

map.

A choropleth map of Colombia displays the total number of murdered social leaders from 2016 to 2020, with each department colored by death counts using d3.scaleThreshold and the schemeOrRd color scale. Users can click a department to view its fatality total for a selected year from a list, or hover to see the count on the side panel. The visualization uses d3.geoPath and geoMercator to render the TopoJSON map, with data from a CSV file and a JSON containing yearly regional death statistics.

AAnidiamDEV

71% match

Loading thumbnail…

Fork of Fork of Anv_ICE8_Argentina_(Topojson)

This interactive SVG map displays Argentina’s departments, coloring each province and showing its name and province in a tooltip on hover. The visualization uses the D3.js library with the `d3.geoTransverseMercator` projection, `d3.geoPath` for rendering shapes, and TopoJSON’s `feature` function to process geographic data from a GitHub-hosted JSON file. Pan and zoom are enabled via the `d3.zoom` event handler, while static CSS styles define the map’s color scheme and hover effects.

Vvryvarma5577@gmail.com

70% match

Loading thumbnail…

Fork of Anv_ICE8_Argentina_(Topojson)

This example displays a map of Argentina’s departments and provinces using a Transverse Mercator projection. The visualization colors each department in bright green, with provinces highlighted on hover, and renders the ocean in blue as a background sphere. Built with D3, it uses `d3.geoTransverseMercator` for the projection and `d3.geoPath` to draw the shapes. Data comes from a remote GeoJSON file, which is fetched via `d3.json` and processed with `topojson.feature`.

GGogineni44

69% match