D3 tutorial

This repository contains some D3 examples, slides, and four lecture videos developed in the past years, for Dr. Jian Chen 's CSE 5544 class mainly developed by her two TAs, Rui Li and Zefeng Qiu at The Ohio State University, with input from students.

D3 Lectures and Examples

• Course 0: Web Foundations [lecture slides][lecture video]
  • HTML
  • CSS
  • JavaScript
  • SVG
  • Load json using JavaScript + svg
  • JavaScript+Json+svg + css
• 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 file and draw a bar chart (check the console for results)
    • Load json file and draw a bar and a scatterplot (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 and Layout [lecture slides][lecture video]
  • 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 [lecture slides][lecture video]
  • Hierarchical-Layouts
    • tree layout
    • treemap (treemap layout)
    • packed circles (pack layout)
    • sunburst (partition layout)
  • Interactions
    • brush
    • lasso selection
    • zooming and panning
    • drag
  • Animation & Transition
    • simple transition
  • Geospatial visualization
    • interactive map of the Columbus city
• Course 4: Dashboard view with with streamlit and python [lecture video]
  • Code
    • [code] (https://github.com/CSE5544OSU/CSE5544OSU.github.io/tree/main/covid-19%20dashboard)

Credits 

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

Acknowledgment: Prof. Han-Wei Shen's lecture materials in previous years.