Data & Design Coordinator @ A2DataDive

New Ann Arbor Area Community Foundation Grants (AAACF) Visualization

AAACF dashboard

The Ann Arbor Area Community Foundation has data on grant donors and the distribution of grants funded throughout Ann Arbor. We partnered with AAACF over several months to set up a data management plan and prep their data in time for the DataDive weekend. The visualization created was co-created with AAACF to help them understand their funding acquisition, distribution, and impact.

Accomplishments

  • Successfully coordinated a weekend-long DataDive with over 100 volunteers and 4 partner organizations
  • Directly lead event planning team to offer concurrent workshops and hackathon
  • Designed and developed data visualization, selecting technology stack
  • Matched custom HTML and CSS with partner organization's brand identity

Skills & Tools Mastered

Front-End Design & Development

HTML, CSS, JavaScript (jQuery, JSON, leaflet.js map library), CSV parsing and JSON schema

Data Strategy

Data assessment and project goal setting, Data management lifecycle, data cleaning and analysis, data workshops for beginners

My Role

During the A2DataDive, I performed a data interview with an AAACF representative as a way to understand her project goals. I unpacked her data needs and transformed these ideas into product requirements. This including presenting the representative with quick sketches of various dashboard styles that presented the data in various dimensions: spatial, temporal, and categorical.

In-Depth: Data Consultation


Data Assessment

Data goal setting diagram

Following the above data goal setting worksheet, my team worked with our partner organization to perform an on-site data assessment. Afterwards, we determined appropriate research questions that could be answered given our partner's existing data. These are the research questions:

  • How can the AAACF tell its grant-making story to the community?
  • How have AAACF grants been distributed over the past 20 years?
  • How have these grants affected the community?
Over several weeks, our data ambassadors met with the client to do more immersive observations while compiling data that addressed these questions. By the start of the DataDive weekend, the client and my team had a good understanding of the available data and how designing a grant-impact dashboard would be used to further our client's business needs.


Front-End Development

As a team, we decided to visualize AAACF's data onto a map, showing distribution of grants by zip codes, filtered by time and 'field of interest.' Our team graphic designer compiled the sketches into a final front-end visual design, including following the color scheme already employed by the AAACF brochures and logo for a more branded look. I worked with another volunteer to develop the visualization.

I provided the initial set of JavaScript libraries that we would end up using for the development of the dashboard. This including introducing the team to jQuery.js, d3.js, SHPE files for the map, and JSON for the data. As we continued with our process, we included leaflet.js, jQuery-ui.js, and nvd3.js

Once we started development, I wrote helper functions in JavaScript that would perform the calculations and filtering of the JSON grant information data (as converted from the original .csv format). I also wrote the HTML and CSS required for the 'field of interest' filters, along with the associated jQuery script that would trigger the data filtering process once the filter was instantiated.

The final AAACF dashboard prototype can be viewed by visiting the dashboard here. (please allow a few seconds to load)

AAACF dashboard

Other Projects