D3: The Crash Course

1. D3: The Crash Course

2. D3: Scratching the Surface

3. D3: What you need for the Homework

4. D3: Only the Beginning

5. Please do not be afraid to ask questions!

6. Programming Terminology • Directory -- Folder • Variable -- Identifier of an object, a value, or a function • Global Variable – Variable accessable from anywhere in your code • Local Variable – Variable only accessable from the current function • String – A sequence of characters (usually surrounded by “”s or ‘’s) • e.g. “This is a string.” • Int – An integer number (i.e. no decimal places) • Float – A number that can have decimal places • Array [ ] – A list of items • [1,2,3,4] • [{name:‘Alpha’},{name: ‘Bravo’},{name: ‘Charlie’}] • Object { } – A collection of key-value pairs, often representing a distinct entity • [{keyA:’value1’, keyB: 5, keyC: 9.3}] • Function / Method ( ) – A series of steps to perform a task • (often converting input to output) • Parameter – Input for a function

7. Workspace Setup • Website Directory Structure • Javascript 101-2 • SVG Basics • D3.js Crash Course

8. The Applications I Recommend • Text Editor: Sublime Text 2 • Browser: Chrome • Super-Basic Webserver: Python

9. Opening the project in Sublime Text • Accessing the Chrome inspector and console • Starting a SimpleHTTPServer

10. Opening a project in Sublime Text • http://www.sublimetext.com/ • File  Open on Mac • File  Open Folder on PC • Select the coffee-vis folder • Click Open

11. Website Directory Structure • coffee-vis/ • index.html • coffee-vis/lib/ • d3.v3.js • coffee-vis/js/ • coffee.js • coffee-vis/css/ • coffee-vis/img/

12. Chrome Inspector and Console • Open the webpage • Right-click on anything • Click inspect this element • Click on the >= button at the very bottom to open the console as well • (2nd from the left)

13. Starting a Local Webserver • Unzip the file into your home directory • (the folder named after your username) • Open either a Terminal (Mac) or Command Prompt (Windows) • Type cd coffee-visand press enter • Type python -m SimpleHTTPServer 8000 and press enter • Go to your browser and go to http://localhost:8000

14. How many of you have experience with Javascript?

15. Javascript 101 • All variables are global unless declared using var • x = 300 (global) vs. var x = 300 (local) • Semicolons are completely optional • “text” is the same as ‘text’ • object.key is the same as object[‘key’] • print to the console using console.log( )

16. Javascript 102: Functional Programming • Javascript is a functional language • Functions are themselves objects! • Functions can be stored as variables • Functions can be passed as parameters • D3 uses these abilities extensively!

17. Array.map( ) • Used for applying a function to each element of an array • The function provided takes one parameter (d): • d: a/each data point • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

18. Array.map( ) • varx = [{val:1},{val:2},{val:3},{val:4}] • var a = x.map(function(d){ return d.val; }) • a : [1,2,3,4]

19. MDN • Mozilla Developer Network • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference • (Easier: google <command> mdn)

20. Method Chaining • Programming paradigm where each method returns the object that it was called on • Simply put: group.attr(“x”,5).attr(“y”,5) is the same as group.attr(“x”,5) group.attr(“y”,5)

21. SVG Basics

22. How many of you have experience with SVG?

23. How many have experience with 2D computer graphics (such as Java Swing)?

24. (0,0) y x (width,height)

25. SVG Basics • <svg> • <rect> • <g> • <text> (after I’ve talked about D3)

