Training tutorials

Our training tutorials provide free upskilling resources for data scientists and researchers.

UBDC Training Tutorials - Building a Time Series Chart with Andy Clarke

In the first of a new series of tutorials, Andy Clarke from the Urban Big Data Centre shows you how to build a time series chart using React, D3 and Material UI.

Learning outcomes:

* Create an interactive chart in React
* Import data dynamically to redraw the chart
* Make the chart responsive to different screen sizes and devices

This course is aimed at people interested in creating interactive data visualisations.
Some experience in React and javascript is recommended.

0:00 Introduction
3:49 Creating the React App
8:33 Setting up Styles
17:44 Creating a Component Structure
21:29 Building a Date Filter Button Group
39:40 Integrating React with D3
53:38 Connecting the Time Series Chart and Date Filter
54:39 Requesting Data from UBDCCCTV Object Detection API
1:20:46 Building a Time-Series Chart Using D3
2:02:49 Adding Final Styles
2:09:08 Making the App Responsive

Software and Resources used:

Node 
Webstorm or similar code editor
React 
D3 
Material UI 
Google Fonts JetBrains Mono 
Data used: Glasgow CCTV Automated Object Detection Dataset, Urban Big Data Centre