Skip to main content
SimilarExport ZIP
100%

COPAIBA V2

✓ Published0🌍 Public
FFabioZabala
Last edited Oct 5, 2017
Created on Jul 12, 2017

COPAIBA V2 is an interactive map of the Amazon region built with Mapbox GL JS, displaying geospatial data for indigenous territories. The visualization uses layered vector tiles and offers toggleable menu options to switch between different thematic views, with a legend indicating categorical colors. It overlays additional boundary or layer controls on the map interface, letting users explore spatial patterns directly in the browser. The code relies on Mapbox GL’s styling and interaction APIs, while the accompanying legend and menus are constructed with standard HTML/CSS, all sourced from a gist and licensed under MIT.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

COPAIBA

COPAIBA is an interactive map of the Amazon region that visualizes different types of social and environmental conflicts, including those related to oil, mining, land use, and water management. The interface uses Mapbox GL JS to render the base map and features a layer opacity slider and a menu to toggle map layers. It includes a legend explaining the color-coded conflict categories, and the code relies on the Mapbox GL JS library for map rendering and interaction.

FFabioZabala
89% match
Loading thumbnail…

COPAIBA

This example displays a thematic overlay of mining areas on an interactive Mapbox GL map. The visualization shows semi-transparent magenta polygon regions representing mining zones, rendered on top of a custom Mapbox style. The map uses the Mapbox GL JavaScript library (v0.38.0) with a GeoJSON source loaded from Mapbox’s hosted data (ID `fabiofz1990.9s5pman2`). A fill layer applies a fixed pink color with 40% opacity to highlight the areas, without any user interaction or additional data processing.

FFabioZabala
79% match
Loading thumbnail…

trouble

This interactive map shows the distribution of Indigenous resguardos and conflict points across the Amazon region of Colombia, using Mapbox GL JS for rendering vector tiles. It displays two toggleable layers: semi-transparent blue polygons for resguardos and orange points for conflicts, with clustered conflict data appearing as colored circles with numeric labels when zoomed out. The visualization incorporates a menu system that lets users switch layer visibility, while the clustering feature aggregates nearby points at lower zoom levels. The map uses custom vector tile sources from Mapbox, including a dedicated source for conflicts with cluster properties and another for resguardo boundaries.

FFabioZabala
70% match
Loading thumbnail…

COPAIBA V2

This example displays a blank 960-by-500 SVG canvas with a single instructional text label. The visualization demonstrates a minimal D3.js v4 setup by appending an SVG element to the body and adding a text node, using the `d3.select` and `append` methods. The text is styled with a monospace font and large size, serving as a placeholder for user modifications. The rendering relies on the SVG API, with the page scaffolded via Blockbuilder.org. No data is loaded, and no interactive behavior or computed visualization is present—only the static text element shown in the center.

FFabioZabala
64% match
Loading thumbnail…

COPAIBA V2

The example shows a minimal D3.js v4 visualization created as a starting point for customization. It renders a single text element reading "Edit the code below to change me!" inside an SVG canvas, positioned at coordinates (120, 200) with a monospace font. The code appends a 960×500 pixel SVG to the body, then adds the text node using `d3.select` and `svg.append("text")`. This demonstrates basic SVG element creation and attribute setting, serving as a blank template for users to replace with their own data-driven charts. The example uses only core D3 methods without additional libraries or data sources.

FFabioZabala
63% match
Loading thumbnail…

COPAIBA V2

The example shows a minimal D3.js v4 visualization created as a starting point for customization. It renders a single text element reading "Edit the code below to change me!" inside an SVG canvas, positioned at coordinates (120, 200) with a monospace font. The code appends a 960×500 pixel SVG to the body, then adds the text node using `d3.select` and `svg.append("text")`. This demonstrates basic SVG element creation and attribute setting, serving as a blank template for users to replace with their own data-driven charts. The example uses only core D3 methods without additional libraries or data sources.

FFabioZabala
63% match
Loading thumbnail…

Brazil

This visualization displays a map of Brazil drawn from a TopoJSON file containing geographic subunits. The map is rendered as an SVG using D3.js version 3, with the country's border and internal regions defined by MultiPolygon geometries and arcs. The example demonstrates how to load and parse TopoJSON data, project it, and render it as an interactive SVG map. The minimalist presentation focuses on the shape of Brazil, with no additional data encodings or visual variables—the map is likely shown in a single color or simple fill to highlight the geographic boundary. It serves as a basic template for displaying TopoJSON-based maps with D3.

EEvertLagerberg
59% match
Loading thumbnail…

ICE 8 - BRAZIL - MAP

A choropleth map of Brazilian municipalities, colored by political party affiliation. The SVG renders geographic boundaries via D3 v7's geo path utilities, with each region storing its party and coordinates in SVG attributes. Hovering a region logs its IBGE code and municipality name to the console by cross-referencing a local ES6 module. The map visualizes election data through a manually configured zoom transform.

KKetha
58% match