Skip to main content
Log in
F

FabioZabala

@FabioZabala·7 public vizzes

Loading thumbnail…

COPAIBA V2

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.

Oct 5, 2017
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.

Jul 22, 2017
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.

Jul 12, 2017
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.

Jul 12, 2017
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.

Jul 12, 2017
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.

Jul 11, 2017
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.

Jun 22, 2017