Assigned: Wednesday, Mar 8, 2017
Due: Friday, Mar 17, 2017 at 5pm
Collaboration: You should work with your assigned partner for this lab.
This lab will combine a number of techniques we have learned over the last few weeks, along with one additional piece: interactivity. Building an interactive visualization makes it possible to present more data than you can reasonably fit on the screen at one time. Interactions allow users to quickly delve into the details when they want them without sacrificing the broader view.
For this lab, you will build a live updating world map of tweets. Each tweet should appear as a point on the map, positioned according to the reported location from Twitter. Whenever a user is hovering their mouse over a tweet, the text of that tweet should appear nearby. You can remove old tweets after some amount of time; five seconds is probably sufficient.
You can find the starter code for the lab on GitHub at grinnell-cs/datavis-interactive. The starter code renders a world map that fills the page and subscribes to the live twitter feed. You will need to combine techniques from previous labs to generate points on the map, and to create new absolute-positioned text boxes when the user hovers over a point.
I strongly recommend that you do not use data joins for this lab. These are very useful for datasets that are available in full, but for streaming data you often just want to do generate one item in response to an event.
Your wikipedia view used <div> and <a> elements to create links in absolute positions.
It will be much easier to create “floating” tweets if you use this technique, versus creating <text> elements inside of your <svg>.
My suggestion is to create a <div> outside of the SVG, then create a <p> inside the <div> to hold the text.
You can set a fixed width for the <div> and it will wrap the text nicely, unlike <text> element inside an SVG.
If you need help working with maps and projections, take a look at the Geographic Data Demo from class.