flâneur — a map of the web's best reading

Quickstart and Tutorial · Counterpoint Documentation

dig.cmu.edu · 1,348 words · saved by 1 readers

Counterpoint is a library of data structures for developing animated, interactive canvas-based web interfaces. It’s best suited for people who are building data- driven interfaces with custom or non-standard rendering requirements, such as D3.js users looking for additional flexibility and simpler canvas support. To install Counterpoint using NPM: Then import in your code: To import Counterpoint in a JavaScript module, you can use similar syntax but refer to the full library URL: or use dynamic import syntax in vanilla JS: This example will walk you through creating a simple rendering of some circles that move across the screen when you click. The first step to use Counterpoint is to set up an HTML5 Canvas element. We’ll place the canvas in our HTML and give it an id: Then we’ll add some JavaScript to get the Canvas element and draw to it: The canvas should now look like this: At this point, if we wanted to manually create multiple circles and have them animate, we would have to create

Quickstart and Tutorial · Counterpoint Quickstart and Tutorial Quickstart and Tutorial Counterpoint is a library of data structures for developing animated, interactive canvas-based web interfaces. It’s best suited for people who are building data- driven interfaces with custom or non-standard rendering requirements, such as D3.js users looking for additional flexibility and simpler canvas support. Installation To install Counterpoint using NPM: npm install -S counterpoint-vis Then import in your code: import { Mark , Attribute , ... } from ' counterpoint-vis ' ; To import Counterpoint in a Ja

Explore this link on the map →

related reading