Presentation for the d3.js meetup in Paris Creative coding in the browser with javascript and d3.js Getting inspired.

1. CREATIVE CODING WITH
D3.JS
PARIS D3.JS

2. CREATIVE CODING WITH D3.JS
WHAT WILL YOU LEARN?
▸ What is generative art and creative code?
▸ d3 is not just for dataviz!
▸ The story of a side project
▸ The analog digital art of a Czech artist
▸ Creating and selling a digital product in a week
▸ Live demo of creative environment with d3

3. CREATIVE CODING WITH D3.JS
FABIAN DUBOIS
▸ Former Orange Labs Tokyo and
Locarise
▸ Data Visualisation and Web App
consultant
▸ Based in Tokyo, sometime Paris, Berlin,
Valencia
▸ Author of ‘Drawing LIKE VLADISLAV
MIRVALD WITH D3.js’
▸ twitter: @fabian_dubois
▸ blog: www.datamaplab.com

4. GENERATIVE ART AND CREATIVE CODING
GENERATIVE ART
▸ Art created by an ‘autonomous’
process.
▸ the artists defines the process, the
process generates the output.
▸ Often algorithmic
▸ Can be data driven
▸ See also: Generative design
(parametric architecture…)
▸ Some Fugue of Bach considered as
generative @AndruSenn

5. GENERATIVE ART AND CREATIVE CODING
CREATIVE CODING
▸ Use of code to generate art
▸ Roots in Demoscene
▸ Use in VJing, art installations…
▸ Popular tool: Processing (and now
p5.js)
▸ Also GIF Loop coder
▸ See also: glitch art
@IamCraigPickard

6. D3 IS NOT JUST
FOR DATAVIZ

7. D3 IS NOT JUST FOR DATAVIZ
ONE ANIMATED PIECE A DAY
▸ Created by John Firebaugh (2015)
▸ All made with d3.js
▸ Most of them around 40 lines of
code
▸ http://jfire.io/animations/

8. D3 IS NOT JUST FOR DATAVIZ
T.D3FC.IO
▸ Tweet-sized d3 animations
▸ write https://t.d3fc.io and it will be
rendered in GIF on the website
▸ use special helpers to reduce code
size.
▸ must fits under 116 characters!

9. D3 IS NOT JUST FOR DATAVIZ
STAINED GLASS
▸ d3 project by David Nowinsky
▸ Image filtering using
d3.geom.voronoi()
▸ http://david.nowinsky.net/stained-
glass/

10. D3 IS NOT JUST FOR DATAVIZ
PARTY MODE
▸ Play music from soundcloud and
get a sound visualisation
▸ Visuals made with d3
▸ Web audio API
▸ http://preziotte.com/partymode/

11. D3 IS NOT JUST FOR DATAVIZ
MAKING MUSIC WITH D3
▸ Adam Pearce
▸ Visual sequencer
▸ http://roadtolarissa.com/synth/

12. STORY OF A SIDE
PROJECT

13. MIRVALD’S ANALOG
DIGITAL ART

14. THE STORY OF A SIDE PROJECT
VLADISLAV MIRVALD
▸ 20th century Czech artist
(1921-2003)
▸ Constructivism movement
▸ Strong interest in geometric
construction

15. THE STORY OF A SIDE PROJECT
SOME PIECES FRO MIRVALD
Circular Structure (1969)
Continuous Cylinder (1979-1992)
Undulating Cylinder (1995)

16. THE STORY OF A SIDE PROJECT
GUMROAD’S SMALL PRODUCT LAB
CHALLENGE
▸ Gum road is a platform for selling
goods, in particular digital goods
▸ 1 week challenge:
▸ Create something
▸ Sell it!

17. THE STORY OF A SIDE PROJECT
THE E-BOOK

18. THE STORY OF A SIDE PROJECT

19. THE STORY OF A SIDE PROJECT

20. ONLY 2 CORE
CONCEPTS

21. USE DATA TO GENERATE SHAPES
PARAMETRICALLY.
IT CAN BE AS SIMPLE AS A
D3.RANGE()

22. CHANGE THE DATA TO UPDATE THE
DRAWING AND ANIMATE.
CAN BE TRIGGERED WITH
D3.TIMER() OR USER INTERACTION.

23. DEMO
LIVE DEMO
▸ With KORG nano KONTROL
▸ using https://github.com/shokai/korg-
nano-kontrol based on WebMIDI API
▸ to map inputs:
d3.scale().domain([0, 127])

24. TEXT
LINKS
▸ Creative coding sketches codedoodl.es (https://medium.com/@neilcarpenter/
introducing-codedoodl-es-598039758df8#.ifeve6ql7)
▸ GIF Loop coder (http://www.gifloopcoder.com/)
▸ p5.js (https://p5js.org/)
▸ 50 free copies of Draw like Vladislav Mirvald with d3.js ebook (https://gum.co/mirvald/
d3paris) with code `d3paris`.
Also some code here: https://github.com/fabid/mirvald-d3
▸ John Firebaugh’s d3 animations (http://jfire.io/animations/)
▸ About tweet-sized d3 (http://blog.scottlogic.com/2016/03/08/deconstructing-a-tweet-
sized-d3-creation.html)
▸ Creative coding Podcast (http://creativecodingpodcast.com/ )

25. THANK YOU.
@fabian_dubois
https://www.datamaplab.com
Get a copy of:
Draw Like Vladislav with d3.js
https://gum.co/mirvald/slideshare