Fork me on GitHub

Project Team #2: Beekeeping, DS 4200 S20

Hari Muralikrishnan, Matthew Martin, Joshua Myles, Sindhu Majeti

Service-Learning Course Project as part of DS 4200: Information Presentation and Visualization, taught by Prof. Dylan Cashman, Data Visualization @ Khoury, Northeastern University.

Motivation

Summary of user needs and motivating questions.

This project is being designed for the use of our service learning partner, the Urban Beekeeping Laboratory. They have provided us with data spanning almost the past decade on records that summarize bee, brood, and honey counts for all their hives in the New England area, primarily for Massachusetts. The questions we agreed to pursue included: (1) What are the geographic hotspots for bee upkeep and production, otherwise known as “blue zones”? (2) How does the distribution of blue zones over Massachusetts change over time? (3) As time passed, has the laboratory been successful in increasing the amount of blue zones? (4) How do blue zones for bees compare to the best spots for brood and honey production? The primary goals behind answering these questions was to create a visualization that could showcase the distribution of bee/brood/honey density for each region of Massachusetts for all the years of data available. With this, the Urban Beekeeping Laboratory will have better tool to analyze their work this past decade and decide on next steps to take, specifically on where to focus their future efforts on to efficiently allocate their time and resources. Another motivation for this project is that it can be published on their webpage to attract external parties to fund their projects or simply highlight their work to the local communities of Massachusetts to encourage more help with their commendable efforts.

Visualization

Include the interactive visualization as part of this page. Static example follows.

Map of Massachussetts

Threshold Slider

Demo Video

Visualization explanation

Here are the screenshots of our final sketch followed by those our final visualization that fulfill our initial vision:

We chose this design because we believe that it solves all the tasks we originally set out to accomplish, each to the highest extent possible. On the top left of our visual is a choropleth, which is a map with color encodings that visualize the level of hive health, and it solves our task of “examining blue zones geographically”. On the top right of our visual is a table, and it contains the explicit data records in full. Below the map is a selector for which type of health we want the map to focus on: bee, brood, or honey. Below that is another key aspect to our visualization, the time slider. As you move that slider to the right, it represents the passage of time, and the map and table change according to what time period the user chooses to focus on. This solves our task of “interactively showing changes over time”. Below this slider is another one that represents the minimum threshold the user expects the shown data to meet. To be more specific, a user could only want to view regions with only the best hive health, in which case the slider would be pushed towards the right edge. This slider will solve the task of “choosing location for hive based on hotspot data”. In terms of UI, the impressive feature of our visualization is that it incorporates linking between every single slider and view, and additional linking through a brushing feature between the map and the table. This means that if a user holds down their mouse and moves across regions on the map, hives on the table located in those regions will highlight as well. On the other side, if the user holds down their mouse and selects a few rows from the table, the map will highlight the regions that the bee hives in those rows belong in. Additionally, linking between all of the pieces means that the map and table only show the user the data corresponding to the current time period and threshold as per the states of the sliders. Ultimately, the entire visualization is easy to use and understandable through our thoughtful choices in coming to this final design.

Data Analysis

Summary of data, data types, and data preprocessing.

Task Analysis

Summary of task table.(Go to end of Google Doc to see Task Analysis table)

Design Process

Sketches and design choices to justify final visualization.

Conclusion

Short summary of work completed and areas for improvement/future-work.

This project was made with the efforts of DS4200 students to help a local service-learning partner, the Urban Bee Laboratory. Our team spent a semester working with the lab to identify their needs, brainstorming ideas for how to fulfill them using the content we learned in class, and scrutinizingly choosing the most comprehensive design to accomplish the tasks that best serve those needs. To be specific, we saw how the lab had data on their geographical presence in Massachusetts focused around various aspects of hive health. We heard their desire to solve the question of “where” they have succeeded in the past and where they should direct their next efforts. We learned about the process of designing complete visualizations in class, from theoretically employing the best visual encodings in certain situations to practically programming them in JavaScript using the D3 library. Ultimately, our implementation in this webpage provides the lab with a thorough exploration tool to (1) examining blue zones geographically, (2) interactively showing changes over time, and (3) choosing location for hives based on hotspot data. In the future, we hope that this page can be integrated into the lab’s direct website so that they can publicize their work to external partners and receive additional funding to continue the great work they are doing. If we had more time to work on this visualization, our team would focus on adding more functionality to the map view, perhaps by allowing for a panning feature once a user zooms into it. Our visualization allows for excellent exploration,so an additional feature we would like to incorporate could be views that center around analysis of the data we are displaying. This would make our tool even more robust. Nevertheless, with just the work we have completed so far, it was a pleasure to serve our local community as well as cement our skills in programmatically producing visualizations, encompassing all that we have learned in DS4200 this past semester.

Acknowledgments

List here where any code, packages/libraries, text, images, designs, etc. that you leverage come from.

Used to help create table for data:
https://codepen.io/anon/pen/rrLVpv?editors=0010

Used to help generate map of Massachusetts:
http://techslides.com/mapping-town-boundaries-with-d3
https://bl.ocks.org/Andrew-Reid/4f3e3cdf708036ed076075b937357826

Used to get TopoJson data files for map: http://techslides.com/demos/d3/us/data/ma.topo.json https://github.com/OpenDataDE/State-zip-code-GeoJSON/blob/master/ma_massachusetts_zip_codes_geo.min.json

Used to develop date slider: https://bl.ocks.org/johnwalley/e1d256b81e51da68f7feb632a53c3518

Used to develop threshold slider: https://bl.ocks.org/officeofjane/b3f6a4f89a54fb193265b5c05659e17b

Chloropleth Map: https://bl.ocks.org/wboykinm/dbbe50d1023f90d4e241712395c27fb3

Tooltip: https://bl.ocks.org/tiffylou/88f58da4599c9b95232f5c89a6321992

Button for Context/Instructions: https://www.w3schools.com/howto/howto_css_modals.asp