1. NODEBOX FOR DATA VISUALIZATION
Lynn
Cherny
for
PyData
2013
@arnicas
www.ghostweather.com

2. WHAT IS NODEBOX?

3. Nodebox.net

4. FLOCK EXAMPLE Take
that
,
ma
tplo tlib
(
?!)
h3p://www.cityinabo3le.org/nodebox/
Flock_example.py

5. NODEBOX OPENGL
from nodebox.graphics import *
def draw(canvas):
canvas.clear()
nofill() Set
context
values
stroke(0, 0.25)
strokewidth(1) X,
Y,
width,
height
Local
override
of
context
rect( 50, 50, 50, 50) values
rect(110, 50, 50, 50, stroke=Color(0), strokestyle=DASHED)
rect(170, 50, 50, 50)
canvas.run(draw)
0,0
in
lower
leB
by
default
(top
leB
in
NB
1!)

6. NODEBOX 1 IS A SMART IDE
Implicit
canvas,
draw,
etc.

7. DOWNLOAD NODEBOX
Mac
too,
I’ll
TentaQve
evidence
demo
of
linux
too
http://nodebox.net/download/

8. GENERATIVE ART
JusQn
D
on
flickr.

10. HIGH QUALITY GRAPHIC OUTPUT
TODO.TO.IT

12. LIBRARIES IN NODEBOX 1 (MAC OSX)
Note:
these
libraries
must
be
put
in
~/Library/Application
Support/Nodebox
to
be
imported.
All
the
libs
live
here.

13. IMAGE TOOLS

14. NETWORK TOOLS (SOPHISTICATED!)

15. COLOR TOOLS, SVG

16. GRIDS

17. L-SYSTEMS, ANTS, BOIDS…

18. DEMOS IN NODEBOX 1

19. If
you
do
data
visualization,
but
not
“art,”
WHY WOULD YOU NEED THIS TOOL?

20. SKETCHES IN CODE
Examples
from
Processing
sketches
by
JanWillem
Tulp

22. “Ghost
CounQes,”
by
@JanWillemTulp

23. UNUSUAL GRAPH TYPES
Slopegraph
from
Juice
Analytics,
code
for
NB
1

24. TOOL CREATION
My
sparklines
generator
in
NB
OGL
Example
sparks.py
in
NB
OGL

25. NODEBOX 1 “GUI”
Example
bars_with_goals.py
for
NB1

26. CLOSEST SIMILAR TOOLS
Drawbot
(Preceded
and
inspired
Nodebox,
MacOSX
only)
Shoebot
(MacOSX),
with
Spryte
for
Windows
(some
examples
run
unchanged
in
NB1!)
Pythonista
on
Ipad!
Processing
(cross
platform,
includes
.js
port)
(Processing.py
by
jpheinberg
is
jython-­‐based.)

27. PROCESSING LOOKS LIKE JAVA L
Plus,
obviously,
I
want
Python
libs
h3p://openprocessing.org/sketch/8941

28. Very,
very
short
intro
to
the
concepts…
DRAWING BASICS

29. NODEBOX 1 PRIMITIVES
Most
of
them
in
NB
OGL
Note:
no
triangle()
as
in
Nodebox
OGL;
“oval”
instead
of
“ellipse”
as
in
OGL

30. SHAPE PRIMITIVES IN NODEBOX OGL
NOTE:
ellipse()
not
oval()
as
in
NB1

31. THE DRAW() LOOP
Nodebox
1
can
be
used
for
simple
static
image
without
animation
–
no
canvas
declaration
or
draw
loop
needed.
(Use
speed(<fps>)
to
turn
on
the
animation.)
Nodebox
OGL
always
runs
an
animation
loop
in
a
draw
function
(you
can
exit
out
with
a
return
after
canvas.frame==1
in
“draw”
if
you
want)
mycanvas = Canvas(width=600, height=480)
mycanvas.fps = 20
mycanvas.run(draw=draw,setup=setup)

32. DRAWING CONTEXT CHANGES
State
context
changers:
colormode(), fill(), stroke(), strokewidth(),
nofill(), nostroke()
font(), fontsize()
transform(), translate(), rotate(), scale(), skew()
Temporary
state
changes:
push()
fill(0)
translate(200,200)
pop()

