Comments (16)
Handouts from the session:
UserProfiles.pdf
interesting-data-sources.pdf
ProjectSummaryAgenda.pdf
from housing-insights.
I found it very difficult to think like anything but a tenant/affordable housing advocate so I started out with what I thought I would want if I could get it. I would want two main pages, one at the level of area and one at the level of building or unit.
page 1 advocate_BM.pdf
Ok I re-thought this first attempt. As in the example given in mockup, we should be able to have more comparison on the first main page but still allow a user to focus on a Ward or Neighborhood. Advocates will still want to be able to ask for info on a particular building or unit without necessarily knowing the Neighbourhood it is in and I am struggling with a clean way to make that available on the first page.
from housing-insights.
Here's several different ideas for different sections or views of the tool that I came up with:
from housing-insights.
I think this visualization by Harlan Harris is great. I shows how rents in stabilized units can rise quickly even with a low cap on increases for sitting tenants due to high turnover and vacancy increases
https://harlanh.shinyapps.io/rent-stabilization-policy-viz/
from housing-insights.
Interesting links to check out:
-
http://www.crimeinchicago.org/ - interesting navigation technique - showing a bar graph by Ward, clicking a bar brings up a heatmap of that selection in the 'compare' section below. Clicking the resulting Ward name reveals a nice preview, and then all details takes you to an in depth ward page. Nice clean visual based navigation.
-
http://nhumphrey.com/projects/myersbriggs-visualizer/ - the only thing I wanted to point out about this one is how the transitions work from one section to the next. Each dot represents a person, there are 4 pairs of categories (e.g. E vs I then N vs F). Moving from category to category uses color change and rearranging the dots to show which people in category 2 came from which spot in category 1. Could use this in resorting our buildings.
DC Office of Zoning - they just released a bunch of new stuff, great examples to draw from:
- http://dcgis.maps.arcgis.com/apps/MapJournal/index.html?appid=ae5830535a384a7f9ae40527f607b32e - uses left pane scroll to repaint a right pane map. Illustrative pictures help contextualize definitions (e.g. residential zones vs. residential flat)
- http://dcoz.dc.gov/onlineservices/changemap.shtm - left/right slider reveals the difference between old and new. Maybe we can do something similar to show neighborhood change? e.g. change in demographics, income, relative rent levels, etc.
DCPS budgets - previous Code for DC project. Top of page has toggles to filter by ward and other criteria. Especially like how the line graphs work if you toggle the 'graphs' view instead of the 'table' view. http://dcpsbudget.ourdcschools.org/
from housing-insights.
A very similar tool to the purpose we are trying to build:
http://coredata.nyc/
from housing-insights.
Another idea, this one for visualizing neighborhood/ward trends across lots of metrics (demographics, rent, etc.)
from housing-insights.
Inspirational example from @kelshew: basic overlay of point-based data (schools) over neighborhood heatmap (income). Could be a simple view that we could replicate for buildings as points. Key design component I think is important is the classification of the point-based data (here above/below average performance).
from housing-insights.
http://cps.edu/ScriptLibrary/Map-SchoolLocator/index.html
This was created to help Chicago parents compare Chicago's public schools!
Without entering anything into the search field, click the magnifying glass. This will trigger a drop down with all the schools.
You can then filter this list of schools by grade level, rating, or type of school.
You can also click the checkbox next to any of the school names to add the school to a running log at the bottom of the screen that compares the schools on select indicators (# of students, rating, standardized test scores, etc.)
Next! Click on any school name β> click the βmore infoβ button β> opens up a new page with a smorgasbord of information. This information is then organized into five tabs. Each tab has a "quick glance" section and then more details below.
I like a lot of things about this example!
- the ability to filter schools
- the ability to select schools to compare
- the blend of micro and macro level views (individual schools as well as map)
- how data is displayed in summary and detail form
from housing-insights.
On the schools topic, here's another one from @cmgiven:
http://atriskfunds.ourdcschools.org/
Noteable design elements:
-'Macro' level can yield insights by filtering (although might be better for our purposes if toggling between categories was easier, such as by using color, to show comparison between groups)
-Clean integrated micro level view by hovering and selecting dots.
from housing-insights.
NY Times visualization of the US budget:
http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html?_r=0
Notable design elements:
- Threshold-based color coding (based on % increase/cut) is useful view
- Sizing bubbles emphasizes trends between large/small categories and shows which ones are most important.
-Toggling between views animates the bubbles to split into categories, e.g. mandatory vs. discretionary, connecting different views to each other.
And, a presentation (where I found this link) talking about making force directed graphs in D3: http://vallandingham.me/abusing_the_force.html
from housing-insights.
Here are some rather rough sketches of big-picture elements for each scenario.
Policy advocate #1
Policy advocate #2
Policymaker #1
Tenant advocate #1
Tenant advocate #2
from housing-insights.
http://tipstrategies.com/interactive/2014_map/
I like using a draggable slider to dynamically show changes over time. The animation when you click the play button is nice, too, but may be more useful for a policy group presentation than an advocate looking for information.
The attractive thing about a slider like this is that it can easily pair with other visuals. This sketch isn't necessarily how I think the design should look, but illustrates how we can use one variable to simultaneously change multiple displays. (Sorry about the orientation; GitHub's rotating this in the preview for some reason.)
from housing-insights.
Danilo from DHCD provided this link as another example tool, this one being affordable housing focused:
"Here is another tool that might provide some good or bad examples of how to treat these data."
https://egis.hud.gov/cart/#
from housing-insights.
Also see #46
from housing-insights.
Closing this ticket! I've added all the design ideas to the /mockups folder in the repository for ease of browsing. Sticky-dot voted drawings will be added there as well.
from housing-insights.
Related Issues (20)
- Convert welcome modal to Bootstrap or fix semantic ui sizing issue HOT 1
- Refactor `_populate_zone_facts` to be cleaner
- Calculate percent subsidized by zone
- Add lat/lon to geocode from mar cleaner step
- Populate 'in_prescat', 'in_dhcd', 'in_dchousing' fields
- Troubleshoot why 'Most Recent REAC date' and 'most recent TOPA date' sliders are bunched up on load HOT 1
- Dedupe address match failing due to integer MAR IDs HOT 1
- Add all project fields to the filter api endpoint
- User Feedback? HOT 2
- Persist missing address id in create_project_subsidy_csv() when returned from mar api call
- test_load_data.py failing due to refactored _populate_zone_facts HOT 1
- Bug in Range Breakdown Displayed (Zone Type: Census Tract && Data Choices: Crime Rate: Violent 12 months) HOT 1
- Inaccurate residential_units counts for at least three census tracts HOT 2
- DHCD addresses not found in MAR HOT 2
- Data retry now prevents null lat/lon project view pages from loading HOT 2
- Preservation Catalog November 2017 update HOT 1
- Front-end refactor master issue
- Track client-side JavaScript errors Rollbar.js HOT 6
- Back-end refactor and data validation master issue
- Possible Data or Import issue (Chastleton)
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 housing-insights.