OSM Analysis Dashboard
This repo contains the code for mapbox.github.io/osm-analysis-dashboard/
OSM Analysis Dashboard
Home Page: https://mapbox.github.io/osm-analysis-dashboard/
This repo contains the code for mapbox.github.io/osm-analysis-dashboard/
@tridip1931 creating a stub issue here to discuss and go ahead with some code-cleanups
Here's how I'm thinking about it:
rollup
to have a module system we can use in this repositoryconstants
that should be configurable, like filterProperties
for eg. are in a separate file.Summarising from conversations with @jenningsanderson and @ramyaragupathy.
Stakeholders: Jennings, Ramya, Mapbox Data Team
Data
Coverage: 80 priority cities to start with.
Tilesets with contain historical edit counts, count of users, individuals assets added and readiness metrics.
Interface
The dashboard should ideally allow
cc: @jenningsanderson @ramyaragupathy @rasagy @maning
+cc: @ramyaragupathy
Forking the conversation around documenting the project/opening the repo from here.
From what Iโm seeing, this code is only front-end code (tilesets are read-only). I see no harm in making this public so others can understand how to build a project like this. It would also enable us to document the project in the Readme/wiki here.
@batpad Based on the #9 (comment) I think both Jennings & Ramya would prefer to make this repo open and document the project using wiki/Readme. Want to go ahead and make it open?
Per discussion today listing down items, in order of importance, that needs to be shipped for the SOTM Asia presentation:
filter
to Compare Quarters
Is there a way for the javascript to figure out optimum stop values for colour changes for each property dynamically on the fly on the front-end, or should we statically define these in a constant?
How complex does this need to be? Do we have different stops for different property values as well as for different years? Or just define stops based on property and they remain constant through years.
Proposal for data structure to define details per property value that can be filtered on:
{
'editCount': {
'label': 'Total Edit Count',
'stops': [0, 100, 500, 1500, 2500, 8000, 15000]
},
'editedBuildings': {
'label': 'Total Buildings Edited',
'stops': [0, 80, 250, 500, 1000, 5000, 10000]
}
}
I'm assuming we'd use a constant colour scale for each - if we want different properties to have different colours, ^ would change a bit.
Also, do we need to have stops per zoom level? In that case, the complexity of this will increase slightly.
Once we have this in place, I see a lot of other things on the front-end flowing from how we define the above data structure.
I'll keep an updated list here of tilesets that are available:
First Tileset: https://www.mapbox.com/studio/tilesets/jenningsanderson.agged1/
Am trying to use this tileset: https://www.mapbox.com/studio/tilesets/jenningsanderson.2010-Q1-agg/
Firstly, I see that the properties defined for the z15
layer and the other layers are different. Is this expected / intended? Also some of the property types are different. If this is intended, we will need to figure out how this fits into our property definitions: #4
Although, even when choosing a property type that seems to exist consistently across layers, I'm still not seeing the z15 tiles show up on the map, working off this branch: https://github.com/mapbox/osm-analysis-dashboard/blob/mockup-compare/mockup/script.js
Dropping this issue here while I debug - but if there's anything obvious that comes to mind @jenningsanderson, please do let know.
Slider gets stuck sometimes. This error does not happen as often as to reproduce it everytime.
I believe this is something to do when dragging using touchpad, with mouse there seems to be no issue. I am not sure.
I have created this issue to flag it out.
For Edited Objects, this area around Hayward label has tiles with value>2000 show up the same color as value=600, but a tile above with value=1815 shows up darker.
@jenningsanderson Any idea why this might be the case? Looking at the opacity, it seems to be that there might be multiple tiles in the same location (overlapping).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.