26. <svg> elements • Overarching canvas • (optional) Attributes: • width • Height • Create with • d3.select(“#vis”).append(“svg:svg”) • (we already did this for you)

27. <rect> elements • Attributes: • width • height • x : (relative to the LEFT of the container) • y : (relative to the TOP of the container) • Create with • .append(“svg:rect”)

28. (0,0) origin y x height width

29. But what if we want to move all the rectangles just a smidge?

30. <g> elements • Generic container (Group) element • Attributes • transform • Create with: • var group = vis.append(“svg:g”) • Add things to the group with: • group.append(“svg:circle”) • group.append(“svg:rect”) • group.append(“svg:text”)

31. Transform Property “transform”, “translate(x,y)”

32. .attr(transform,translate(x,y)) 20 30 translate(30,20)

33. And now D3…

34. D3 • Grand Reductionist Statements • Loading Data • Enter-Update-Exit Paradigm • Classes • Scales • Axes • Extra Credit: Nesting • Where to go from here

35. D3 A really powerful for-loop with a ton of helper functions.

36. D3 • Declarative, domain-specific specification language for visualization. • Translation: • Describe the template for what you want • Let D3 draw it for you

37. Loading Data • d3.csv(fileloc,callback) • (There are others, but this is what you need for the HW) • fileloc: file location • (“data/CoffeeData.csv”) • callback: function(rawdata){ }

38. rawdata from a CSV file [ { ‘name’: ‘Adam’, ‘school’: ‘GT’, ‘age’: ‘18’ }, { ‘name’: ‘Barbara’, ‘school’: ‘Emory’, ‘age’: ’22’ }, { ‘name’: ‘Calvin’, ‘school’: ‘GSU’, ‘age’: ‘30’ } ]

39. Problem rawdata: [ { ‘name’: ‘Adam’, ‘school’: ‘GT’, ‘age’: ‘18’ }, { ‘name’: ‘Barbara’, ‘school’: ‘Emory’, ‘age’: ’22’ }, { ‘name’: ‘Calvin’, ‘school’: ‘GSU’, ‘age’: ‘30’ } ] • Ages are Strings, not ints. • We can fix that: for(var d: rawdata){ d = rawdata[d] d.age = +d.age }

40. Enter-Update-Exit • The most critical facet of how D3 works • If you learn nothing else today, learn the mantra! • “Enter-Update-Exit” “Enter-Update-Exit”

41. Enter-Update-Exit • Pattern: • Select a “group” of “elements” • Assign data to the group • Create new elements for data points that don’t have them yet • Set the attributes of the elements based on the data • Remove elements that don’t have data anymore

42. Hardest part of D3 to wrap your head around: You can select groups of elements that DON’T EXIST YET

43. E-U-E Pattern Template var group = vis.selectAll(“rect”) //or vis.selectAll(“text”) .data(rawdata) //rawdata must be an array! group.enter( ).append(“svg:rect”) //ENTER! .attr( ) .attr( ) group //UPDATE! .attr( ) .attr( ) group.exit( ).remove( ) //EXIT!

44. .enter( ) and .exit( ) • .enter( ) • New data points • .exit( ) • Old data points

45. .enter( ) and .exit( ) • .data( [1,2,3,4] ) • .data ( [1,2,3,4,5,6] ) • .data ( [1,2,3] ) //4,5,6

46. E-U-E Pattern Template var group = vis.selectAll(“rect”) //or vis.selectAll(“text”) .data(rawdata) //rawdata must be an array! group.enter( ).append(“svg:rect”) //ENTER! .attr( ) .attr( ) group //UPDATE! .attr( ) .attr( ) group.exit( ).remove( ) //EXIT!

47. .attr( ) • The Attribute Method • Sets attributes such as x, y, width, height, and fill • The technical details: • rect.attr(“x”, 5) • <rect x=“5”></rect>

48. .attr( ) and Functional Programming • [ {size: 10}, {size: 8}, {size: 12.2} ] • .attr(“height”, function(d,i){ return d.size }) • d: the data point • .attr(“x”, function(d,i){ return i*5; }) • i: the index of the data point <rect height=“10” x=“5”></rect> <rect height=“8” x=“10”></rect> <rect height=“12.2” x=“15”></rect>

49. <text> elements

50. <text> elements • I’m going to apologize in advance here for the lousy job the w3c did with the <text> definition. • You’re going to have to just either memorize these things or keep referring back to http://www.w3c.org/TR/SVG/text.html (first Google hit for “svg text”) like I do.