Tell us what works and what could be better. We read every submission.
@andrewbt·37 public vizzes
This visualization maps interview questions for a product management role at a B2B software company, showing how they cluster around themes like platform strategy, domain expertise, and roadmap execution. Using d3.forceSimulation, it positions nodes in a network layout, with each question rendered as a text label and connected by proximity-based links. The code reads the questions from a JSON array and applies color coding to distinguish core competencies, while a zoomable and draggable interface lets viewers explore the semantic relationships between hiring criteria.
This visualization displays hardware information for a Royal Kludge S98 keyboard using a force-directed graph. It maps device properties such as manufacturer, USB version, driver details, and hardware IDs as interconnected nodes. The code uses `d3.forceSimulation` to position the nodes, with links drawn as SVG paths to show relationships between categories. Data comes from a static gist containing the `rk-s98_hwinfo` text output. Node colors and sizes differentiate property types, while labels remain readable through a zoom-and-pan interaction built with `d3.zoom`.
This example demonstrates a collection of SQL recipes for solving common spatial data problems in CartoDB, ranging from merging neighboring county polygons with ST_Union to creating great circle lines via ST_MakeLine and ST_Segmentize. It shows practical techniques like updating geometries with conditional CASE statements, extracting coordinates with ST_X and ST_Y, stripping HTML tags using regexp_replace, and formatting zip codes with to_char. The code also covers performance strategies for large updates and querying spatial relationships with st_contains. Each snippet targets PostGIS functions within the CartoDB platform, emphasizing data preparation and geometric transformations.
This example demonstrates a sticky navigation bar that changes its position based on user scrolling. The page features a hero image with a portfolio introduction, followed by sections for an "About Me" bio and a "Concepts" grid showcasing three project thumbnails (Google Search Page, Pixel Maker, and JavaScript Documentation). The navbar starts at the bottom of the hero section and becomes fixed at the top of the viewport once the user scrolls past the about section, using a scroll event listener and class toggling in JavaScript. The design uses a clean, responsive layout with CSS positioning and hover effects on project cards. Built with React, this example illustrates how to implement a sticky navigation bar that transitions from an absolute to a fixed position based on scroll behavior.
A command-line Python3 calculator splits a combined net pay stub value into net salary and net commission, using the ratio of gross commission to gross pay. It prompts for gross commission, gross pay, and net pay, then computes the net commission as that ratio multiplied by net pay, with net salary as the remainder. The results print to the terminal with two decimal places, and the net salary is copied to the macOS clipboard via the `subprocess` module’s `Popen` call to `pbcopy`.
This example converts a JSON file of Arlington County bike counter data into GeoJSON. It loads the JSON with `simplejson`, then builds a FeatureCollection where each record becomes a Point feature with longitude and latitude coordinates, preserving the original data as properties. The script writes the result to a new `.geojson` file using `json.dump`. The data originates from an XML web service that was manually converted to JSON before processing.
This script calculates aggregate statistics for shapefiles in the current directory, reporting the total feature count and the average per file. It walks the directory tree using Python’s `os.walk`, opens each `.shp` file with OGR’s `ogr.Open`, and retrieves feature counts via `layer.GetFeatureCount()`. Results are accumulated in a list, then summed and divided by the number of files to produce the final average. The output prints each shapefile’s name and count, followed by the sum and average, using only the `os` and `osgeo.ogr` libraries.
This example displays a tiled web map centered on a specific location, with an overlaid raster layer showing land cover data from the Azavea NLCD tiles. The visualization uses TileJSON 2.2.0 to define both the OpenStreetMap base layer and the additional data layer, which is rendered with adjustable opacity. The map view is configured with a precise center coordinate and zoom level, while the interface supports toggling layer visibility and sharing the current map state via a GitHub gist. The code references the TileJSON specification for tile URL patterns and layer properties.
This example combines CARTO.js, Leaflet, Airship, and Highcharts to create an interactive crime-map dashboard. The map displays crime locations over a Voyager basemap, while a sidebar shows the total number of crimes and a bar chart of crime types. Clicking a bar in the Highcharts chart filters the mapped data by that crime type, and a “Clear” link resets the query. The code uses the `carto.Client` API for data layers, Leaflet’s `L.map` and tile layers, and Highcharts’ `Highcharts.chart` with bar series.
This example loads a public CARTO Builder URL into a Mapbox GL map as a raster tile layer. It shows how a user can paste a CARTO embed URL, select specific layers from a dropdown, and dynamically add the corresponding map tiles to the Mapbox GL view. The code parses the URL to extract the username and named map template, constructs an XYZ tile request, and uses `map.addLayer` with a raster source to display the data. The interface includes an input field, layer selector, and a button to trigger the tile loading.
This example displays an interactive web map with three overlaid tile layers, including an OpenStreetMap basemap, an Azavea NLCD layer, and a CARTO Voyager basemap. The visualization uses TileJSON 2.2.0 metadata to define tile sources and layer properties such as opacity and visibility, which are rendered in a browser-based map client. A JSON configuration file controls the map’s center point, zoom level, and shareable Gist settings, while the tile layers are fetched from remote servers via standard XYZ tile scheme URLs. The code relies on TileJSON and map rendering APIs to composite and display the geographic data.
This example demonstrates a tile-based map comparison interface that layers two different tile sources over a base map, with adjustable opacity to blend between them. The visualization uses a WebGL-enabled map library to render Esri World Imagery as the base layer and Azavea’s NLCD land cover tiles as an overlaid layer, controlled by a slider. The code initializes a TileJSON 2.2.0 configuration, sets a default center and zoom level, and enables sharing the setup via a gist. It does not show any custom data processing or interaction beyond the basic tile loading and opacity control.
This example shows how to add a single CARTO layer to an interactive map. It displays populated places as points on a global basemap, centered at [0,0] with zoom level 1. The visualization uses Mapbox GL JS for map rendering and the CARTO VL library (v1.4.1) to define a data source from the `populated_places` dataset and add it as a layer to the map. The basemap uses CARTO’s `voyager` style, and the layer is added before the `watername_ocean` layer. A loading spinner hides once the layer finishes loading.
This example shows a zoomable map with an overlaid raster layer, centered on a region and displaying a custom data tile set. The base layer uses OpenStreetMap tiles from `https://a.tile.openstreetmap.org/{z}/{x}/{y}.png`, while the overlay pulls tiles from a TileJSON endpoint (`https://a.tiles.azavea.com/nlcd/{z}/{x}/{y}.png`) via the TileJSON 2.2.0 specification. The code relies on the TileJSON.io tool, which parses the `info.json` and `tile.json` files to set the map’s center, zoom level, and layer visibility, using standard XYZ tile scheme for rendering.
This example demonstrates how to move data from Amazon Redshift into CARTO for visualization. Using SQLAlchemy to connect to a Redshift cluster, the notebook reads an `addresses` table into a pandas DataFrame, then writes it to a CARTO account with the `cartoframes` library. The result is a CARTO dataset (`redshift_example`) that can be explored on an interactive map, enabling geospatial analysis of address-based data such as inhabitant counts.
A single red square fills the entire viewport, with no other visual elements or interaction. The page uses a plain HTML `div` styled to occupy the full height with a red background color, rendering a solid block of color. This example, built from a Blockbuilder.org fork, demonstrates the simplest possible data-visualization setup by relying solely on CSS styling within the HTML structure, with no JavaScript libraries or data processing involved.
This example shows a blank SVG canvas with a single instructional text element reading “Edit the code below to change me!” positioned at a fixed coordinate. The visualization is minimal, serving as a starting template for users to modify. It uses D3 v4 to select the body element, append an SVG of 960 by 500 pixels, and add the text with specified font size and monospace family. The code relies on basic D3 selection and append methods, with no data or interactive behavior present.
This example builds a custom interactive map by layering a scanned historical campus map from MapWarper between two CARTO Voyager basemap tilesets: one without labels and one with labels only. The code constructs a JSON mapconfig specifying three HTTP tile layers and uses the requests library to post it to Carto’s map API. The result visually sandwiches the old map beneath modern road and label layers, preserving geographic context while overlaying contemporary annotations.
Real Madrid Opta plots basketball shot locations on a full-court image overlay using Leaflet and CartoDB. Three CartoDB sublayers query separate SQL tables to render shot markers as colored dots, with each color representing a different opponent and match date. The map is centered at an extreme zoom level of 21 over the court image, and a small readout div displays zoom information. The visualization uses the CartoDB.js library and Leaflet.zoomdisplay plugin to show the current zoom level.
This visualization generates synthetic timestamp data from year strings using a SQL function that randomly selects a point between January 1 and December 31 of the given year. The example demonstrates how to create randomized temporal values for testing or simulation purposes, with the function `random_time_from_year_string` accepting a year as text and returning a timestamp. The code leverages PostgreSQL's SQL language features, including type casting and arithmetic on timestamp intervals, while using the `random()` function to produce the uniform distribution across the year. The rendering approach is not specified, as the example focuses solely on the data generation logic within the SQL query.
This example demonstrates how to create a map with CartoDB's named map API, combining a raster point layer and a torque layer over a Stamen toner basemap. The code loads two named map configurations, one for interactive points with hover and click infowindows displaying city name and population, and another for a torque visualization that is stopped after loading. It uses the Leaflet map library via `L.map`, CartoDB.js's `cartodb.createLayer` with `type: 'namedmap'` and `'torque'`, and the `cdb.vis.Vis.addInfowindow` method for popups. The data source is a table named `named_map_tutorial_table`.
This interactive map displays U.S. census tracts and blocks colored by the ACFOSW_200 metric, with zoom-based switching between tract and block levels and a readout panel for selecting red or blue color schemes. It uses CartoDB.js and Leaflet with zoomdisplay, loading polygon data from a gist. CartoCSS styles define choropleth ramps and quantile breaks, while an infowindow template shows GEOID and ACFOSW_200 values on click.
This interactive map shows choropleth data for U.S. census tracts and counties, colored by the `acfosw_200` attribute. A readout overlay indicates that tract boundaries appear at zoom levels 0–12, while block-level data displays at zoom 12 and higher. The visualization uses Leaflet with the CARTO.js library, applying CartoCSS styles that switch between quantile-based color ramps and manual class breaks depending on zoom. Clicking a feature opens a popup revealing its GEOID and attribute value.
This example shows how to upload large datasets to CARTO by splitting them into smaller chunks and using the SQL Batch API to merge them. It demonstrates three chained batch queries: creating a combined table with `CREATE TABLE ... UNION ALL`, dropping the `cartodb_id` column with `ALTER TABLE`, and finalizing with `cdb_cartodbfytable`. The code references CARTO’s SQL API and batch query chaining, alongside a Python script from `carto-etl` and GDAL/ogr2ogr alternatives for record-by-record inserts.
This example demonstrates a Leaflet-based web map that lets users create, edit, and delete point markers, with changes persisted to a CARTO points-geometry table. It uses Leaflet.draw for the interactive drawing controls and CARTO’s SQL API to read and write GeoJSON features. The map is initialized with a CARTO basemap, and existing points from a CARTO table are loaded via a `cartodb.SQL` query and added to a `L.FeatureGroup`. A custom `persistOnCartoDB` function handles UPDATE, INSERT, and DELETE actions by constructing parameterized SQL statements, which are executed through a security-definer PostgreSQL function to modify the underlying table. The example demonstrates a full read–edit–write workflow for point data, with hooks for the Leaflet.draw events.
This example demonstrates an interactive map interface built with Leaflet and the Leaflet Draw plugin, allowing users to overlay and edit geographic features on top of selectable base layers. It displays OpenStreetMap, CARTO light tiles, and Google satellite imagery, while a feature group holds drawn polygons and polylines. The code loads GeoJSON data from a CARTO SQL API query, populating the map with predefined areas of interest from a dataset about New York. The drawing controls enable polygon creation with intersection restrictions and area measurement, though the event handler for adding newly created layers is commented out.
This example displays a simple static SVG canvas with the text “Edit the code below to change me!” rendered in a large monospace font. The visualization uses D3 v4 to select the body element, append an SVG container with fixed dimensions, and place a single text element at a specified position. It demonstrates the basic structure of a D3 block, where the code sets the SVG width and height attributes and applies font styling through D3’s style method. The data source is the hardcoded string in the text element, with no dynamic data or interactions present.
The cartodb-python SDK Beta 1.0 example demonstrates the programmatic management of CARTO accounts and datasets through Python. Using the APIKeyAuthClient for authentication, the script creates a new user in a CARTO organization and then creates a dataset by importing a publicly available tornado dataset from an external ZIP file URL. It showcases the SDK’s object model, including UserManager and DatasetManager, and prints the resulting metadata for the new user and dataset—details like quota, table counts, geometry types, and row counts. Finally, it shows deleting the user and demonstrates the full CRUD cycle of the SDK’s high-level API for managing both users and datasets programmatically.
This example demonstrates how to chain multiple CARTO SQL API requests into a single workflow to plan a hypothetical free-ticket flight from CARTO HQ in Brooklyn to a Pennsylvania airport. It first geocodes the HQ address, creates a 2.5-hour driving isoline, intersects that with Pennsylvania airports, and routes to the nearest reachable airport. The code uses `cdb_geocode_street_point`, `cdb_isochrone`, `ST_Contains`, and `cdb_route_point_to_point` to build the route, then calls `cdb_cartodbfytable` to prepare the resulting tables for mapping.
This example demonstrates interactive layer controls for a map built with CARTO.js. It displays two CartoDB sublayers—African countries and global lakes—over an OpenStreetMap basemap using the Leaflet map object. Two dashboard buttons toggle the visibility of each sublayer by calling the `hide()` and `show()` methods on the corresponding sublayer. The map is centered on southern France at zoom level 3, and the sublayers are defined with custom SQL queries and CartoCSS styling.
This shell script downloads a double-zipped shapefile of New York City building data from the Socrata open-data API, unpacks it, and uploads the two resulting shapefiles to CartoDB as separate map layers. It uses `curl` for all HTTP requests, `unzip` and `zip` for archive manipulation, and the CartoDB SQL and Import APIs to drop existing tables, submit each zipped shapefile, and poll job status until import completion. The script handles platform-specific `sed` syntax for Darwin and Linux.
A build log for a Jekyll-powered blog shows a Grunt serve task failing repeatedly with an EMFILE "too many open files" error. The output details the site generation process, including Compass CSS compilation and a livereload server, before the watch task exhausts file descriptors and triggers recursive Node.js warnings. The process eventually crashes with a maximum call stack size exceeded error, illustrating a resource limit issue in the development workflow.
This visualization displays a map of loan locations in the United States, overlaid with clustered markers that encode the consumer versus commercial status of each loan. The example uses a Leaflet map with CartoDB basemaps and tiles, while the q-cluster library’s `QCluster.PointClusterer` aggregates points into donut-style clusters. Loan data is loaded from a JSON file via an AJAX request, and the map is initialized with a dark CartoDB tile layer, centered on Mississippi. D3.js is not directly used for rendering; instead, the clustering and map interaction rely on Leaflet and the q-cluster plugin.
This example maps loan data from Tuscaloosa, Alabama, and Meridian, Mississippi, using great circle lines to connect points on a geographic map. Built with d3.v3 and CartoDB's Leaflet q-cluster plugin, it visualizes loan balances by plotting each record as a point, with arcs drawn between locations to highlight spatial relationships. The clustered markers use the q-cluster plugin to group nearby points, while the curved lines emphasize geographic connections. Data includes loan amounts, payoff dates, and loan types from the provided JSON.
This example shows a store-locator interface where search results appear in a sidebar `<div>` outside the map canvas, listing the five nearest stores with name, telephone, Monday hours, and location description. The map uses the Google Maps API for autocomplete and centering, while store data comes from a CartoDB SQL query that orders locations by spatial proximity to the searched point. The code builds HTML strings for each result and injects them into the `#store-info` div, with links that call `openInfoWindow` on the CartoDB layer to highlight the corresponding map marker.
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.
This release notes document from the OpenTreeMap project summarizes the features of version 1.2. It details a new RESTful API for mobile apps that handles tree search, editing, and compact binary map tiles, along with user authentication and photo management. The text also describes integrating South for database migrations, moving dropdown options to a choices.py file, and a settings.js template that shares map location between the API, web views, and client-side JavaScript. It further notes OpenLayers updates for better mobile support and reputation score configuration within settings.py.