TATUBAAR

100%

TATUBAAR - map creator

✓ Published0🌍 Public

Last edited Aug 13, 2018

Created on May 22, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

TATUBAAR - map thumbnail

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.

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…

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…

d3-tile wrapping

This example displays an interactive SVG world map using tiled raster images from OpenStreetMap, with tile-wrapping toggled by a checkbox. The visualization relies on the `d3-tile` library’s `tile.wrap` method to generate tile coordinates, and `d3.geoMercator` with `d3.geoPath` for the projection. An HTML form checkbox controls the `wrap` flag, triggering a `loadTiles` function that rebuilds the image layer. Each tile is fetched from the `a.b.c.tile.openstreetmap.org` subdomains. The map’s scale and translation are computed and applied via SVG group transforms.

CCurran Kelleher

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

TreeMapping

A static SVG treemap built with plain HTML and CSS, styled with large text and a red color palette. The visualization uses nested rectangles to represent hierarchical data, with layered `<rect>` elements manually positioned via absolute coordinates. Rendered entirely through declarative SVG markup rather than D3 data joins, it serves as a basic exercise in geometric composition and color coding. The code includes D3 v7 via CDN but does not invoke any D3 APIs.

KKamalabot

63% match

Loading thumbnail…

GRID

A 10x10 grid of square cells responds to clicks by cycling through four fill colors: white, blue, orange, and gray, based on a per-cell click counter. The SVG is generated with D3 v4, using data binding to create rows and columns of `rect` elements. Each cell maintains its own click state, and the `d3.select(this)` method directly updates the clicked square’s style. The grid itself is static, with no animation or external data source beyond the locally generated coordinate and dimension objects.

CChristoph Diefenthal

62% match

Loading thumbnail…

Lets make a map with D3.js

This example demonstrates how to create a map using D3.js, rendering an SVG with a fixed width and height. The visualization uses D3 v5 to select the SVG element and prepare mapping functionality, though the specific geographic data and projection are not defined in the visible code. The page loads D3 from a CDN and includes a separate JavaScript bundle, with CSS hiding page overflow for a clean, full-viewport display. The implementation highlights the minimal setup required to begin building map-based data visualizations.

NNita

62% match