Hack Session: Visual Storytelling with D3.js

Hack Room

Data Driven Documents (D3) is a open source JavaScript library used to create dynamic, interactive visualizations enabled on modern web browser. It runs mainly using HTML, SVG, CSS and JavaScript. D3.js is extremely fast, responsive and supports large data sets too for creating dynamic animations in web browsers. The collection of useful coding components & plugins make d3 codes reusable.

Introduction

  • Why are we here?
  • Why should we care about D3?

D3 Building Blocks

  • Hello! DOM
  • SVG and CSS
  • JS Method Chaining
  • Introducing D3 Selections

Hello World! D3

  • SVG Elements as building blocks
  • Attributes
  • Coming Alive – Interactions, Transitions, Delay

Interactive Bar Chart

  • Complete Bar Chart with Transitions
  • Concept of Enter, Exit

D3 with Jupyter

  • An example of how to use D3 inside notebooks

Publishing Blocks

Where Now?

  • Vega, Vega-lite
  • dc.js, Extensions
Social media & sharing icons powered by UltimatelySocial