33. NOTICE THE CONTEXT AGAIN…
from nodebox.graphics import *
def draw(canvas):
canvas.clear()
nofill() Set
context
values
stroke(0, 0.25)
strokewidth(1) X,
Y,
width,
height
Local
override
of
context
rect( 50, 50, 50, 50) values
rect(110, 50, 50, 50, stroke=Color(0), strokestyle=DASHED)
rect(170, 50, 50, 50)
canvas.run(draw)

34. LEARNING THE “REST”
§ Examples
with
both
NB
1
and
NB
OGL
distribs:
commented
and
by
topic
§ Tutorials
on
the
NB
1
site
§ The
extensive
intro
page
for
NB
OGL
(that
builds
off
NB1’s
api
background)

35. Getting
Real(ly
dirty
and
sketchy)
MY TOY EXAMPLES

37. FICTION INVESTIGATION…
Shane
Bergsma’s
db
of
noun
gender
(based
on
Google
news
crawling):
[see
refs]
“word
male
female
neutral
plural”,
e.g.:
publication
93
20
3152
110
1. Load
Shane’s
db
into
redis
2. Convert
books
to
txt
(blank
line
bw
paragraphs)
3.
Extract
nouns
with
pattern.py
4. Code
each
with
tuple
(m,
f,
n)
&
%’s
5. Write
out
as
csv
for
use
in
Nodebox
scripts

38. COORDINATES IN COLOR AND 3-SPACE
Neutral
Male
Female

39. FOOTNOTE: HSV IN THE BLUE-RED
RANGE / WITH DARKNESS
Code
borrowed
from
an
example
on
StackOverflow
–
tuned
to
get
only
hue
from
blue
to
red
from
complete
HSV
range

40. GET CARTESIAN X, Y COORD FROM A
TUPLE
def to_cart(triple):
(m, f, n) = triple
x = ( f + n / 2.0)
y = math.sqrt(3) * n / 2.0
return x, y
Code
in
my
common.py
file

41. INTERPOLATION
You
often
need
to
map
from
a
data
range
to
another
range
(of
pixels,
or
color
points…).
Mapping
my
X
and
Y
to
colors:
from scipy.interpolate import interp1d
hue_scale = interp1d([0,1],[.67,1])
For
pythonic
hsv
color
and
then
nodebox
rgb:
hsv = (hue_scale(x)[0], 1, 1-y[0])
rgb = Color(colorsys.hsv_to_rgb(*hsv))
I
am
flipping
the
V!

42. Triangle_hist_uniq.py

43. EVENTS : LAYERS, MOUSE, KEYS
Layers
in
NB
OGL
are
one
good
way
you
might
handle
“mouseover”
functionality
Layers
have
their
own
draw()
functionality,
and
the
canvas
knows
that
layer
is
in
focus
(under
the
mouse,
via
canvas.focus)
Mouse
events
are
also
handled
nicely
by
canvas.mouse
–
mouse.x,
mouse.y,
etc.
are
available
See
my
example
triangle_layers.py

44. layers_intro.py

45. MOUSE & KEYBOARD EVENTS
mouse
=
canvas.mouse
mouse.x
#
Horizontal
position.
mouse.y
#
Vertical
position.
NB
OGL:
h3p://www.cityinabo3le.org/nodebox/
mouse.relative_x
#
Relative
(0.0-­‐1.0)
to
Canvas.width.
mouse.relative_y
#
Relative
(0.0-­‐1.0)
to
Canvas.height.
mouse.dx
#
Drag
distance
from
previous
x.
mouse.dy
#
Drag
distance
from
previous
y.
mouse.pressed
#
True
if
the
mouse
button
is
pressed.
mouse.dragged
#
True
if
the
mouse
is
dragged.
mouse.cursor
#
DEFAULT,
CROSS,
HAND,
HIDDEN,
TEXT,
WAIT
mouse.button
#
LEFT,
RIGHT,
MIDDLE
mouse.modifiers
#
List
of:
CTRL,
SHIFT,
OPTION
keys
=
canvas.keys
keys[]
#
All
keys
pressed
(SHIFT
+
"a"
=>
[SHIFT,
"a"]).
keys.char
#
Last
key
pressed
(SHIFT
+
"a"
=>
"A").
keys.code
#
Last
key
pressed
(SHIFT
+
"a"
=>
"a").
keys.modifiers
#
List
of
modifier
keys
(CTRL,
SHIFT,
OPTION).
keys.pressed
#
True
if
a
key
is
pressed
on
the
keyboard.

