Comments (3)
@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.
from mapstory.
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).
from mapstory.
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.
from mapstory.
Related Issues (20)
- Integrate and test iVideo in StoryPins on UC HOT 1
- Upload GetStarted videos and copy to UC Ops HOT 1
- Remove Links to `Create Layer` Modal
- Fullscreen button on Layer Detail Page does not work.
- When Editing Frames, Can cause "white out"
- Deploy 2.1.1 to MapStory Prod
- Close unneeded deployments
- Shut down Whitelabel Anytime After March 9th HOT 1
- GEOINT Services DevOps Pipeline Failure HOT 1
- Limit pathname to restricted directory
- Remove hyperlink in VTC text HOT 1
- Museum mode not auto-playing next chapter
- GeoNode GNIP for contributing orgs and initiatives
- Enable story thumbnails that reflect styling in the story
- Update wiki link in footer HOT 1
- Composer tour uses 'StoryScapes' on MapStory
- New account creation generates error page HOT 1
- Logging into MapStory longer time than usual HOT 1
- Adding layer to Initiative Page fails to add proper URL form (breaks layer) HOT 1
- Mapstory.org does not load
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mapstory.