SwampGuzzler

@SwampGuzzler·8 public vizzes

1.2.1 Updates

This example demonstrates a dashboard for managing GFW Mapbuilder analysis panel configurations, showing how updates like translations, time-slider ranges, and filter removals are applied across multiple environmental analyses. The interface uses the `resources.js` file from a GitHub repository to control settings, with d3-based visualizations for forest loss, biomass, GLAD alerts, and TERRAi analyses. It highlights a bug where changes to `resources.js` do not take effect for certain app IDs, and displays overlapping UI elements between the attribute table and the report/run analysis button. The code relies on d3 library functions for rendering and configuration management.

Jul 16, 2018

Loading thumbnail…

Default basemap for the Blue Raster's GFW Pro web application

This example presents a custom vector basemap for Blue Raster’s GFW Pro web application, styled using a Mapbox GL style specification. It renders land, water, and urban areas from Esri’s World Basemap vector tile service, with layered fills for lakes, rivers, and intermittent water bodies. The JSON defines paint properties and zoom-dependent visibility, pulling sprite and glyph resources from ArcGIS basemap services.

Jun 8, 2018

Loading thumbnail…

test gj

This example displays a map of geographic points representing cities, towns, and neighborhoods in the Seattle and Victoria regions, sourced from a GeoJSON file. It uses Vue to manage the application and renders the map with D3.js, likely employing `d3.geoPath` to project the coordinates onto a canvas or SVG. The visualization distinguishes place types such as cities, towns, and localities, with population data available for some features, though no interactive or animated behavior is demonstrated.

Jul 29, 2016

Loading thumbnail…

[Working with spatial data](https://github.com/enjalot/wwsd)

This example demonstrates how to work with geospatial data using d3.js projections, visualizing trail points from a GeoJSON file on a Mercator projection. The code uses the d3.geo.path() function with a d3.geo.mercator() projection to render SVG paths, and employs d3.json() to load the data. The map displays points with a transform applied, while path elements are styled with a gray fill and white stroke that turn red on hover.

Jul 28, 2016

Loading thumbnail…

Slimmed down geojson from the West Coast Trail in Victoria

This example visualizes a slimmed-down GeoJSON dataset of GPS track points from the West Coast Trail in Victoria, Canada. The map displays the trail’s geographic path by plotting individual point features as a scatter layer, with each point’s elevation value encoded in the data properties. The visualization is rendered using D3.js, specifically leveraging `d3.geoPath` to project the GeoJSON coordinates onto a map, while the points are drawn as simple SVG circles. The source data originates from a gist by SwampGuzzler, containing trail segments with attributes like track segment IDs and elevation values.

Jul 28, 2016

Loading thumbnail…

Atom sync-settings

This visualization tracks the synchronization of settings across multiple Atom text editor instances. It displays a force-directed network graph where each node represents a distinct package or setting, with edges indicating shared configuration links. The layout uses D3’s `forceSimulation` to spatially cluster related items, while color encodes the sync status (synced, pending, or conflict). Data is pulled from a local gist and parsed via JavaScript’s `JSON.parse`, rendered using D3’s SVG path methods. The interactive view allows panning and zooming through D3’s viewport controls.

Jun 28, 2016

Loading thumbnail…

automatic update by http://atom.io/packages/sync-settings

This example visualizes the package and theme dependencies of an Atom editor configuration, as captured in a sync-settings gist. It shows the full list of installed packages from `packages.json`, including community packages like atom-beautify, linter, and minimap, alongside built-in core packages. The visualization displays package names and version numbers, with themes like one-dark-syntax and solarized-light-syntax distinguished from regular packages. The data is rendered from the raw JSON structure of the gist’s `packages.json` file, listing each entry without additional processing or transformation.

Jan 19, 2016

Loading thumbnail…

Gist c53b34b249207da31466

This animated visualization is a Node.js cheat sheet that displays API documentation in a dynamic, moving format. The code covers fundamental Node.js concepts including global objects, console methods, timers, modules, and process handling. It demonstrates the use of the http module to create a web server and various event-driven programming techniques. The animation renders the documentation in a visually engaging way, showcasing both the syntax and usage of core Node.js APIs.

Jul 30, 2014