TATUBAAR

100%

TATUBAAR - map thumbnail

✓ Published0🌍 Public

Last edited Aug 13, 2018

Created on Aug 10, 2018

This interactive map editor displays a grid-based game map, where colored cells represent character spawn points for different teams, grey cells are obstacles, black cells are holes, and white cells are walkable terrain. The visualization parses a plain-text string into a grid of cells and renders them using D3.js v4 with SVG rectangles, assigning colors from a categorical color scale. The map layout is defined by an eight-by-eight grid, and the interface includes a separate rendered character sprite with its own SVG definition.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/BrunoDumas/'>BrunoDumas</a>'s block: <a href='http://bl.ocks.org/BrunoDumas/4c346bb9073cce3039a5281b94c0e630'>TATUBAAR - map creator</a>

mit Licensed

Similar vizzes

Loading thumbnail…

TATUBAAR - map creator

This map creator lets users design a grid-based game board by clicking cells to cycle through terrain types: walkable, obstacle, hole, and character spawn. It uses D3 v4 to render the SVG grid and handles click events to update cell content. The code includes save functionality to export the map, and it visualizes spawn points by cloning a character icon from an SVG file loaded via `d3.xml`. Cell colors are mapped with a categorical color scale, and the interface includes a toolbar with instructions.

BBrunoDumas

91% match

Loading thumbnail…

TATUBAAR is a grid-based game map creator that renders an 8x8 tactical grid with colored cells and a character sprite. The visualization loads an external SVG character model, clips it to the sprite's bounding box, and positions it on the map with scaling, translation, and rotation. The code uses D3 v4 for SVG manipulation, including `d3.xml` to load the character asset and `d3.scaleOrdinal` for team colors. The map supports walkable cells, obstacles, holes, and spawn points, with a game logic layer handling entities, spells, and events.

BBrunoDumas

90% match

Loading thumbnail…

ICE-5

This example shows a static map of the world rendered as a grid of colored squares, with each cell’s color determined by the country it overlaps. The visualization uses D3 v5 to load and parse color data from a CSV file, then maps those named colors to geographic regions defined by an embedded PNG image. The SVG pattern and image data are used to generate the final output, with no interactive elements or animations. The code relies on D3’s data-loading utilities and React for rendering the result.

TTekmal-Bhavana

64% match

Loading thumbnail…

Tree Map

This tree map displays hierarchical data as nested rectangles sized proportionally to their values. The example renders an SVG graphic at 960 by 500 pixels, pulling in D3 v5 from a CDN. The code imports `select` and `arc` from the D3 library, though the visualization logic itself remains minimal in the shown files. The page references a separate stylesheet and JavaScript bundle, with the SVG container set up for the treemap layout. The map is generated using D3’s standard tree-map approach, though the actual data and layout calculations are not explicitly defined in the visible code.

Eedmond gihozo

63% match

Loading thumbnail…

Tile Viewer

This example shows a zoomable map interface where the user can pan and zoom across geographic tiles. It displays each tile as a numbered 256-by-256-pixel square with a red border and its coordinates as text, updating the visible grid as the viewport changes. The code uses d3.geo.tile, d3.geo.mercator, and d3.behavior.zoom, applying a CSS 3D matrix transform to reposition tiles during zoom events. It relies on a gist by mbostock and the d3.v3 library, with tile positions computed from the current zoom scale and translation.

Mmbostock

63% match

Loading thumbnail…

Vector Tiles

This interactive map displays vector tiles of road networks from OpenStreetMap, rendered as SVG paths. It uses Mapzen’s vector tile API to load road data, and d3.geoMercator’s projection with a d3.tile-based tile system to fetch and display 256×256 tiles. The visualization supports pan and zoom via d3.zoom, with a matrix3d transform for scaling and translation. Mouse movement updates a location readout showing latitude and longitude, computed by inverting the projection.

Mmbostock

63% match

Loading thumbnail…

Pokemon_Map

A scatterplot map of Pokémon battle data visualizes each creature’s danceability against a user-selectable audio feature (e.g., liveness, energy) using a continuous color gradient from dark blue to teal. Built with React and D3, it renders an SVG canvas with scaled axes, and hovering over a point triggers a tooltip showing metadata. The code uses `Delaunay.voronoi` for hit-testing, `d3.axisLeft` and `scaleLinear` for scales, and reads from an `iris.csv` dataset (despite the Pokémon title). A slider control adjusts the number of bar-chart sections shown in separate containers.

Eexchoco

63% match

Loading thumbnail…

"Map function inside Map function"

This example shows a grid of colored squares scattered across an SVG canvas, with each square’s position and color determined by nested JavaScript `map` functions over an array of integers from 0 to 100. The inner `map` iterates over the same array inside the outer `map`, generating a square for each combination of coordinates, with random placement and RGB fill values derived from the loop index. Built with React and ReactDOM, the visualization uses SVG `<rect>` elements, with rendering handled via the production React build.

NNita

63% match