Inspiration
Some of the higher-ups wanted more data on the activity level of my university's computer repair center. My team and I thought that our old doorbell (nicknamed mister chime) could use an upgrade.
What it does
This is the graph portion of our doorbell/activity level tracker. Whenever a user walks into the repair center, it is tallied on a raspberry pi. At the end of every hour, the data is sent to the server, and viewable by the graph. The graph itself is dynamic, with the ability to pan and zoom to view hourly, weekly, monthly, or even broader trends.
How I built it
This was my first experience using D3. After attempting to create the graph in raphael.js, I quickly realized how limited raphael was, and how powerful d3 could be. The graph was adapted from a couple of different zoomable graphs found on D3's GitHub page.
Challenges I ran into
Correctly parsing dates. Also, getting the graph to look nice even when zoomed out. At fist, the entire graph had a black outline, and when the user would zoom far out, the black lines would all clump together to make for a very ugly graph. I decided to go with a very minimal design (removing the line completely) in order to correct this.
Accomplishments that I'm proud of
Creating my first graph with D3.
What I learned
D3 is very powerful, and it's kind of fun to work with.
What's next for Master Chime Graph
At the time of writing this, my teammates and I are working on connecting this graph to the raspberry pi. Once we get everything working correctly, the plan is to add more stat-tracking features, along with the ability to change the doorbell sound.
NOTE: If you'd like to try out the local copy (with sample data) posted on my GitHub, please be sure to open the index.html in Firefox, as Chrome has trouble pulling in the CSV file.
Log in or sign up for Devpost to join the conversation.