In this chapter, we'll build an activity log in our task management system, using Scalable Vector Graphics (SVG) to build graphical components with Angular. SVG is the perfect candidate when it comes to complex graphical content, and by using Angular components, we can easily build encapsulated and reusable content.
Since we want to log all of the activities within our application, such as adding comments or renaming tasks, we are going to create a central repository for activities. We can then display these activities and render them as an activity timeline by using SVG.
To add an overview of all of the activities and to provide user input to narrow the range of activities displayed, we're going to create an interactive slider component. This component will use a projection to render timestamps, in the form of ticks and activities, directly...