UBDC How to Guides - Building a Time Series Chart
![](https://cdn.prod.website-files.com/65830311be3dfffd373f53cc/65f0613c578e11ec90ab8f98_john-schnobrich-FlPc9_VocJ4-unsplash%20(1).jpeg)
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/...
Related content
Jointly funded by
![](https://cdn.prod.website-files.com/65830311be3dfffd373f53bc/6602967fba4b1b54bc3816e3_SDRUK-UKRI-logo-horizontal-lockup%20(1)%20copy.png)
![](https://cdn.prod.website-files.com/65830311be3dfffd373f53bc/6602967f23ddf673b7bd566d_SDRUK-UKRI-logo-horizontal-lockup%20(1).png)