46. LAYERS GOT EVENTS TOO
layer.enabled
#
True
=>
will
receive
events.
layer.pressed
#
True
=>
mouse
pressed
on
layer.
NB
OGL:
h3p://www.cityinabo3le.org/nodebox/
layer.dragged
#
True
=>
mouse
dragged
on
layer.
layer.focus
#
True
=>
mouse
hovering
over
layer.
layer.on_mouse_enter(mouse)
layer.on_mouse_leave(mouse)
layer.on_mouse_motion(mouse)
layer.on_mouse_press(mouse)
layer.on_mouse_release(mouse)
layer.on_mouse_drag(mouse)
layer.on_mouse_scroll(mouse)
layer.on_key_press(keys)
layer.on_key_release(keys)

47. MOUSEOVER
Triangle_layers.py

48. A FAILED EXPERIMENT CAN STILL BE
FUN… ADDING ANIMATION.
Angels
&
Demons
(Brown)
Twilight
(Meyer)
“jade”
Pride
&
Prejudice
(Austen)
The
Secret
Agent
(Conrad)
triangle_bar_uniq.py

49. GETTING BLUNTER… 2 ON ONE:
Doesn’t
show
much…
sigh.

50. JUST GET EVEN BLUNTER…
Centroid
of
each…
a
li3le
more
revealing
maybe?
Definitely
not
for
publicaQon!

51. THERE CAN BE VALUE IN “MISTAKES”
WHEN VISUALIZING DATA AT PIXEL LEVEL
Thanks
to
MarQn
Wa3enberg
and
Fernanda
Viegas
for
this
observaQon…

52. A MORE INTERESTING MISTAKE…
If
you
don’t
filter
out
duplicate
menQons
of
the
same
noun….

53. Twilight
Angels
&
Demons
Triangle_hist_notuniq.py

54. Twilight
Angels
&
Demons
(uniqued)
(uniqued)
Triangle_hist_uniq.py

55. RATIO OF NOUNS TO UNIQUE NOUNS
(AS EXPECTED NOW)
Unique
Nouns/
Nouns/
Nouns
Words
Nouns
Unique
Words
Angels
&
19546
2842
6.9
151610
7.8
Demons
Twilight
18252
1943
9.4
121205
6.6

56. Twilight
(most
repeated)
Angels
&
Demons
(most
repeated)
Line_freqs.py

57. HOOKING UP OTHER PYTHON LIBS
1. Load
a
book
into
redis
by
line
#
2. Plot
dialog
vs.
exposition
in
a
simple
colored
bar
3. Use
the
redis
db
to
see
what’s
what
in
the
book
on
rollover!
Simple,
and
very
fast!

59. DIALOG TO EXPOSITION…
Twilight
Angels
&
Demons
Secret
Agent
Pride
&
Prejudice
Moby
Dick
(Meyer)
(Brown)
Para
groups:
7
Quote_bar_nodb.py

60. Phew!
That
was
a
lot
of
stuff.
WRAP UP…

61. WHY OR WHY NOT NODEBOX?
Advantages
§ Data
as
“art”
–
not
supported
by
Matplotlib
(or
future
ggplot2
ports
to
python)
§ Data
“sketching”
–
speedy
unstructured
pics
§ Animation
is
basic
§ Events
come
along
too
§ You
get
to
write
in
Python
(unlike
w/
Processing)
§ So
you
can
use
other
Python
libs

62. BUT…
§ No
3d
(unlike
matplotlib)
§ PDF
or
SVG
Export
are
required
for
good
print/reuse
(available
in
NB
1,
not
in
NB
OGL
yet)
§ No
web
embedding
/
js
version
(unlike
processing.js)
§ Can’t
use
with
IPython
notebook
(yet)
§ Challenge
of
other
python
libs
with
NB
1
-­‐
sad
PYTHONPATH
problem
in
Nodebox
1
(see
appendix
for
tips)
§ Authors
in
Leuven
more
focused
on
NB
3/Pattern.py
than
on
NB1
/
OGL
versions.
Can
we
invigorate
Nobebox
OpenGL?
§ A
general
lack
of
code
examples
to
draw
from…
hopefully
mine
will
help!

63. THAT’S IT - A BIG THANKS!
@deepfoo
for
the
reminder
of
Nodebox1,
Tom
De
Smedt
and
Frederik
De
Bleser
for
email
help,
@minrk
for
help,
@jsundram
for
code
cleanup
advice
(not
all
of
which
I
took),
@pwang
and
#PyData
for
having
me

