Complete StoryLayers tab design: Styles/Masks

[glynnis]

User Story As a user composing a story I want to apply custom styles to a layer within my Mapstory (without affecting the layer itself) In order to emphasize events or places and help viewers understand the narrative of my MapStory

Acceptance Criteria

• Include Icon Commons in the styling panel
• Understand and apply logic from the current implementation of the styling panel for any styles that should be conditionally displayed based on layer type, etc.
• Represent masks (if needed separately from Legend masking?)

Deliverable Incorporate styling features into the high-fidelity mock-up for Composer MVP to facilitate discussion about technical feasibility with the team and create feature stories that further refine the design or technical tasks associated with this.

[glynnis]

@reynalddizon and I met todoay to go over logic and get me up to speed on cartographic rules for styling. Here are my notes:

The selection of styles depend on the geometry of the layer. For example:

• Points & lines - simple, unique (also called "unique classes"), choropleth, graduated (points only)
• Polygon - simple, unique, choropleth

Points

Simple

A uniform display for all the features.

• Symbol
  • Shape of the point. This is where icon commons come in.
  • First number is the symbol size
  • Color is the color of the fill
  • Second number is the transparency of the fill
  • Attribute & degrees - attribute could be any numerical column from the data, always degrees or radians. Changing the values of these dropdowns manipulates the orientation of the symbol on the map.
• Stroke
  • Style
  • Thickness
  • Color
  • Transparency
• Label
  • Attribute - all attributes in the data set are listed
  • Font size
  • Font styles (serif vs. san serif, color, bold/italic/underline, halo and shadow [not implemented in the current composer])

Unique Classes (this title will be clearer to cartographers)

Displays symbols based on unique classes in a specific attribute. For example, green dots for churches, pink dots for schools, etc.

• Classification
  • Attribute - ideally this would be for string attributes only
  • Number of rules generated for the styling - minimum 2, maximum currently 9 (we may want to up the maximum if performance allows)
  • Color palette (basic, light, dark, pastel) - all four are always present, but we may want to add additional palette options
• Symbol - same as for simple symbol section, but no color since the colors are chosen using the palette or the rules below
• Stroke - same as for simple
• Label - same as for simple
• Rules
  • Displays the cell from the attribute column
  • Allows for custom coloring to override the palette selected
  • The x allows you to remove an individual rule

Choropleth

Styling is based on the magnitude of the numerical attribute. For example, the smallest value and largest value for a certain attribute would get the extremes of the color ramp.

• Classification
  • Attribute - should be limited to selecting numerical attributes
  • Number of rules
  • Color ramp - the color palette. We should add more here like starting with blue and ending in red. There are some common palettes that we are missing that should be added (@reynalddizon will add info in the comments). Would be nice to have an option to flip the color ramp (so you can invert dark vs. light, etc.)
  • Method - how you divide the range you get from the attribute you selected
  • For example, you may have values from 0-100 with five classes. "Equal interval" would create rules from 0-20, 20-40, 60-80, etc.
  • "Natural Breaks", "Equal Interval", "Quantile" in current interface
  • Need to add "Standard Deviation", and "Pretty Breaks" are also in QGIS
• Symbol - same as for simple palette except for color (determined by the palette)
• Stroke - same as for simple
• Label - same as for simple

Graduated

Style based on the magnitude of the numerical attribute, but instead of changing the color of the feature you change the size based on the magnitude.

• Classification
  • Attributes - numerical attributes only
  • Number of rules
  • Method - should match the methods that Choropleth has
  • Min/max - the range of the symbol size. Minimum should never be less than 1. Maximum - should there be a max max (for performance?)
• Stroke - same as simple
• Label - same as simple
• Symbol
  • This needs to be added and doesn't exist in current composer
  • Should include color (only one color, no need for multiples), shape, and transparency

Heatmap

Need a general description for this. @reynalddizon will do some research for this and find out, then add to comments on this story.

Lines

Simple

Uniform styling for all the lines.

• Stroke - same as for points
  • Is this a good term for line datasets, or should we reserve the word "stroke" for when there is a symbol or fill for polygons?
• Label - same as for points
• Does not have symbol section since it's a line layer.

Unique

Difference from point layers:

• The classification rules that are generated control the color of the stroke.
• Because of this, the color selection for stroke should not appear for line layers (since the palette and rules determine it)

Graduated

Same as graduated for points, but instead of controlling symbol size this controls the line thickness. Minimum should always be ≥ 1.

Polygons

Simple

• "Fill" should be used for title (not "Symbol" as current header displays, since this is for polygon layers) - fill color, opacity
• Everything else matches Simple palette for points

Unique classes

Same as for points

Choropleth

Same as for points

Graduated

No graduated for polygons.

Things to determine for new mockup/design

• New graphics needed to represent styling options.
• How can we better represent how many styling options are available so that the user can tell how many options there are (i.e. what's a better UX/UI than a carousel)?
• @reynalddizon will look into heat maps and rules/logic for them.
• @reynalddizon will look into palettes we are missing for Choropleth color ramps.

[glynnis]

Attribute Masking

• Lat and long are automatically generated based on where a point is placed (for point layers)

• date_xd is also automatically generated

• fid might also be a special case (read only, shouldn't allow for edits?) These auto-generated ones are important for the back end and shouldn't offer attribute masking.

• Clicking on a feature in Composer should show a tooltip with attribute information.

• Current state: the tooltip should persist even if the mouse moves so that a user can interact with the attribute data in proximity to the feature (right now the icons are, respectively: edit data from a table, edit the geometry/move the feature, remove the feature from the layer). All of these features edit the data on the StoryLayer, and don't need to be included in the Composer redesign if layer editing is done from a separate UI.

For attribute masking in the new Composer:

• Unique, choropleth, and graduated styling needs to indicate the attribute name or column in the legend. For example, when unique styling is applied to a layer, that styling is based on one particular column in the data, but currently the legend only shows the layer title or mask, not the attribute.

In the above screenshot, "AAAH" is the layer name, but the attribute column that the unique styles are applied to is not listed anywhere in the legend.

The name of the attribute column should by default appear in the legend with the layer name (which can be determined by what attribute a user chooses for styling). Then, a user should be able to apply a mask to both the layer name (this functionality exists in the current composer) AND the attribute name as it appears in the legend (new functionality).

[glynnis]

After meeting with @davisc and @jonpmarino today about priorities, it was decided that this might be a story for @reynalddizon to tackle in the future. If I have time before my last day to get to this I can start, but it's lower priority than some other stories.