D3 tutorial

This repository contains a sequence of D3 examples, slides and lecture videos. Created by Rui Li and Zefeng Qiu at The Ohio State University.

D3 Lectures and Examples

• Course 0: Web Foundations [lecture slides][lecture video]
  • HTML
  • CSS
  • JavaScript
  • SVG
• Course 1: D3 Basics [lecture slides][lecture video]
  • Simple bar chart demo
  • Data loading and binding
    • Load csv files (check the console for results)
    • Load json files (check the console for results)
    • Data joins
  • Scale functions
    • scaleLinear
    • scaleTime
    • scaleQuantize
    • scaleQuantile
    • scaleThreshold
    • scaleOrdinal
    • scaleBand
  • Color schemes
    • categorical color schemes
    • continuous color schemes
  • Axes
    • create axis
    • axis orientation
    • number of ticks
    • tick format
    • tick value
  • Legend
    • legend from scratch
    • D3 Color-legend lib
• Course 2: D3 Shapes, Layout, and Interactions
  • SVG Shapes
    • heatmap
    • scatter
    • lollipop chart
  • Path shape
    • line chart
    • curved line chart
    • parallel coordinates
    • radar chart
    • area chart
    • simple arc
    • symbols
  • Layout
    • donut chart
    • stacked bar chart
    • streamgraph
    • voronoi
    • chord
    • Forced-directed layout
• Course 3: Hierachical-layout, GeoSpatial visualization, and Interactions
  • Hierarchical-Layouts
    • tree layout
    • treemap (treemap layout)
    • packed circles (pack layout)
    • sunburst (partition layout)
  • Interactions
    • brush
    • lasso selection
    • zooming and panning
    • mouse
  • Animation & Transition
    • simple transition
  • Geospatial visualization
    • map
    • choropleth
    • hexbin map
  • Multiple view visualization
    • Covid-19 dashboard

Credits 

Some codes examples and slides are adapted from the following resources:

• https://d3js.org/
• https://www.d3indepth.com/
• https://d3-graph-gallery.com/
• https://observablehq.com/@d3/gallery
• Prof. Han-Wei Shen, Jiayi Xu, and Wenbin He