Tell us what works and what could be better. We read every submission.
@ajzeigert·27 public vizzes
This visualization presents a PostgreSQL backup and restore workflow as a sequential diagram. It shows the three core commands—pg_dump, createdb, and pg_restore—with their key arguments for database transfer between hosts. The rendering uses d3.forceSimulation to position nodes representing commands, database names, and file names, with d3.linkHorizontal curves connecting them. The diagram maps the data flow from a source endpoint through a backup file to the target database, making the command syntax and dependencies visually explicit.
This example converts KML/KMZ geographic data into an ESRI Shapefile while extracting HTML tables embedded in each feature’s description field and promoting them to real attribute columns. It uses GDAL/OGR to read the source layer and export its geometry, fiona to write the output shapefile, and lxml’s `etree.HTML` to parse the description tables. The script iterates through all features, replacing the raw description string with parsed table cells as properties before writing the updated schema to disk.
This example visualizes the 22 Major Arcana cards from a tarot deck, presenting each card’s name, image, and textual description and interpretation. It uses D3.js’s `d3.forceSimulation` to position the cards in a networked layout, with `d3.select` and `.append` to render card elements. The images are loaded from local JPG files in the `deck/` directory, and hovering or clicking a node reveals its full description text. The data originates from a JSON file (tarot.json) authored by ajzeigert.
This example tests Mapbox GL JS building extrusion using Lidar-derived building footprint data from Bend, Oregon. Building polygons are styled with extrusion based on height properties, producing a 3D visualization of the urban landscape. The data, stored in a GeoJSON FeatureCollection, includes attributes such as elevation, height, and build height for each structure. The map renders the buildings as extruded 3D volumes, demonstrating Mapbox GL JS's ability to visualize lidar building data with realistic vertical dimensions.
This interactive map uses Mapbox GL JS to display the locations of bars and pubs in Bend, Oregon, sourced from OpenStreetMap via Overpass Turbo. Each venue is represented by a point marker on a full-screen, scrollable map, with the points styled as distinct icons. The visualization demonstrates how to load external GeoJSON data into a Mapbox GL JS map and render point features with custom properties, such as the bar's name and amenity type. Users can pan and zoom around the map to explore the distribution of these establishments across the city.
An interactive map displays seismic data for the Portland area, including fault lines, liquefaction susceptibility zones, and station markers. Users can toggle layer visibility and adjust the return period slider to filter seismic hazard layers. The visualization uses Mapbox GL JS with custom vector tile sources for faults and service areas, styled through Mapbox Studio. A Bootstrap panel provides UI controls, while jQuery handles interactions, and station information updates on hover.
This example demonstrates a technique for embedding an SVG image in a webpage while ensuring backward compatibility with browsers that do not support the SVG format. The code shows an `<object>` element that references an external SVG file via the `data` attribute, with a fallback `<img>` tag pointing to a PNG version inside the object. The outer `<div>` controls the display size using width and height percentages. No JavaScript libraries are used; the approach relies purely on native HTML elements to handle graceful degradation for older browsers like IE.
This example shows a JavaScript function that converts numeric degree values into cardinal and intercardinal compass directions, such as N, NE, E, and SE. It displays the logic by defining `getDirection`, which takes a degree input and returns the corresponding direction based on a series of conditional ranges. The function uses plain JavaScript comparison operators, with ranges centered on 22.5-degree increments, and wraps values at 337.5 degrees back to “N”. The code is designed for use with geographic data, such as aspect values in mapping contexts, though it does not rely on any external libraries or rendering APIs.
Pulsing markers in Mapbox GL JS animate mountain peak labels from the Natural Earth elevation points dataset, with a yellow ring effect that expands and fades around each numbered marker. The map uses Mapbox GL JS v0.12.2 with a streets style, adding two symbol layers from the same GeoJSON source. A `requestAnimationFrame` loop running at 30 frames per second adjusts text opacity and size properties on one layer, creating the pulsing effect while the base layer remains static.
The map displays live METAR station wind speed and direction data as rotated text symbols over a dark basemap. It queries NOAA wind observations from an Esri ArcGIS REST service, converts the responses from ArcGIS JSON to GeoJSON using Terraformer, and loads them into Mapbox GL JS as a GeoJSON source. Each station’s wind speed determines the symbol’s size and color, while wind direction sets its rotation, with speed thresholds mapped to a yellow-to-red palette.
The map displays real-time wind speed and direction from NOAA METAR stations across the United States, with each station rendered as a rotated text symbol indicating wind direction and colored/sized by wind speed. It uses Mapbox GL JS with a custom dark style, fetching live ESRI ArcGIS feature data via jQuery AJAX, converting the response to GeoJSON with Terraformer, and adding individual symbol layers for each station through mapboxgl.GeoJSONSource and map.batch. Wind speed thresholds control text size and color, while wind direction sets the text rotation angle.
GAS PIRATE is a mapbox-gl visualization of natural gas pipeline infrastructure in the Los Angeles area, layered with real-time NOAA wind speed and direction data from an ESRI live feed. The map displays high-pressure and transmission pipelines as glowing blue lines over a dark basemap. Wind station readings are rendered as colored text symbols whose size and color encode wind speed, from yellow for light winds to orange for stronger conditions. A time slider at the top lets users adjust the selected time, showing the three nearest wind readings to that moment, while the map automatically repositions to keep relevant stations in view.
A real-time visualization of wind speed data overlaid on a dark map of Los Angeles, showing natural gas pipelines. Wind speed readings from NOAA METAR stations are rendered as text labels whose size and color encode wind intensity, with colors ranging from yellow to deep red. High-pressure and transmission pipelines are drawn as glowing blue lines. A time slider lets users select a moment, and the three closest wind readings to that time are highlighted.
GAS PIRATE visualizes natural gas pipeline sensor readings in Los Angeles using Mapbox GL JS. The map displays high-pressure and transmission pipeline lines in distinct blue shades. Readings from a GeoJSON source are shown as circles, colored gray or red based on whether percent LEL (Lower Explosive Limit) is below or above 100, with larger red circles for warning levels. A time slider lets users select a time and view the three nearest sensor readings to that moment.
A Mapbox GL map displays vector tile taxlots from a Mapbox hosted tile service, with contour lines from terrain data overlaid. Clicking a taxlot queries the Deschutes County ArcGIS REST API for that lot’s sales history, then displays the two most recent sale dates and prices in a side panel. The map uses mapboxgl.Map, mapboxgl.GeoJSONSource, featuresAt, and an XMLHttpRequest-based HttpClient to fetch and render the data.
A Mapbox GL example displays tax lot parcels from a custom vector tile source over a base map. The map loads the "deschutes-taxlots" source, rendered as semi-transparent filled polygons with white outlines, and uses the `featuresAt` API to query features on mouse movement. The page shows the current tax lot ID in an overlay panel, updating live as the cursor moves. The code uses Mapbox GL JS v0.11.1 with the light-v8 style and interactive layer events.
This interactive map displays natural gas pipeline infrastructure in the Los Angeles area, distinguishing high-pressure pipelines in red from transmission pipelines in yellow. Built with Leaflet, the visualization overlays two GeoJSON datasets on a Stamen toner-lite base map, with pipelines loaded via asynchronous AJAX requests. The map is centered at coordinates [34.05, -118.25] at zoom level 10, with pipeline colors encoded by line type—red for high-pressure lines and yellow for transmission lines—over a grayscale street map for contrast.
This map of Los Angeles shows high-pressure natural gas pipelines as orange lines overlaid on a light street map. Built with D3.js, Leaflet, and TopoJSON, it loads GeoJSON pipeline data and projects it onto an interactive Stamen toner-lite basemap. The SVG overlay redraws and repositions itself on map pan and zoom using a custom geographic projection that converts latitude and longitude coordinates into leaflet layer points.
This example displays pipeline routes over a geographic area, distinguishing high-pressure (green) and transmission (gold) lines. The D3 map uses a Mercator projection fitted to the high-pressure pipeline data, which sets the map’s scale and center. SVG paths render the GeoJSON line features, with the transmission layer added after the high-pressure layer. The background is plain white, with no street grid visible, and the pipelines appear as thin, colored lines. Hover effects are commented out, so the visualization is static. The map is sized at 800×600 pixels.
This visualization shows how cigarette sales taxes per pack as a percentage of retail price changed across U.S. states from 1970 to 2014, using data from the Centers for Disease Control and Prevention. A multi-series line chart rendered in SVG with D3 v3 displays one line per state, with each line encoding the tax burden over time. Oregon is highlighted in steel blue, while hovering over any line highlights it in orange and reveals the state name via a tooltip. The x-axis spans the years 1970–2014, and the y-axis shows the tax percentage, making it easy to compare tax trends across states over four and a half decades.
The chart displays median household income against overall population for each Oregon county in 2013, with income adjusted to 2013 dollars. It uses a scatterplot of SVG circles, colored green, where hover interactions highlight individual counties and tooltips reveal exact income and population values. The code loads data from `oregon.csv` using `d3.csv`, sorts counties by descending income, and employs `d3.scale.linear` with `d3.svg.axis` for the x and y axes. Data originates from the U.S. Census Bureau.
A horizontal bar chart displays median household income for Oregon counties in 2013, sorted in descending order, with the state average highlighted in dark gray and counties in green. The visualization uses D3 v3 with SVG rendering, an ordinal y-scale for county names, and a linear x-scale for income values. Tooltips appear on hover via appended `title` elements, while axis labels and value text are generated through D3 selections. Data comes from a CSV file listing county and income figures sourced from the U.S. Census Bureau.
The visualization maps median household income across Oregon counties, using color intensity to reveal regional disparities, from the highest earners in Clackamas and Washington Counties to the lowest in Grant and Lake Counties. It shows a static choropleth of the state, with each county polygon filled according to its income value. The code uses `d3.csv` to load the income data and `d3.geoPath` to render county boundaries from a GeoJSON topology, while a sequential color scale maps income ranges to fill colors. The data originates from a gist by ajzeigert, with the overall Oregon figure included for reference.
This visualization shows the yearly percentage change in the U.S. Consumer Price Index for various food categories from 1974 to 1995. Rendered as an SVG with D3.v3, the chart uses a small-multiple line graph layout where each food category is plotted over time, with a brushable timeline to explore the data. The dataset is sourced from a gist by ajzeigert and includes categories such as meats, dairy, fruits and vegetables, and cereals.
The visualization displays historical U.S. Consumer Price Index (CPI) data from 1974 to 2014, plotting annual percentage changes for food categories such as all food, food away from home, food at home, meats, poultry, eggs, and dairy products. Using D3 v3 with SVG rendering, the example demonstrates how to load and parse the CSV dataset, then map the year columns and category rows into a multi-series line chart. The graphic includes axes, gridlines, and a legend to differentiate the food categories, showing inflation trends over four decades. It serves primarily as a demonstration of D3's CSV loading and data-binding capabilities.
The chart tracks annual percentage changes in the Consumer Price Index for food from 1974 to 2014, comparing overall food prices with food at home, food away from home, and specific categories like meats, dairy, and eggs. Rendered as a multi-line chart, the visualization uses a distinct line for each item, with a legend to identify categories, making it easy to compare trends and volatility across decades. The data, sourced from the USDA, highlights spikes such as the 1970s inflation era and notable swings in egg prices. The chart is designed with clear axis labels and a title, providing a straightforward view of how food price inflation has varied by category over 40 years.
This example demonstrates a targeted OpenStreetMap query for extracting bicycle-friendly paths within a given bounding box, rendered for display in QGIS. The Overpass API query filters ways tagged with both `highway=path` and `bicycle=yes`, then prints the results in JSON format. After outputting the body of matched ways, it recurses down to include associated nodes and prints a skeleton with quadtile ordering for efficient spatial retrieval. The code relies on the Overpass query language’s `has-kv` filter, `bbox-query`, and `recurse` operations, making it a practical template for loading specific route data into a GIS environment.