UCL Dataviz Workshops 2019

The course structure and some online resources for the UCL Business Management Dataviz module.

Course Structure

• Webdev101
  • see introductory slides
  • Ch. 4 “Data Visualization with Python and JavaScript” (DVPJ)
  • Building a dummy dataviz with HTML, CSS and SVG see codepen
  • A little SVG face-building challenge, see codepen
• Easy wins with a little JavaScript and automated charts
  • Basic JavaScript data manipulation, codepen demo
  • Mastering HTML positioning with the CSS flexbox
  • A little Leaflet mapping demo, navigating the UCL campuses
  • Some Leaflet providers
  • From Python notebook to Browser using Plotly
• Introducing D3
  • Ch. 16 DVPJ
  • Working with selections
  • Adding DOM elements
  • Leveraging D3
• Dealing with changing data - the update pattern
  • A D3 circle dance (https://codepen.io/kyrand/pen/LoKMMa)
  • Nobel barchart codepen project (https://codepen.io/kyrand/project/editor/ZMbqEL)
• Building a (slightly) ambitious dataviz - The Wealth of Nations
  • Wealth of Nations Visualization with D3

Brexit dataviz

• Brexit demographic voting data (CSV)
• Jupyter notebook for Brexit analysis

Resources

• D3 interactive scales
• D3 in Depth’s scale intro
• Official scale docs

Codepen links

We’re using Codepen to enable browser-based editing and realization of our data visualizations. Here are the key links to the workshop walk-throughs:

• Codepen collection of visualisations
  • UCL Leaflet Mapping Dataviz
  • Brexit London with Plotly
  • Wealth of Nations with D3
  • Nobel Barchart Project

D3 Resources

• D3.org with a huge collection of examples (note the D3 version numbers!)
• D3 Blocks, an enormous collection of editable examples
• Dashing D3, large collection of videos, tutorials etc.
• https://www.d3indepth.com, Pete Cook’s friendlier D3 docs

-