arrow-left Back to Blog

TV Programs Scheduler Webapp


Main image of the post

CHALLENGE

We had a task to create a web application to schedule the 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 freedom to develop apps.The data in the project is sorted for 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 webapp consists of Circles page, Demographic, VB, Telecast pages and Promo Pie page.

Circles page

On this page we show the Tree using 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, Telecast pages

On these pages we created Trees which are displayed in a consequence on 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 to create multiplel 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 progress spinner if too many of 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 opportunity to cancel all used filters. In the bottom right corner, there is a button which completely cleans out Tree. Users can validate a Tree by the number of nodes in a Tree or depth of a Tree.

Promo Pie page

On this page the application shows 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 an order with drag-and-drop, choosing sing element or multiple. These lists are fully synchronized with Pie. Number of the 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 application shows the information about all his children with enclosure to the last. Double-click on a piece changes display of pie, reflects information only about this piece in a ring. An opportunity  to cancel these actions on a step backwards is provided before full return to original state.

 

Share

Read more

Contact us

Send us a few words about your project

+31 641039634 team@mifort.org

Netherlands, Amsterdam, 74-2 Albert Cuypstraat

View on map

Belarus, Minsk, Romanovskaya Sloboda 5

View on map