5un

@5un·8 public vizzes

04: Custom Map Controls

This example demonstrates a map with two toggleable layers—hexbins and crash points—overlaid on a Mapbox GL base map. The hexbins are generated from a GeoJSON dataset of NYC crashes using Turf.js to create a hex grid and count incidents per cell, colored with a Jenks natural breaks classification. Custom UI buttons let users toggle each layer on and off, with active states highlighted. The code also shows how to filter invalid geometries and style layers dynamically.

Apr 11, 2018

Loading thumbnail…

iSchool GeoVisualization Workshop

This visualization maps motor-vehicle crash locations in New York City, colored by crash type (injury, fatality, etc.), using a dark Mapbox basemap. It shows clustered point data to reveal geographic patterns of crash severity. The code uses Mapbox GL JS with D3.js v3 to load GeoJSON data from a GitHub repository, create a clustered circle layer, and apply categorical color mapping with radius scaling. The map includes navigation controls and a zoom-dependent radius transition.

Apr 11, 2018

Loading thumbnail…

iSchool GeoVisualization Workshop

This example shows a blank dark-themed Mapbox map centered on New York City, with no visible data layers or points of interest. The visualization is a workshop template, so the map is intentionally empty, waiting for users to add their own geographic data. It loads a Mapbox GL map with a navigation control, using Mapbox’s dark style and an access token for tile access. The code references a local GeoJSON dataset of NYC crashes as a remote URL, but the data is not yet drawn on the map, making this a starting point for hands-on geovisualization exercises.

Apr 11, 2018

Loading thumbnail…

post-google-forms-nodejs

This example demonstrates how to submit form data directly to a Google Form using Node.js, bypassing the need for a browser interface. It shows a programmatic POST request that populates a form with fields such as size, email, delivery method, and address. The code uses the `superagent` library to send URL-encoded form data to the `/formResponse` endpoint of Google Forms. It explicitly maps each form field’s entry ID, like `entry.1721541334`, and includes both regular and "other" response options. The script logs the server response or any errors encountered during submission.

Sep 6, 2017

Loading thumbnail…

Gist 842ac39b24599fe93d18a0c536f0ea69

This example demonstrates a Node.js script that sends a base64-encoded image file to the TrueFace API’s face-detection endpoint, then logs the returned JSON response. It reads a local JPEG, converts it to base64, and posts it via the `superagent` HTTP client with `superagent-bluebird-promise` for promise support. The request uses the `x-api-key` header for authentication and targets `https://api.chui.ai/v1/facedetect`. The visualization shows the raw API output, not a graphical chart, highlighting a simple request–response workflow.

Aug 24, 2017

Loading thumbnail…

NodeJS GAE Issue Reproduction

This example visualizes the runtime configuration of a Node.js application deployed to Google App Engine, specifically highlighting the `app.yaml` file that defines the service named "hello." The visualization shows the exact YAML structure, including the `runtime: nodejs` setting, the `vm: true` flag, and the `automatic_scaling` block with `min_num_instances: 1`. The code renders the YAML as raw text without parsing or using any data-visualization library, instead relying on plain text display to show the configuration details. The rendering approach mirrors the raw file content, making the deployment settings directly visible. The visualization does not employ any external APIs or JavaScript libraries, as it presents the configuration file verbatim.

Sep 30, 2016

Loading thumbnail…

NodeJS GAE Issue Reproduction

This example shows a Node.js application configured for deployment on Google App Engine, with a focus on reproducing an issue across multiple microservices. It demonstrates how the project orchestrates separate services—such as a gateway, user service, and add-message service—using npm scripts that set environment variables and ports. The code relies on Express for routing, Babel for ES2015 transpilation, and PM2 for process management, while testing uses Mocha, Chai, and Supertest. The visualization highlights the deployment and development workflow, showing how build commands and service-specific start scripts manage the multi-service architecture.

Sep 30, 2016

Loading thumbnail…

Supporting Bangkok Bank's BBL iPay in Android

This example shows an Android Activity that integrates Bangkok Bank's BBL iPay mobile payment service into a native app. It demonstrates how to launch a WebView-based payment flow, passing merchant credentials, order details, and currency codes via POST data. The code uses `android.webkit.WebView`, `WebViewClient`, and `WebChromeClient` to intercept redirects to success, fail, and cancel URLs, returning corresponding result codes. It constructs form fields manually and calls `postUrl()` to submit them, relying on the bank's hosted payment page.

Aug 1, 2016