UBDC How to Guides - Building a Time Series Chart

In this step-by-step guide, 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.

Software and Resources used:

• Node (https://nodejs.org/en)
• Webstorm or similar code editor (https://www.jetbrains.com/webstorm/)
• React (https://react.dev/)
• D3 (https://d3js.org/)
• Material UI (https://mui.com/)
• Google Fonts JetBrains Mono (https://fonts.google.com/specimen/Jet...)
• Glasgow CCTV Automated Object Detection Dataset, Urban Big Data Centre https://www.ubdc.ac.uk/data-services/...