TV Programs Scheduler application

CHALLENGE

We had a task to create a web application to schedule TV programs that is easy to use and has many functional features.

SOLUTION

We created Webapp with JavaScript and frameworks and technologies of JavaScript: node.js, Angular 8, and d3.js. D3.js was used to create dynamic, interactive data visualizations. Node.js offers the freedom to develop apps. The data in the project is sorted for a convenient and simple display in the interface. Moreover, in this app, we used different data presentations (interactive charts, lists, tables) which greatly facilitates the work of users and makes it easy to use for users. 

The web app consists of a Circles page, Demographic, VB, Telecast pages, and Promo Pie page.

Circles page

On this page, we show the Tree using the D3 library’s Circle Packing chart. Users can have any depth of enclosure and any number of nodes. On the left side of the page, we display the Tree as a list. Both Trees are synchronized. Users can click to zoom it up or click twice to zoom out. Users have the ability to edit, delete and exclude nodes of the general stream.

Demographic, VB, and Telecast pages

On these pages, we created Trees which are displayed in a consequence on the Circles page. Users have two opportunities to add nodes to a Tree. They can use drag-and-drop and draw cards on a node or create multiple nodes in one level. It is also possible to open a modal window to choose a necessary set of elements and pass it to the Tree. The application shows a progress spinner if too many nodes are added. At each level there are search and filtration: to choose one, to choose everything, to exclude one, or to exclude all. Events are saved and users have the opportunity to cancel all used filters. In the bottom right corner, there is a button that completely cleans out Tree. Users can validate a Tree by the number of nodes in a Tree or the depth of a Tree.

Promo Pie page

On this page, the application shows the D3 library’s Sunburst(Pie) chart. On the left side, there are filters. If users interact with them, the changes will be displayed on a Pie immediately. Also, there are two lists (with active and disabled cards) in which users can change order with drag-and-drop, choosing sing element or multiple. These lists are fully synchronized with Pie. The number of rings and pie pieces depends on the active list. When users hover the mouse over the piece of pie from above the application shows a way to it. Also, the application shows the information about all his children with the enclosure to the last. Double-clicking on a piece changes the display of the pie reflects information only about this piece in a ring. An opportunity to cancel these actions on a step backward is provided before full return to the original state.