FishSET-Map-Viewer

Simple Description

Using the Map

• Dropdown Menus

        The three dropdown menus on the left panel control which
        (a) the grid used
        (b) variable is coloring the lines showns and
        (c) the method for sumarizing the variable by grid.

        The legend for each dropdown menu is dependant on the choices in the dropdowns and the colors are changed on the map and the lower graphs accordingly.
        The second dropdown (b) controls the lines on the graph and the scatter plot.  For numneric data, values will be groupd into 5 colors.  For categorical data, 12 colors are avialable and will repeat if the set of values is  greater then 12.  Also, the legend will scroll to show all categories.  The legend may be cliped after approx 100 categories ( issue to be fixed).
        The third dropdown (c) controls the bar graph and the grid.  The check toggle allows for the color of this aggregation to be toggled on the graph.
        

• Lower Bar Graph

        The bar graph shows the spatial data (from (c) ) aggregated by the choice (c) by zone where the zone is shown on the x acis and the aggregated value on the y axis

        

• Lower Scatter Graph

        The scatter graph shows the spatial data (from (b) ) by time.  The x axis shows the temporal variable ( currently the first one in the list of temporal variables).  The y axis shows the value of the choice from dropdown (b).  For categorical values, the y-axis may be come crowded ( issue to be resolved)

        

• Hover Options
Hovering over the linear or point features will bring up the row-wise data associated with the specific line, and shown as a JSON in the right panel. The line will become larger and darker for identification. The associated point in the bottom scatter graph will also be enlarged.
• Mouse Click
Clicking on individual zones will bring up a popup with any information associated with the properties of the polygon in the GeoJson which was used to create the grid.

Set Up

• Download or clone this project into a new directory "./newDir"
• Create necessary data files, "Gridded Date File,"CSV Data File", "Config File"
• Copy files into your folder "./newDir"
• cd "./newDir" and start a localhost

Data Files

Two generated data files are expected and one configuration file

• Gridded Data Files
This GeoJson file contains the grid that will be drawn on the map and used for spatial summaries of the data. GeoJson files can be created from shapefiles if needed. The GeoJson must contain a minimum of the coordinates that make up the polygons and at least one property value that gives that polygon a unique Identifier. That property value will be used to link the data in the CSV data file. Other properties may be in the GeoJson for informational purposes. The filename will be stored in the map_config.json as "grid_file"
• CSV Data File
The CSV data file contains columns of variable where each row of data in unique. Column variables may consist of numeric ( including temporal) or categorical data. One column variable included must contain the ID to the polygon that row of data is associated with in the Gridded Data File. The name does not need to be the same as it will need to be listed in the configuration file. The filename for this CSV file should be datafile.csv. If you would like to change this, you can have the filename directly in the index.html file but unless necessary just use a file with the standard name. Temporal data should be in yyyy-mm-dd HH:MM:SS ( ex 20-02-30 15:12:01) ( issue: make this configurable) A single row of data is assumed to be at the "haul" level where the combination of location, time and fishing info are unique to the row and there are not repeating locations in the file.

Configuration File

The configurations file, map_config.js is a JSON of variables and filesnames necessary for the map to run. Currently you can either plot single point fishing data OR linear fishing data.

• mapbox_token - The is a private token that allow usage of the Mapbox base layers. Go to Mapbox and create a free account for a token
• choosen_scatter - the name of the variable in the csv file that
• numeric_vars - a list of string varaibale ["","",""], which name all variables in the csv file that you would like to include for analysis on the map and are considered numeric
• id_vars - a list of string varaibale ["","",""], which name all variables in the csv file that you would like to include for analysis on the map and are considered categorical variables or strings
To show point data include:
• longitude_pt - the name of the variable in csv file that identifies the longitude ( decimal degrees) of the point to plot
• latitude_pt - the name of the variable in csv file that identifies the latitude ( decimal degrees) of the point to plot
To plot linear fishing features:
• longitude_start - the name of the variable in csv file that identifies the starting longitude ( decimal degrees) of the line to plot
• latitude_start - the name of the variable in csv file that identifies the starting latitude ( decimal degrees) of the line to plot
• longitude_end - the name of the variable in csv file that identifies the ending longitude ( decimal degrees) of the line to plot
• latitude-end - the name of the variable in csv file that identifies the ending latitude ( decimal degrees) of the line to plot
• uniqueID - the name of the variable in the CSV file that identifies a unique identification ( decimal degrees) to the row of the data. Essentially a row identifier
• multi_grid - this is an object that contains a list of the grids available
  • mapfile - the name of the geojson file that contains the geographic infrmation associate to the gridfile
  • area_variable_column - the name of the variable in the csv data file that gives the unique ID associated to the polygon that data value is associated to
  • area_variable_map - the name of the property in the GeoJson file that identifies the polygon to cross reference to the CSV file

        
        {
            "mapbox_token":"fakeTokenID",
            "choosen_scatter":  "HAUL_FISHNAME1",
            "numeric_vars" :["HAUL_FISHNAME1","HAUL_FISHNAME2","HAUL_LBS_OTHER_LBS"],
            "temporal_vars":["DATE_FISHING_BEGAN","DATE_LANDED"],
            "id_vars": ["GEAR_TYPE","PERFORMANCE"],
            "longitude_start":"START_LON",
            "latitude_start":"START_LAT",
            "longitude_end":"END_LON",
            "latitude_end":"END_LAT",
            "uniqueID":"uniqueID",
            "multi_grid":[
                {"mapfile":"nmfs_manage_simple.geojson",
                  "area_variable_map":"NMFS_AREA",
                 "area_variable_column":"NMFS_AREA"}
                    ]
            }
        
        

Turning on a localhost

You will need to create a localhost to serve the Javascript files. This can be accomplised a number of ways. Here are two ways depending on if you have R or python on your computer

• using python3 and above, at the command line in the directory of choice

           python -m http.server 
          

• using R: go to https://github.com/yihui/servr

        
            install.packages('servr')

            //in an interactive R session:
            servr::httd()

            //or at the cmd line

             Rscript -e 'servr::httd()' -b
        
        

• for RStudio

            to ensure that a browser is opened outside of RStudio:
        
             browseURL(servr::httd(browser = FALSE)$url)