Advanced Web Platform

Programmatic visuals

2D Graphics

Rendering libraries

• Sprite.js - Simple object-based library for drawing, animation and interaction
• Sketch.js - Lightweight interactive visuals, which can also integrate three.js
• Svg.js - SVG manipulation and animation
• Snap.svg - Interactive SVG rendering
• Pixi.js - Sprite-oriented 2D graphics engine aimed for games. High performance.
• Fabric.js - Canvas-based drawing
• Konva - Canvas-based drawing
• Two.js - Motion graphics-oriented engine. SVG/canvas/WebGL rendering
• EaselJS - Canvas-based drawing http://p5js.org/
• p5.js - Interactivity, animation and visualisation (Javascript version of Processing)

Colour

• chroma.js - Colour mixing, scales and other human-friendly transformation of colour values

Generative

• Generative Artistry - Tutorials for simple generative art
• Generated.space - Examples and code for various generative techniques

Tools

• Paths Edit SVG paths in the browser

Examples

• Music visualisation

3D Graphics

See also Working with mixed, augmented and virtual reality.

Inspiration

• WebVR Experiments

Visualisation

• Gio.js - 3D globe data visualisation

Rendering

• Three.js - Deep 3D rendering engine
  • Getting started
• Babylon.js - Feature-rich 3D rendering engine, includes WebVR, gamepad support. Uses WebGL
• stack.gl - Modules for working with WebGL
• deck.gl - Specialised for high-performance map rendering with overlaid data
• Scene.js - Scene graph and helpers, ala three
• Goo Create - Games and VR for the browser
• Play Canvas - Games and other 3D content for the browser
• Flat Surface Shader Primitive rendering engine which supports WebGL, canvas and SVG.
• OSG.JS - Open Scene Graph 3D rendering

Low-level rendering

• Luma.gl
• Three.js - Deep 3D rendering engine
  • Getting started

Fundamentals

• WebGL fundamentals
• The Book of Shaders

Projection-mapping

• HeavyM
• Maptastic - Helps you to set up deformations of HTML elements to match the world

Tutorials

• Making a 3D scene with Threejs
• Animation techniques with WebGL - Demonstrates using trigonometry for powering character animations
• Three.js: Creating Photorealistic 3D graphics

Virtual, Mixed, Augmented Reality

• A-Frame - Framework for VR in the browser
• AR.js - AR for mobile devices running in a standard browser
• ARCore - Google's AR platform for Android. They've also made a cross-platform browser that works on Android and iOS for developing AR experiences with web technologies
• Argon.js - AR with web technologies and a free cross-platform browser
• Viro - AR with web technologies and a free cross-platform browser (2)
• HoloJs - Microsoft Holographic apps with JS
• Perception Toolkit - Track and detect markers (Google)

• See also image processing and mixed, augmented and virtual reality

Graphs and Diagrams

• Kepler.gl - Visualising data on maps and globes
• Charts
  • Billboard.js - Make common kinds of vector charts. A wrapper around d3
  • c3.js - Another wrapper around d3 for making simple vector charts
• dygraphs - interactive charts designed for large data sets
• Sigma - interactive graphs
• Interactive Data Display for Javascript - Typical charts, plots and heatmaps
• Cytoscape - interactive graphs and automatic layouts (canvas-based) - examples
• d3 - graphs, data visualisations and much else (SVG-based) - examples
• Plotly - charts (based on d3 and stack.gl)
• Graphics.js - Construct vector charts and diagrams. Basic interactivity support
• Vega - Grammar for visualisations
• RAW - Quickly visualise spreadsheet data
• Joint.js - Editor and API for graphs and diagrams - examples
• jsPlumb - Diagrams
• Clusterize - Displaying large data sets

Low level

• isect - Calculate intersection of lines

Type

• Animated lettering
• Typeset.js Typographic pre-processor
• Charming - Lettering processor
• Blotter - Creative text rendering
• OpenType features demo - Demonstrates stylistic alternatives and other character sets
• OpenType features demo 2 - As the previous demo, but with more examples and details.

Decorative patterns with type

• Yuan Chuan's work 1, 2
• CSS Doodle - A script format for this kind of thing

Other design

• Bezier creator (particularly for CSS)
• Method of Action: A variety of interactive resources for aspects of graphic design, such as kerning, colour
• CSS Gradients - CSS gradient generator