Skip to main content
100%

DataKind Workshop | Demo

✓ Published0🌍 Public
Aandrewxhill
Last edited Jan 21, 2014
Created on Jan 21, 2014

This demo embeds a CartoDB map visualization centered on global coordinates, displaying geographic data points as an interactive web map. The iframe loads a published CartoDB visualization with pan and zoom controls enabled, while hiding search, layer selection, and legends for a clean presentation. The underlying map uses CartoDB’s tile-based rendering to show spatial patterns, with the page’s HTML and CSS ensuring the map fills the entire viewport. The code relies on the CartoDB embed API and standard iframe integration rather than custom JavaScript libraries.

AI-generated description

Similar vizzes

Loading thumbnail…

CartoDB Workshop | CartoDB.js

This example uses CartoDB.js to display an interactive map inside a full-screen div. The code initializes a map with a single custom overlay button labeled “Do Something,” which sits in the top-right corner and changes its background on hover. The map itself is rendered using the CartoDB library’s tile layers, while the button is styled with the included cartodb-infobox CSS class. The JavaScript structure defines a main function tied to the window load event, though no map layers or data sources are explicitly loaded in the provided snippet.

Aandrewxhill
80% match
Loading thumbnail…

Gist 4354110

This visualization displays a map rendered with CartoDB, showing geographic data from a hosted visualization. The page loads a full-screen map using the CartoDB.js library, which initializes the map via `cartodb.createVis` and connects to a remote visualization URL. The map itself is embedded in a fixed-size `<div>` element and relies on CartoDB’s built-in rendering and tile services to draw the geographic layers. The code does not include custom data processing or interaction logic; it simply leverages the CartoDB API to present the pre-configured map.

Aandrewxhill
80% match
Loading thumbnail…

Advanced Infowindows | Demo

This demo shows how to create fully customized map infowindows with CartoDB, embedding images, videos, and dynamic row-based content through the platform’s advanced editor. It uses CartoDB’s built-in Mustache templating, where column names like `{{image_url}}` are replaced with real data values at click time. The example also demonstrates required HTML structure classes such as `cartodb-popup` and `cartodb-popup-content-wrapper`, and embeds a live interactive map via an iframe pointing to a CartoDB visualization.

Aandrewxhill
77% match
Loading thumbnail…

DataKind Workshop | Demo

This demo shows New York State sewage overflow reports as a bubble map, where each bubble’s size represents the volume of gallons discharged, ordered from largest to smallest. The visualization is built with CartoDB, using its hosted map tiles and an embedded iframe that loads a preconfigured SQL query. The map applies CartoCSS styling to handle null volume values, and the underlying data comes from a public CSV hosted at Nijel.org.

Aandrewxhill
76% match
Loading thumbnail…

Easy example | CartoDB.js

This example shows a full-screen interactive map that renders a dataset called "untitled_table_5" with custom CartoCSS styling. The map displays points, lines, and polygons in a red color scheme with white outlines, and includes tooltips triggered by interactivity on the `cartodb_id` field. The code uses the CartoDB.js library version 3, specifically `cartodb.createVis`, which loads the visualization from a JSON configuration object. The base map is provided by OpenStreetMap tiles via Leaflet, while the geographic data is queried from a CartoDB table using SQL and styled with CartoCSS rules for each geometry type.

Aandrewxhill
75% match
Loading thumbnail…

Easy example | CartoDB.js

This example loads a CartoDB-hosted map visualization into a full-screen `<div id="map">` using the CartoDB.js library. It calls `cartodb.createVis` with a specific `viz.json` URL, setting initial center coordinates at latitude 0, longitude 0, zoom level 2, and disabling the time slider. The map renders the visualization’s default layers and styling from the referenced CartoDB account. The page includes the CartoDB CSS and JavaScript files from `libs.cartocdn.com`, and any loading errors are logged to the console.

Aandrewbt
74% match
Loading thumbnail…

Gist 24e4e0ec42cdeff6633c

This example presents a promotional slideshow for CartoDB, a cloud-based mapping and data visualization platform. The presentation uses D3.js to animate text bullet points and an interactive map visualization, showcasing features like drag-and-drop data importing, real-time dashboards, and GIS analysis through PostGIS. The map rendering employs d3.geoPath to draw geographic boundaries, while the slideshow transitions through sections covering web development integration, team collaboration, and high-performance data processing on scalable infrastructure.

Aandrewxhill
74% match
Loading thumbnail…

embedded CARTO map

This example embeds an interactive CARTO map inside an HTML page using a full-width iframe. The map, hosted by Stamen and sourced from a public CARTO builder URL, displays geographic data through CARTO’s built-in rendering. The page uses D3.js v4 only to set up the document structure, while the map itself relies on CARTO’s embedding API. The iframe is configured to fill the viewport with a fixed height of 520 pixels and supports fullscreen interactions. The visualization demonstrates how to combine a minimal D3 setup with an external mapping service, with no custom geographic projections or data processing in the code.

AAlan McConchie
74% match