100%

GeoJson map of Colombia

✓ Published0🌍 Public

Last edited Jul 10, 2018

Created on Jul 10, 2018

This map of Colombia visualizes GeoJSON data using D3.js and SVG. Each department is color-coded by the length of its name in Spanish. Hovering over a department applies text effects, and a new font is randomly selected each time the hover target changes. Clicking a department zooms in on it; clicking elsewhere zooms out. The map is rendered with an animated transition during zoom interactions, and the choropleth coloring provides an at-a-glance comparison of department name lengths.

AI-generated description

Geo Json map of Freising District

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

As in Krist example:

Each province is color-coded by the length of its name in German.
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 Freising GeoJson from Opendatalab

Similar vizzes

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

96% match

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

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

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

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

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

70% match

Loading thumbnail…

Departamentos Argentina - interactivo

This interactive visualization displays a zoomable map of Argentina’s departments, with each region filled in light green and labeled by its department and province in a hover tooltip. Built with D3.js and the d3-geo-projection extension, it uses a transverse Mercator projection centered on the country and renders geographic paths as SVG elements. The map draws from a public GeoJSON dataset of Argentine departments, while a zoom interaction, implemented via D3’s `zoom` event, adjusts the map’s transform. Hovering changes the fill color to pink, and the sphere background is light blue.

Jjeronimoek

70% match