OSM Tag Frequency Counter for UI Color Analysis#1432
Closed
chinweibegbu wants to merge 8 commits intofacebook:mainfrom
Closed
OSM Tag Frequency Counter for UI Color Analysis#1432chinweibegbu wants to merge 8 commits intofacebook:mainfrom
chinweibegbu wants to merge 8 commits intofacebook:mainfrom
Conversation
Add default and example color scheme objects to colors.json. Minify colors.json in build_data.js. Add colors.json to DataLoaderSystem's fileMap. Add color scheme helper functions to StyleSytem, with comments to describe each functions parameters and return values (where applicable). Update StyleSystem's styleMatch() function to interact with color scheme objects from colors.json rather than from STYLE_DECLARATIONS. Fix white space discrepancies in StyleSystem. Update color_selection.js and colorblind_mode_options.js to use StyleSystem rather than the non-existent ColorSystem. Uncomment color schemes and colorblind mode options sections in preferences.js to add them to the Preferences pane of the UI. Refs: Issue facebook#1230
Rename example color scheme to high_contrast to reflect its functionality in colors.json Update core.yaml to match the renamed example color scheme Reduce boilerplate code and comments relating to color scheme handling in StyleSystem.js Add missing semicolon in build_data.js to facilitate formatting consistency Refs: Issue facebook#1230
Add debugging code in to allow programmer count the tags (OSM keys and values) which are rendered for a particular map zoom, latitude and longitude.
Add default and example color scheme objects to colors.json. Minify colors.json in build_data.js. Add colors.json to DataLoaderSystem's fileMap. Add color scheme helper functions to StyleSytem, with comments to describe each functions parameters and return values (where applicable). Update StyleSystem's styleMatch() function to interact with color scheme objects from colors.json rather than from STYLE_DECLARATIONS. Fix white space discrepancies in StyleSystem. Update color_selection.js and colorblind_mode_options.js to use StyleSystem rather than the non-existent ColorSystem. Uncomment color schemes and colorblind mode options sections in preferences.js to add them to the Preferences pane of the UI. Refs: Issue facebook#1230
Add debugging code in to allow programmer count the tags (OSM keys and values) which are rendered for a particular map zoom, latitude and longitude.
Contributor
|
This is really interesting work, but I don't know what to do with it right now. Thanks! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
OSM Tag Frequency Counter for UI Color Analysis
TL;DR
I used empirical analysis to identify the most relevant colors on the map for the purpose of creating colorblind-friendly map color schemes.
Overview
In order to create data-informed colorblind-friendly color schemes for the map, I measured the frequency of OSM tags rendered within a specific map extent.
This PR includes code incorporated from #1365. However, the main contribution of this PR is the chunk of code in
/modules/pixi/PixiLayerOsm.jswhich does the OSM tag counting. This code was instrumental in #1384, specifically in the creation of three (3) colorblind-friendly color schemes.NOTE: For the most part, this conversation is going to be held independent of the color system proposed in #1384
Thought Process Summary
Rapid has 39 distinct HEX colors referenced in
/modules/core/StyleSystem.jsand/data/colors.js. The aim is create colorblind-friendly color schemes in which:One approach to this would be to create new color schemes which replace all 39 colors while ensuring the two conditions listed above.
A much simpler approach would be to focus on 5-10 colors which are most relevant to a colorblind user. That is what this PR addresses. The core question being asked is:
Approaches
This section covers three potential approaches to answering the question above. Approaches no. 1 and no. 2 were attempted in the course of this PR. Approach no. 3 was not attempted due to the amount of resources and time it would require.
These approaches are NOT conclusive (hence the ISSUEs highlighted) and can be built upon further.
Approach no. 1
"How many times is each color referred to in the StyleSystem.js file?"
PROCESS: Use the file search function in whatever file editor being used
ISSUE: Does not account for how often that specific definition is rendered on the map e.g.
redis only referred to once inStyleSystem.jsbut the feature that uses it (building) occurs the most on the map (specific to the evaluation map location)Approach no. 2
Builds on Approach no. 1 by asking: "How many times is each OSM tag and value RENDERED?"
PROCESS: Programmatically count during the
render()function call in/modules/pixi/PixiLayerOsm.jsand print the results in consoleISSUE: Does not account for how features change across the map with changes in location and zoom level. >>> NOTE: One cannot evaluate the entire map at once because Render only renders the features (areas/polygons, lines and points) at a certain zoom level
Approach no. 3
Builds on Approach no. 2 by asking: "How many times is each OSM tag and value rendered ACROSS THE ENTIRE MAP?"
PROCESS: Move across the map in tiles/extents at every possible zoom and evaluate at every possible location >> Very rigorous, very time-consuming
ISSUE: Does not account for the relative size of the feature being rendered e.g.
buildingis the OSM tag rendered the most BUT features likehighwayget rendered a lot bigger and take up more visual spaceResults and Implications
This section is based on the data gathered in Approach no. 2. The frequency counter code chunk is dependent on the
entitiesrendered in the current map extent (as specified in the URL used).Research Context and Results
map=15.53/6.6005/3.3352STYLE_SELECTORS(osmkey and osmvalue), how many times each osmvalue was loaded, its assignedstyleID, the color definitions attached to saidstyleIDand previews of the defined colors (MOST IMPORTANT !!)STYLE_DECLARATIONSin which it is used and how many times it is usedResearch Implications
Based on the data gathered, I identified the 4 or 5 most frequently-used colors which heavily impacted accessibility. These identifications were further backed by visual confirmation using the colorblind emulators incorporated from #1365.
Once these colors were identified, the initial question - "How does one identify the most relevant colors on the map?" - was considered answered. You can check out the
/data/color_schemes.jsonfile in #1384 to see how these identified colors were redefined.