Stylized UI for filtering by project type

[ohsk]

See #23 for previous explorations.

Other references:
http://tympanus.net/Development/SelectInspiration/index2.html

[ohsk]

@buzoherbert I've been brainstorming about the filter by project type. I kind of want to take it in a very different direction than we've been talking about so far. Initial mockup is below.

So the basic idea is to present the distribution of project types visually with a bar, subdivided based on the project cost by each type. Then, the user could mouse over that bar and see the amounts for specific project types while also getting a sense of where that Kelurahan is budgeting by each type. The bar acts as the filter mechanism itself.

Phase	Exhibit
Kelurahan selected
Mouseover
Project type selected from bar

I think it also helps with the fact that not every Kelurahan has each project type. It's kind of annoying to filter by a project type and not see anything just because none of those exist for that Kelurahan. This way, you are really only interacting with the project types present.

Do you think this is doable??

[ohsk]

(Inspired by this NYT project)

[buzoherbert]

Hey!
Yeah, that's totally doable with our database. So, on click on any of the colors you would see the list of projects of that kind?

It's a very good idea. Maybe we can implement something like that for other info, like ghost projects.

I just wonder how well will it work when there's a huge difference between the butgets on one subcategory versus another one...

[ohsk]

Yeah, that's a good point when there's a huge difference. I'd say let's try it and see how things look! Maybe we'd have to have a minimum width (1px) for any color bar or something...the NYT's version seems to work well even with really small values:

And yeah, I think we could add a filter right above or below that allows you to (de)select ghost vs. voted projects, like on this Urban Institute map:

So something like:

Project Origin
All	Voted	Ghost

Project Status
All	Completed	Incomplete