Skip to content

Starter kit for making interactive text visualizations with D3 or P5.js

Notifications You must be signed in to change notification settings

vlandham/text-vis-starter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Text Vis Starter Kit

A simple project to provide starter code for text visualization in D3.js or P5.js.

Getting Started

There is one optional npm package you can use to host this site locally.

Running:

npm install

Should install the http-server node module locally.

Then the local server can be started using:

npm start

Which simply runs the server in this directory.

If you have your own local server solution (like python's simple http server), feel free to use that!

D3 Example

The d3.js example is accessed by viewing index.html

It is implemented in src/main.js.

We use the D3 Pack Layout to make an odd "text splatter" out of the words in Alice in Wonderland - which is stored in data/alice.txt.

D3 Screenshot

P5.js Example

The p5.js example is accessed by viewing index-p5.html

It is implemented in src/main-p5.js.

We simply display lines from Alice in Wonderland randomly on the screen. The lines slowly move down off the screen. When a line goes away, two more take its place, eventually turning into a snow of text (and probably will crash your browser ;) ).

P5 Screenshot

About

Starter kit for making interactive text visualizations with D3 or P5.js

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published