[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
This repository has been archived by the owner on Nov 30, 2021. It is now read-only.

rinckd/d3-workshop

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

D3 Workshop

This was a workshop I taught 5 years ago.

It is deprecated, and the javascript world has certainly moved on from here. That said, the color theory slides and general outline still stand the test of time.

Prerequisites

This is a lightweight Node/Express app which provides a nice sketchpad for playing around with d3.js.

You'll need:

To Run

  1. cd src then use npm install to install the necessary dependencies.
  2. gulp serve will start server/app.js and browser-sync. This will launch a browser pointing to the start of the lecture.

Using the D3 Sketchpad

The relevant javascript you will want to look at to follow along is located in: src/wwwroot/js/

It is designed for rapid prototyping. For example you can add a scratchpad20.js to src/wwwroot/js and use d3.js and Material Design Light. Your script will be immediately available at the route: http://localhost:3000/scratchpad/20.

How To

You'll want to select the 'time-series' ID in d3. That will give you a nice fresh div with lots of space to design in d3!

var svg = d3.select('#time-series').append('svg')

Presentation Table of Contents:

  • SVG Introduction. Dynamically update svg elements and see how they react.
  • Generative Art. Tree recursion.
  • Generators.
  • Components.
  • Heat Map. ColorBrewer.

##Presentation Slides: Are here: https://github.com/rinckd/d3-workshop/blob/master/Presentation_Slides.pdf

About

slides

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages