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