64. Find
me
@arnicas,
www.ghostweather.com
blog
GET THE CODE FILES HERE!
PDF OF THESE SLIDES HERE.
Apologies
for
the
import
*
and
the
globals…
I
was
following
some
suggesQons
in
the
demos
I
looked
at
which
may
not
have
been
ideal.

65. REFERENCES
§ JanWillem
Tulp
Ghost
Counties
images:
http://www.flickr.com/photos/janwillemtulp/sets/72157626612248205/
§ Code
for
ternary
plots
in
python
and
excel:
http://sourceforge.net/projects/wxternary/
and
Will
Vaughn’s
at
http://wvaughan.org/ternaryplots.html
§ Nodebox
flickr
gallery
§ Running
Nodebox
1
from
command
line:
http://nodebox.net/code/index.php/Console
§ Pattern.py
by
Tom
de
Smedt
(a
Nodebox
original
author)
§ Nodebox
authors
Tom
De
Smedt
and
Frederik
De
Bleser
in
Belgium
§ Shane
Bergsma
and
Dekang
Lin,
“Bootstrapping
Path-­‐Based
Pronoun
Resolution,”
In
Proceedings
of
the
Conference
on
Computational
Lingustics
/
Association
for
Computational
Linguistics
(COLING/
ACL-­‐06),
Sydney,
Australia,
July
17-­‐21,
2006.
(page
w/
db)

66. APPENDIX: NODEBOX 1’S IMPORT PATH
Custom
path,
includes
its
own
python
(64
bit)…
so….
– You
can
install
your
packages
into
NodeBox’s
path,
ie.,
~/
Library/Application
Support/NodeBox/
—
meaning
that
you
can
use
them
from
NodeBox,
but
not
from
other
scripts…
– You
can
import
sys
in
your
NodeBox
code
and
manually
modify
the
sys.path
value
to
add
your
existing
packages…
– You
can
install
packages
into
your
system
site-­‐packages
directory,
and
sym-­‐link
them
from
NodeBox’s
directory…
– You
can
make
NodeBox
use
your
system
packages
instead
of
it’s
own
by
sym-­‐linking
~/Library/Application
Support/
NodeBox
to
your
site-­‐packages
directory
of
choice
(ex.,
/
Library/Python/2.5/site-­‐packages)
– Some
flavor
of
above
plus
VIRTUALENV
Tips
from
h3p://www.eriksmar3.com/blog/archives/747
Thread
here
too:
h3p://nodebox.net/code/index.php/shared_2008-­‐09-­‐04-­‐01-­‐42-­‐29

67. APPENDIX: NODEBOX1 AT COMMAND
LINE…
§ Instructions
and
samples
here:
http://nodebox.net/code/index.php/Console
§ Best
to
use
a
virtualenv
again

68. THE NODEBOX “FAMILY”
Nodebox
1
Platform
&
“style”
Mac
OSX
only
(kind
of
Status
No
longer
in
dev,
spotty
URLs
Mac
OSX
Lion
file:
Lion)
–
write
python
code
archiving
online
https://secure.nodebox.net/
(the
original)
downloads/
in
a
simple
IDE
NodeBox-­‐1.9.7rc1.zip
Home:
http://nodebox.net/code/
index.php/Home
Github
copy
of
svn
source:
https://github.com/nodebox/
nodebox-­‐pyobjc
Nodebox
2
Mac
OSX
–
python
visual
GONE!
Apparently
was
Home:
(the
disappeared)
programming
“blocks”
slow
and
confusing?
http://Beta.nodebox.net
Nodebox
3
Mac
and
Windows
–
no
Not
so
interesting
to
me:
I
Home:
IDE,
no
python
exposed,
want
to
write
python
http://nodebox.net/node/
(the
current
beta)
all
visual
programming?
code.
Nodebox
Mac
and
Windows
–
write
Not
up
to
date
with
Home:
plain
python
code
Nodebox
1
yet
(e.g.,
lack
http://www.cityinabottle.org/
OpenGL
(the
nodebox/
incomplete)
of
libraries,
lack
of
Github
code:
functionality;
not
so
well
https://github.com/nodebox/
documented);
can’t
run
in
nodebox-­‐opengl
IPython
notebook
due
to
probable
multithreading
issue(s)