Visual Field  

Explore, Process and Visualize your data right in your browser.

Download

Current Version (2.0.0) vf.html (720Kb, 137Kb gzipped)

integrity="sha384-Ld5rtVWf4tthw3R1xDmCIbnaFulG+E1c9DzgZn/YVPqPGx8ozYj/Pw06m0mWzzBo"

Demo

  1. San Francisco Schools Map (color coded by CCSF Entity)
  2. Lead Levels in San Francisco Schools Map (with recorded level > 5 Ug/l)
  3. San Francisco Schools located within Seismic Hazard Zones Map
  4. San Francisco Crime breakdown by Category and drilldown Map (Charts with drilldown Map)
  5. ACT Cycle Crashes since 2012 (Map)
  6. NYC - Motor Vechicle Collisions - Person. (Table Visualization of large 600Mb dataset)
  7. Motor Vehicle Occupant Death Rate, by Gender, 2012, Region 2 - New York. Simple Multi-Series Line Chart Visualization

What is Visual Field

Visual Field is an Open Source single html file - vf.html. It enables you to consume and process delimited data files and web services (eg; CSV).

Change Log

Version 2.0.0 - Released May 2020
  • Added Multi-Media support - Import your Image, Audio and short Videos in to your database
  • Photo Map - view a map of your geotagged images
  • New Custom Function to allow easy resize of your images
  • New Media Visualization - easily create a context rich slide show of your media
  • Added ability to update your data directly as displayed in page in table browser, table visualization or map visualization (great for offline asset management)
  • Export Dump your tables or entire database and import directly into another HTML5 WebSQL browser with Visual Field
  • SQL Dump your tables or entire database so you can import that into a separate database (eg; PostgreSQL)
  • Filter Browse results by individual table fields
  • Updated Chart Visualizations for Time Series
  • Numerous minor bugs corrected
Version 1.0.0 - Released Dec 2019
Initial Release

Usage

Not all current browsers support HTML5 and WebSQL. And of those browsers that do, not all underlying devices support a WebSQL database when invoked as a standalone html file. The browsers currently supporting a fully WebSQL database is still somewhat fairly dynamic and changing (even as at 2019).

Optional Offline Web Configuration

The vf.html file is intended to be able to be loaded as a stand alone file (from a file:// protocol context) or served via a web server. If you do serve it via a web server, you may wish to download and add the optional vf_service_worker.js file and place it in the same directory as vf.html. This will turn your served version of Visual Field into a true Offline Web Application in that it can be reloaded and used in a browser (from a https:// protocol context) without needing internet access. Something to consider if you make presentations, or you may be an emergency worker out in the field, with unreliable internet access.

vf_service_worker.js

To demonstrate the Offline Web capability, follow this scenario;

  1. Load Example1 (using a https:// protocol context) here; Example 1 (SF schools)
  2. From the Map, press the button to select a zoom level and download some Map tiles for offline use.
  3. Disconnect your device from the internet, by going to Airplane mode or similar.
  4. Reload the above link (from Step 1) and your Map and Schools data should be presented intact.

Tutorials

  1. What is New in Version 2
  2. San Francisco Schools Map

Repo

https://github.com/harrishudson/VisualField

Author

© 2019-2020 Harris Hudson.

Donate

It has taken a significant effort to develop this application. If you find it useful in your project - consider making a donation. Donations will go directly towards continued development efforts. Whilst there remains incomplete browser support, and incomplete standards support for WebSQL, it's not really possible to provide any sort of product support but its hoped that you still find this application useful none-the-less. Thanks for your support. Donation link; PayPal

Map tiles © OpenStreetMap

Please, download your copy of Visual Field, and do not link your production web applications to the vf.html page hosted on this website.