Skip to main content
SimilarExport ZIP
100%

JS Bin

✓ Published0🌍 Public
MMTClass
Last edited Feb 21, 2017
Created on Feb 21, 2017

The example shows a two-column web layout with an interactive map on the left and a scrollable data panel on the right. The interface uses Bootstrap’s grid system for a responsive 50/50 split, with the map container filling the full viewport height. The JavaScript initializes a `metro` object and logs “hello world” to the console on document ready, though no map rendering or data visualization is yet implemented. The code relies on jQuery for document-ready handling and defines CSS for the map and data sections but does not demonstrate any actual charting or geographic rendering.

AI-generated description

Similar vizzes

Loading thumbnail…

niLayout

This example presents a dashboard-style web page with a full-screen layout that includes a header, dropdown menus, and a central map area. The page uses Bootstrap’s grid system to organize these sections into a responsive, fixed layout. The visualization is initialized by setting an SVG element’s width and height to match the browser window’s dimensions using D3.js v5. The code’s structure suggests interactive controls for selecting data, though the map rendering and interaction logic are not implemented in the visible source.

AAnimesh Nautiyal
70% match
Loading thumbnail…

grids 2

This example presents a dashboard layout with distinct regions for a map, table, slider, and hierarchical data, though the visible code only establishes the Bootstrap-based grid structure and an empty SVG canvas. The page uses Bootstrap 4 for responsive column and row sizing, with a fixed full-height container and color-coded placeholders. D3 v5 is imported and used solely to set the SVG’s width and height based on the document’s client dimensions. The index.js file applies these attributes without additional data binding or rendering, leaving the actual visualizations unimplemented.

AAnimesh Nautiyal
70% match
Loading thumbnail…

Map test

This example displays a full-screen interactive map embedded from Carto Builder, presenting geographic data in a standard tiled web-mapping interface. The page itself uses an iframe element to load the external Carto visualization, while D3 v4 is loaded via a script tag but is not actively used for rendering or interaction. The map includes pan and zoom controls provided by the Carto platform, and the overall layout is fixed to the viewport with zero margins for a seamless presentation. The code primarily demonstrates a simple integration pattern between a hosting page and a third-party mapping service, rather than a custom D3 visualization.

CCartophile
68% match
Loading thumbnail…

Map & Globe

This example presents two synchronized geographic visualizations side by side: an interactive Leaflet.js map and a D3-based orthographic globe rendered on HTML5 Canvas. The Chiasm framework and its layout and links plugins manage the component layout and bidirectional data binding, so panning and zooming on the map updates the globe’s rotation and viewport circle, and dragging the globe repositions the map. The globe draws landmasses and country borders from a TopoJSON world dataset, while the map uses CartoDB basemap tiles. A gray circle on the globe indicates the map’s current viewport.

PPatrick Wojda
67% match
Loading thumbnail…

map-level

This example uses the D3 v5 library to render an interactive map-based visualization. The page layout is built with Bootstrap 4, containing a navigation bar, a form panel, and a map area. The D3 code selects an SVG element and dynamically sets its dimensions to match the browser viewport, though the detailed map rendering and data interaction logic are not visible in the provided files. The approach relies on D3’s selection and attribute methods to prepare the canvas for geographic data display.

AAnimesh Nautiyal
67% match
Loading thumbnail…

Untitled

This visualization presents a multi-panel interface for exploring geospatial and mapping data. A sidebar on the left lists map layers, while the central viewport is divided into sections for a large map display, a grid of detail panels, and a document viewer with form and template areas. The right sidebar shows variable controls. The layout is constructed entirely with HTML and CSS absolute positioning, using styled divs with color-coded backgrounds to structure the interface, but no interactive data is rendered.

LLCherryholmes
67% match
Loading thumbnail…

Map Practice HTML Starter

This example displays an interactive map centered on San Francisco using the ArcGIS API for JavaScript, with an “arcgis-light-gray” basemap loaded from ArcGIS services. The MapView is configured with a specific longitude, latitude, and zoom level to frame the initial view. The page relies on the ArcGIS `esri/Map` and `esri/views/MapView` modules, while a basic HTML structure and CSS ensure the map fills the viewport. A simple JavaScript console log statement demonstrates basic interactivity for developers.

AAndre J Denais
66% match
Loading thumbnail…

Gist 6b515fcc2b7c6479d9c31059140eb611

This example displays a full-screen interactive map of the contiguous United States, centered on the country’s geographic midpoint using Mapbox GL JS. The map uses a custom Mapbox style and includes a navigation control for zoom and rotation. The viewport is constrained to the bounding box spanning from the Southwest to the Northeast corners of the lower 48 states. The code sets an initial zoom level and center coordinates derived from that bounding box, but does not load or visualize any external data layers.

WWill Carter
66% match