Primary tabs

Introduction to D3.js

D3.js is a JavaScript library and framework designed for creating data visualizations. It allows you to bind data to graphical elements on a webpage by associating (or binding) data with the Document Object Model (DOM). This binding gives you the ability to manipulate, modify, or add to the DOM directly, giving you complete control over how the webpage (or document) looks and behaves. This level of control, combined with how D3.js interacts with the DOM, sets it apart from other visualization tools.

In this workshop, you'll dive into D3.js, a library offering fundamental functions for tasks like element selection, axis spacing, and animation, unlike other libraries with pre-made templates. You'll learn core D3.js concepts including selections, data binding, the Enter-Update-Exit pattern, scales, axes, transitions, and interactivity. Using Observable, a platform designed for interactive data visualization, you'll gain hands-on experience. Objectives include understanding D3.js basics, differentiating it from other toolkits, and creating a simple visualization by manipulating parameters.

This will be a hands-on workshop, where you'll be working directly in Observable.

Workshop Objectives:

  • Understand the differences between D3.js and other visualization toolkits
  • Gain a foundational understanding of D3.js
  • Learn about the key components needed to run D3.js code: HTML, CSS, JavaScript, and the D3.js library
  • Create a simple visualization using D3.js and learn how to manipulate its parameters

Level: Introductory

Prerequisites: Some familiarity with HTML and JavaScript is helpful but not required. Participants are encouraged to bring a laptop for hands-on exercises.

Register

Tuesday, November 12, 2024 - 14:00 to 16:00