Skip to main content
100%

Gist 24e4e0ec42cdeff6633c

✓ Published0🌍 Public
Aandrewxhill
Last edited Jul 7, 2014
Created on Jul 7, 2014

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.

AI-generated description

Similar vizzes

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
78% match
Loading thumbnail…

Gist 894879

This example builds an interactive map visualization using the D3.js library, displaying geographic data over a rendered world map. It applies a force-directed simulation with `d3.forceSimulation` to position nodes, while `d3.geoPath` generates the map outlines and `d3.geoProjection` handles coordinate transformations. The interface includes customizable control panels styled via CSS, allowing users to adjust map layers and layout dynamically. The visualization renders data from a gist source, combining geographic boundaries with overlaid points that respond to simulated forces for a dynamic, data-driven presentation.

Aandrewxhill
77% match
Loading thumbnail…

Gist a61b3f54da810f6e9490

This example demonstrates how to map and animate earthquake data from the USGS CSV feed using CartoDB’s mapping tools. It shows temporal earthquake occurrences through an interactive map, with points updating over time. The code relies on CartoDB’s SQL API and JavaScript library for layer management, alongside D3.js for data-driven visualizations. It also integrates Chart.js for supplementary graphs and uses dynamic styling via CartoDB’s tile rendering. The visualization highlights both spatial distribution and time-based animation of seismic events.

Aandrewxhill
76% match
Loading thumbnail…

Gist 67fa3790166d6549f4a9

This interactive visualization pairs a large world map with a side panel, using D3’s `d3.forceSimulation` to scatter data points across geographic coordinates rendered via `d3.geoPath` and Canvas `getImageData` for pixel-level placement. The layout adapts responsively, and the code includes CSS themes for light or dark editorial styling, suggesting a map-based storytelling template.

Aandrewxhill
75% match
Loading thumbnail…

Basic CartoDB Layer in D3

This example displays geographic features from a CartoDB table as violet polygons on a map. It uses D3.js with a GeoJSON data format to load the geometry through the CartoDB SQL API. The code applies `d3.geoPath` with a projection to convert GeoJSON coordinates into SVG path data, appending `path` elements to a selected layer. The map relies on the `d3.json` method to fetch the data asynchronously and render it directly into the SVG.

Aandrewxhill
75% match
Loading thumbnail…

DataKind Workshop | Demo

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.

Aandrewxhill
74% 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
74% match
Loading thumbnail…

Gist 34bad0b124f4effdf99d5555cb3222d8

This example shows how spatial relationships between geographic features can be explored through an interactive map. It uses D3.js with `d3.geoPath` to render country outlines from a GeoJSON source, while a force-directed layout via `d3.forceSimulation` positions non-overlapping markers for data points. The visualization computes marker placement on a Canvas, reading pixel colors with `getImageData` to detect land versus water and ensure points remain on landmasses. Hover interactions trigger a tooltip and highlight neighboring regions, with smooth transitions handled by `transition.attrTween`. The data originates from a public GitHub gist and is embedded in a Power BI report, where the canvas is updated on each zoom or pan event.

HHugoberry
74% match