04/27 — Finish Frontend Layouts
After continuously working on the final project for several days, I finish all the frontend design and development. Most of the layout concepts were the same as what we point out in the project proposal.
All SVGs are draw by d3.js, and for helping me work on this project more convenient, I include lodash.js and moment.js as well. I use moment.js to create an array of dates for our focus period and use lodash.js just to avoid triggering some undefined data type error. Besides JavaScript libraries, I also include Bootstrap for styling.
For tweets data, the user can choose a different type of categories to emphasize the data value, for example, when choosing Retweets, the block with greener color means that this tweet was being retweeted more times than others.
For related rates chart, the user can remove any line by clicking the label in the legend block and redraw them back by clicking the label again. Due to the differences in the y-axis value, this combined line chart doesn’t display the y-axis to show specific values, however, the user can see the exact value of each dot in the tooltip when placing the mouse on the dot and can check all related detail by clicking the dot.
Next step is to record a video of our project detail.
