D3: The Crash Course D3: Scratching the Surface D3: What you need - PDF document

9/17/13 ¡ D3: The Crash Course D3: Scratching the Surface D3: What you need for the Homework D3: Only the Beginning 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) Please do not be afraid to ask questions! 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 1 ¡

9/17/13 ¡ The Applications I Recommend § Workspace Setup § Website Directory Structure § Text Editor: Sublime Text 2 § Javascript 101-2 § Browser: Chrome § SVG Basics § Super-Basic Webserver: Python § D3.js Crash Course Opening a project in Sublime Text § http://www.sublimetext.com/ § Opening the project in Sublime Text § File à Open on Mac § Accessing the Chrome inspector and console § File à Open Folder on PC § Starting a SimpleHTTPServer § Select the coffee-vis folder § Click Open Website Directory Structure Chrome Inspector and Console § coffee-vis/ § Open the webpage • index.html § Right-click on anything § coffee-vis/lib/ • d3.v3.js § Click inspect this element § coffee-vis/js/ • coffee.js § Click on the >= button at the very bottom to open the console as well § coffee-vis/css/ • (2 nd from the left) § coffee-vis/img/ 2 ¡

9/17/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) How many of you have experience with § Type cd coffee-vis and press enter Javascript? § Type python -m SimpleHTTPServer 8000 and press enter § Go to your browser and go to http://localhost:8000 Javascript 101 Javascript 102: Functional Programming § All variables are global unless declared using var § Javascript is a functional language functional language • x = 300 (global) vs. var x = 300 (local) § Semicolons are completely optional § Functions are themselves objects! § “text” is the same as ‘text’ § Functions can be stored as variables § JS arrays and objects are almost exactly the § Functions can be passed as parameters same syntax as python’s lists and dicts § object.key is the same as object[‘key’] § D3 uses these abilities extensively! § Print to the console using console.log( ) Array.map( ) Array.map( ) § Used for applying a function to each element of an array § var x = [{val:1},{val:2},{val:3},{val:4}] § var a = x.map(function(d){ return d.val; § The function provided takes one }) parameter (d): • d: a/each data point § a : [1,2,3,4] § https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ Global_Objects/Array/map 3 ¡

9/17/13 ¡ MDN Method Chaining § Mozilla Developer Network § Programming paradigm where each method returns the object that it was called on § https://developer.mozilla.org/en-US/ § Simply put: docs/Web/JavaScript/Reference group.attr(“x”,5).attr(“y”,5) is the same as group.attr(“x”,5) § (Easier: google <command> mdn) group.attr(“y”,5) How many of you have experience with SVG? SVG BASICS SVG BASICS (0,0) y How many have experience with 2D x computer graphics (such as Java Swing)? (width,height) 4 ¡

9/17/13 ¡ SVG Basics <svg> elements § Overarching canvas § <svg> § <rect> § (optional) Attributes: • width § <g> • Height § Create with § <text> (after I’ve talked about D3) • d3.select(“#vis”).append(“svg:svg”) • (we already did this for you) <circle> elements <rect> elements § Attributes: § Attributes: • cx (relative to the LEFT of the container) • width • cy (relative to the TOP of the container) • height • r (radius) • x : (relative to the LEFT of the container) § (optional) Attributes: • y : (relative to the TOP of the container) • fill (color) • stroke (the width of the stroke) • stroke-fill (the color of the stroke) § Create with § Create with • .append(“svg:rect”) • .append(“svg:circle”) (0,0) origin y x height But what if we want to move all the rectangles just a smidge? width 5 ¡

9/17/13 ¡ <g> elements Transform Property § Generic container (Group) element Attributes § • transform “transform”, “translate(x,y)” 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”) .attr(“transform”,“translate(x,y)”) 20 30 translate(30,20) AND NOW D3… AND NOW D3… D3 D3 § Grand Reductionist Statements Loading Data § § Enter-Update-Exit Paradigm § Classes A really powerful for-loop with a ton of Scales § helper functions. § Axes § Extra Credit: Nesting § Where to go from here 6 ¡

9/17/13 ¡ D3 Loading Data § d3.csv(fileloc,callback) § Declarative, domain-specific • (There are others, but this is what you need specification language for visualization. for the HW) § Translation: § fileloc: file location • Describe the template for what you want • (“data/CoffeeData.csv”) • Let D3 draw it for you § callback: function(rawdata){ } rawdata from a CSV file Problem [ name school age rawdata: [ { { Adam GT 18 ‘name’: ‘Adam’, ‘name’: ‘Adam’, Barbara Emory 22 ‘school’: ‘GT’, ‘school’: ‘GT’, ‘age’: ‘18’ Calvin GSU 30 ‘age’: ‘18’ Ages are Strings, not ints. § }, }, § We can fix that: { { ‘name’: ‘Barbara’, ‘name’: ‘Barbara’, ‘school’: ‘Emory’, ‘school’: ‘Emory’, ‘age’: ’22’ for(var d: rawdata){ ‘age’: ’22’ }, d = rawdata[d] }, { d.age = +d.age { } ‘name’: ‘Calvin’, ‘name’: ‘Calvin’, ‘school’: ‘GSU’, ‘school’: ‘GSU’, ‘age’: ‘30’ ‘age’: ‘30’ } } ] ] Enter-Update-Exit Enter-Update-Exit § Pattern: § The most critical facet of how D3 works • Select a “group” of “elements” • Assign data to the group • Create new elements for data points that don’t have them yet § If you learn nothing else today, learn the • Set the attributes of the elements based on mantra! the data § “Enter-Update-Exit” “Enter-Update-Exit” • Remove elements that don’t have data anymore 7 ¡

9/17/13 ¡ 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! Hardest part of D3 to wrap your head .attr( ) around: .attr( ) You can select groups of elements that group //UPDATE! DON’T EXIST YET .attr( ) .attr( ) group.exit( ).remove( ) //EXIT! .enter( ) and .exit( ) .enter( ) and .exit( ) § .data( [1,2,3,4] ) § .enter( ) • New data points § .data ( [1,2,3,4,5,6] ) § .data ( [1,2,3] ) //4,5,6 § .exit( ) • Old data points E-U-E Pattern Template .attr( ) var group = vis.selectAll(“rect”) //or vis.selectAll(“text”) § The Attribute Method .data(rawdata) //rawdata must be an array! group.enter( ).append(“svg:rect”) //ENTER! § Sets attributes such as x, y, width, .attr( ) height, and fill .attr( ) group //UPDATE! .attr( ) § The technical details: .attr( ) • rect.attr(“x”, 5) • <rect x=“5”></rect> group.exit( ).remove( ) //EXIT! 8 ¡

9/17/13 ¡ .attr( ) and Functional Programming <text> elements § [ {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> <text> elements <text> elements § Extra Method in D3 § I’m going to apologize in advance here • .text(“Your Text Goes Here”) for the lousy job the w3c did with the <text> definition. § Attributes • x § You’re going to have to just either • y memorize these things or keep referring § Styles back to • text-anchor: start, middle, end http://www.w3c.org/TR/SVG/text.html • dominant-baseline: [nothing], hanging, (first Google hit for “svg text”) like I do. middle text-anchor style dominant-baseline style Where is (0,0)? Where is (0,0)? This is my line of text. hanging This is my line of text. middle default middle end start 9 ¡