100%

GeoJson map of Colombia

✓ Published0🌍 Public

Last edited Oct 21, 2018

Created on Oct 20, 2018

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.

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>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/7a7014b67a1ae2dee8771dda24363e29'>GeoJson map of Colombia</a>

forked from <a href='http://bl.ocks.org/davidgutierrez/'>davidgutierrez</a>'s block: <a href='http://bl.ocks.org/davidgutierrez/8e9b480649804db5181133856d93473a'>GeoJson map of Colombia</a>

mit Licensed

Similar vizzes

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

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

96% 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…

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…

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

72% 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…

VA-Map-GP

This interactive map visualizes the geographic distribution of demobilized individuals across Colombian departments from 2003 to 2015. The visualization encodes the number of demobilizations per department using a choropleth map, where color intensity represents the count. The map animates over time, cycling through years to show changes in the numbers across departments. Tooltips provide exact values on hover, and the color scale helps quickly identify high- and low-concentration regions, highlighting temporal and spatial patterns of demobilization in Colombia.

663anp3ca

70% match

Loading thumbnail…

(Topojson)

This visualization displays an interactive map of Argentina, with each department and province rendered as a distinct geographic region. Users can hover over individual areas to see their names via a tooltip, and the map supports zooming and panning. It uses `d3.geoPath` with a `d3.geoTransverseMercator` projection to draw the shapes from TopoJSON data, alongside the `topojson` library's `feature` function for parsing. The zoom interaction is implemented using `d3.zoom` and `d3.event`, while the data is loaded from a remote JSON file containing department boundaries.

Ggeethanjalikotaru

69% match