Tell us what works and what could be better. We read every submission.
@apburnes·26 public vizzes
This example shows how to configure the Model Context Protocol (MCP) for llms.txt files in Claude Desktop and Cursor, using the LangChain mcpdoc server via the `uvx` command. It demonstrates JSON configuration blocks specifying multiple documentation URLs with the `--urls` parameter and the `--transport stdio` flag, alongside security controls like `--allowed-domains`. The setup enables AI assistants to fetch documentation from sites like PydanticAI, LangGraph, and the MCP protocol itself, bridging llms.txt indexes with MCP host applications.
The visualization maps PostgreSQL’s ecosystem onto a network graph, showing how the database extends into background jobs, search, APIs, and data visualization. It uses a force-directed layout with `d3.forceSimulation` to position nodes representing tools like pg_cron, PostGIS, pgvector, and Metabase, while links connect related categories. The graph is rendered as an SVG with D3’s `d3.select` and `d3.line`, with node sizes encoding the number of associated libraries. Data comes from the static markdown file listing each tool’s URL and category.
Overlapping semi-transparent polygons on a map of San Francisco show drive-time catchments around a central point, with each ring colored by travel time in 60-second increments from 60 to 300 seconds. The polygons are loaded from a GeoJSON file, and their irregular shapes reflect road-network reachability.
This example presents a Keybase proof file, showing the JSON structure and signature used to cryptographically link a GitHub account to a Keybase identity. The gist displays the plain-text claim, the signed JSON object, and the command-line verification steps. It relies on the Keybase API’s signing and hashing functions to generate and validate the Merkle root and signature, demonstrating the web service binding process for identity attestation.
This map visualizes the Los Angeles Lakers’ home turf with a custom Mapbox GL style, using Mapzen vector tiles as the data source. It renders water, roads, and highways with purple and gold color accents that echo the team’s branding. The style defines multiple road layers—from minor roads to motorways—with zoom-dependent line widths and halos to emphasize major arteries. Built as a JSON style configuration, it uses Mapbox GL’s layer filters and paint properties to achieve the thematic look.
This interactive visualization demonstrates the Bentley–Ottmann algorithm for finding line segment intersections. Users can drag endpoints to move lines, click to add new line segments, and right-click to remove them. The algorithm efficiently computes intersections using a sweep line rather than checking all pairs, achieving O(n log n + I log n) complexity. The right panel displays the current x-ordering of lines as the sweep progresses. Built with SVG and D3, the visualization updates in real time as users manipulate the line segments.
This interactive visualization demonstrates the Bentley–Ottmann algorithm for finding all intersections in a set of line segments. Users can drag endpoints to reposition lines, click to add new segments, and right-click to remove them. Rather than checking every pair of segments (O(n²) comparisons), the algorithm sweeps a horizontal line from top to bottom, maintaining the left-to-right order of segment intersections with the sweep line in a balanced tree shown on the right. As segments start, end, or cross, only newly adjacent pairs are tested for intersections, reducing the complexity to O(n log n + I log n) for I total intersections. The visualization uses SVG rendering and is implemented with D3.
This interactive visualization demonstrates the Bentley–Ottmann algorithm for finding line segment intersections. Users can drag line endpoints to reposition them, click to add new segments, and right-click to remove them. The algorithm sweeps a horizontal line from top to bottom, maintaining the order of segment x-positions at the current y (shown in the right panel). Instead of checking all O(n²) segment pairs, only adjacent segments are tested for intersections as they start, end, or cross, yielding O(n log n + I log n) time for I intersections. The SVG rendering highlights intersection points as they are discovered, providing an intuitive view of the sweep-line process.
This interactive visualization demonstrates the Bentley–Ottmann algorithm for finding all intersections among a set of line segments. Users can drag endpoints to reposition lines, click to add new segments, and right-click to remove them. The algorithm employs a sweep line that moves down the screen, maintaining the left-to-right order of line x-positions at the current y-coordinate in the panel on the right. As the sweep line encounters segment endpoints or intersections, it checks only adjacent pairs, achieving O(n log n + I log n) complexity instead of O(n²) for all pairs. The SVG rendering shows the line segments with draggable endpoints and displays the current sweep-line state, with red points marking intersection events.
The visualization demonstrates the Bentley–Ottmann algorithm for finding all intersections among a set of line segments. Users can drag endpoints to move lines, click to add new segments, and right-click to remove them. Rather than checking every pair of segments (O(n²)), the algorithm sweeps a horizontal line from top to bottom, maintaining the order of line x-positions at the current y in the right-hand panel. Intersections are detected only between adjacent lines in this ordering, reducing the complexity to O(n log n + I log n) for I intersections. The left panel shows the line segments with their intersection points marked, while the right panel displays the sweep line's current ordering. Rendered as SVG using D3.
This interactive visualization demonstrates the Bentley–Ottmann algorithm for finding line segment intersections. Users can drag endpoints to move lines, click to add new segments, and right-click to remove them. The algorithm sweeps a line from top to bottom, maintaining the order of segment x-positions at the current y (shown in the right panel), checking only adjacent pairs as the ordering changes. This reduces the complexity from O(n²) to O(n log n + I log n) for a set of lines with I intersections. The SVG rendering shows the segments and highlights intersections dynamically as they are discovered.
Interactive line intersection visualization built with D3.js and SVG. Users click to add draggable points, which automatically connect to form line segments. The visualization computes and highlights all intersection points between line segments, with different colors indicating whether intersections are genuine crossings or overlaps at endpoints. Points can be dragged to dynamically update the intersections in real time, providing an intuitive way to explore geometric relationships between lines.
This example outlines an architecture for building and updating a global Humanitarian Data Model (HDM) vector tile source from OpenStreetMap data. It first contrasts an older pipeline that filtered OSM `.pbf` files with node-osmium and generated tiles via Tippecanoe, then proposes a scalable system using AWS DynamoDB and S3 for storage, cardboard for tile generation, and tilelive-cardboard to serve tiles through a TileJSON URL. The writeup includes concrete processing steps and scripts for ingesting continent-level OSM extracts.
This example demonstrates how to convert a File Geodatabase (file.gdb) into a PostgreSQL database using the GDAL/OGR command-line tool. The code executes `ogr2ogr` with a PostgreSQL connection string specifying the database name and user, directly transferring spatial and attribute data between formats. It highlights the library’s role in migrating geospatial datasets without additional scripting. The command handles the conversion in a single step, preserving the original file’s structure. No visualization or rendering occurs; the focus is purely on the data interchange process via GDAL’s OGR vector driver.
A perspective projection can be precisely specified through four pairs of corresponding points. By dragging the four corners of the grid above, you can adjust the perspective projection interactively and place the grid anywhere you like in the scene. The grid lines are transformed using a matrix computed by solving linear equations from the four point-pairs via LU decomposition (numeric.js). D3 handles the SVG rendering and animation, with draggable corner handles and preset scene buttons (Floor, Near Wall, Far Wall, Reset) for quick placement.
This example demonstrates how to extend a plain JavaScript object with properties and methods from another object using a custom `extend` function. It shows the result of merging an `obj1` object—containing a `name`, a `value`, and a `multiply` method—into an empty `data` object, then invoking the merged method to compute a calculated return value. The code relies on native JavaScript array methods (`Array.prototype.slice`, `forEach`) and object property assignment, with no external libraries or rendering APIs. The visualization is purely computational, displaying the numeric output of the method call.
This example demonstrates a small JavaScript utility that extends an object with custom methods using a custom `extend` function. It defines an `L` object with a `fn` method returning the string “coolio,” and an `L.Util.extend` method that copies properties from arguments into a target object. The code then creates a `coolio` object with `cool` and `age` methods, and invokes `L.fn()`, `coolio.cool()`, and `coolio.age(1985)` to test the results. It uses plain JavaScript object manipulation rather than any visualization library or rendering API.
A compact data-visualization sketch explores how a single parsed value flows through a function, rendering the result as a small interactive node graph. The code defines a `parseGeo` function that stores an object with a version string, then calls it with the input `'gunc'` and accesses the `.package` property. Using `d3.forceSimulation` for layout, the visualization likely displays the function call’s output as a positioned circle or link, though the exact visual mapping is not fully specified. The example demonstrates a minimal D3-based approach to tracing data transformations in a gist format.
This example demonstrates how JavaScript’s variadic function handling can be visualized through a series of ellipses, each representing a function call’s arguments. The code defines helper functions like `variadic` and `unary` to transform fixed-arity functions into variadic ones, then logs the results of calls such as `unary('coo', 'lee', 'oh')` and `variadic(bianary)('why', 'hello', 'you')`. The visualization maps these argument arrays to elliptical shapes, showing the difference between named and variadic parameters. No external libraries are used; the rendering relies on plain JavaScript array manipulation and the `Array.prototype.slice` method.
This example demonstrates partial function application in JavaScript, showing how functions can be pre-bound with arguments to create specialized callable functions. It defines two helper functions, `callFirst` and `callLast`, which use the native `Array.prototype.slice` method to manipulate arguments. The code creates a `greet` function that takes two parameters, then uses these helpers to generate `sayHelloTo` and `beGreetedBy`, which pre-fix either the first or last argument. The output shows two example invocations that produce greeting messages with the bound argument applied in the respective position.
This visualization calculates and animates the rotational differences between two user-selected times using D3.js v3. It renders the Socrata logo as a clock face with SVG circles and paths for minute and hour tick marks, applying linear interpolation to compute rotations. The animation transitions text counters showing minute and hour rotation totals, using d3.svg.line for tick paths and transition tweens for dynamic label updates. Users input start and end times, triggering a 3-second countdown before rotation values animate.
Clock Spins displays the current time as a set of six concentric annular arcs, each representing seconds, minutes, hours, weekday, date, and month. The arcs fill progressively as each unit advances, with color and label position updating via a d3.timer loop. Using D3 v3’s d3.svg.arc and d3.time.format, the visualization renders in SVG with animated transitions, mapping each time field’s fractional value to an arc angle and radius.
This visualization assesses the habitat suitability of the Pediocactus peeblesianus cactus across Northern Arizona. It maps a raster surface of potential habitats derived from environmental inputs including elevation, slope, aspect, and precipitation. The analysis filters field observation data via Pandas and statistical calculations, then renders the resulting suitability surface using WebGL within a Vue framework. The code processes the dataset with Python’s NumPy and SciPy libraries before visualization.
This Python script converts Landsat TM digital numbers (DNs) to top-of-atmosphere (TOA) radiance values, producing output GeoTIFF files with units of W/(m2·ster·µm). It reads USGS metadata files to extract calibration constants (gain, bias, radiance limits, and quantization ranges) and applies them to each spectral band. The program uses GDAL (via `osgeo.gdal`) for raster I/O with block-based processing, NumPy for array operations, and supports LZW compression, tiling, and BigTIFF options. The example processes six bands (1–5 and 7) from standard USGS naming conventions, as shown in the sample run with LE7 scene data.
This example explains how topology, a branch of mathematics, applies to geography by projecting 3D sphere features onto 2D planes and enforcing data-integrity rules in geographic databases. It illustrates the conceptual shift from points to polygons, demonstrating how spatial relationships can infer object creation, while also showing the distortion inherent in map projections. The visualization uses static images to depict topological transformations, and the accompanying text describes the role of topology in Enterprise GIS for managing geometric data and ensuring accuracy through defined rules like polygon adjacency and line congruence. The code relies on Markdown formatting for its content, without any specific JavaScript libraries or APIs.
This example computes the Normalized Difference Vegetation Index (NDVI) from red and near-infrared raster bands, then writes the result as a single-band GeoTIFF. It uses the GDAL Python API via `gdal.Open`, `ReadAsArray`, `GetGeoTransform`, and `GetProjectionRef` to read input data and preserve spatial metadata. The calculation applies `np.logical_and` and `np.where` to mask invalid pixels, setting them to -999, while `save_raster` creates the output with LZW compression and tiling. The code handles format selection through a `driver` parameter, defaulting to GeoTIFF.