visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/s04 - d3 –...
TRANSCRIPT
![Page 1: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/1.jpg)
D3 – getting started
Visweek d3 workshop
![Page 2: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/2.jpg)
What you need
• A text editor, • The d3 library, • Files for your code, • Recommended: a web server, • A browser.
![Page 3: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/3.jpg)
A text editor
• There are a few options out there: textMate, eclipse / aptana, sublime text 2…
• What you really need is an editor with syntax highlighting. Constructs with d3 can become very intricate.
• Personally, I like sublime text 2.
![Page 4: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/4.jpg)
![Page 5: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/5.jpg)
Files you need
• The d3 library : get it at http://d3js.org • Or link to it: http://d3js.org/d3. v2.min.js
![Page 6: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/6.jpg)
A template for d3 <!DOCTYPE html> <html>
<head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>My project</title> <script type="text/javascript" src="../d3.v2.js"></script> <link href="style.css" rel="stylesheet">
</head> <body>
<div id="chart"></div> <script type="text/javascript" src="script.js"></script>
</body> </html>
![Page 7: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/7.jpg)
A template for d3
<!DOCTYPE html> Start by specifying the doctype, to be in HTML5 mode (less suprises).
![Page 8: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/8.jpg)
A template for d3
<!DOCTYPE html> <html> </html>
An HTML tag is not required, but makes things more legible for people.
![Page 9: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/9.jpg)
A template for d3
<!DOCTYPE html> <html>
<head> </head> <body> </body>
</html> Likewise, head and body tags are not required, but make things easier to read.
![Page 10: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/10.jpg)
A template for d3
<!DOCTYPE html> <html>
<head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head> <body> </body>
</html> It's better to specify a content type, this will allow you to use non-ascii characters with confidence.
![Page 11: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/11.jpg)
A template for d3
<!DOCTYPE html> <html>
<head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>My project</title>
</head> <body> </body>
</html> You may name your project here.
![Page 12: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/12.jpg)
A template for d3
<!DOCTYPE html> <html>
<head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>My project</title> <script type="text/javascript" src="../d3.v2.js"></script>
</head> <body> </body>
</html> That's where you link to the d3 library. Here I am assuming it is in a folder one level up from the code. Alternatively, you can use http://d3js.org/d3.v2.min.js.
![Page 13: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/13.jpg)
A template for d3
<!DOCTYPE html> <html>
<head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>My project</title> <script type="text/javascript" src="../d3.v2.js"></script> <link href="style.css" rel="stylesheet">
</head> <body> </body>
</html> Optionally, you can link to a stylesheet like so. Or specify style inside a <style> element here.
![Page 14: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/14.jpg)
<!DOCTYPE html> <html>
<head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>My project</title> <script type="text/javascript" src="../d3.v2.js"></script> <link href="style.css" rel="stylesheet">
</head> <body>
<div id="chart"></div> </body>
</html> Inside the body, we create a <div> element which will hold the vis.
![Page 15: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/15.jpg)
<!DOCTYPE html> <html>
<head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>My project</title> <script type="text/javascript" src="../d3.v2.js"></script> <link href="style.css" rel="stylesheet">
</head> <body>
<div id="chart"></div> <script type="text/javascript" src="script.js"></script>
</body> </html> Finally, we link to a script file containing our actual javascript code. Alternatively, we may write our code here inside a <script> element.
![Page 16: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/16.jpg)
A template for d3 <!DOCTYPE html> <html>
<head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>My project</title> <script type="text/javascript" src="../d3.v2.js"></script> <link href="style.css" rel="stylesheet">
</head> <body>
<div id="chart"></div> <script type="text/javascript" src="script.js"></script>
</body> </html>
![Page 17: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/17.jpg)
Now let's look at a sample js file.
var w=960,h=500; var svg=d3.select("#chart")
.append("svg") .attr("width",w).attr("height",h);
svg .append("text") .text("hello world!").attr("x",100).attr("y",100);
![Page 18: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/18.jpg)
Now let's look at a sample js file.
var w=960,h=500; Simple variables to size the vis. Those numbers are chosen because they work well with Mike Bostock's http://bl.ocks.org, a simple viewer for code examples hosted on GitHub Gist.
![Page 19: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/19.jpg)
Now let's look at a sample js file.
var w=960,h=500; var svg=d3.select("#chart") Now we are going to create an SVG container. It will be a child of the div named #chart, which we created earlier.
![Page 20: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/20.jpg)
Now let's look at a sample js file.
var w=960,h=500; var svg=d3.select("#chart")
.append("svg") This creates the svg element per se.
![Page 21: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/21.jpg)
Now let's look at a sample js file.
var w=960,h=500; var svg=d3.select("#chart")
.append("svg") .attr("width",w).attr("height",h);
And this last line gives an explicit width and height to the svg element. This is desired in Firefox (in chrome/safari, the svg just resizes as needed) and generally more proper.
![Page 22: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/22.jpg)
Now let's look at a sample js file.
var w=960,h=500; var svg=d3.select("#chart")
.append("svg") .attr("width",w).attr("height",h);
svg .append("text")
Now that we have an SVG container, we can just add any kind of SVG element to it. So let's start with text.
![Page 23: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/23.jpg)
Now let's look at a sample js file.
var w=960,h=500; var svg=d3.select("#chart")
.append("svg") .attr("width",w).attr("height",h);
svg .append("text") .text("hello world!").attr("x",100).attr("y",100);
This last line specifies characteristics of the element we've just added.
![Page 24: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/24.jpg)
A sample js file.
var w=960,h=500; var svg=d3.select("#chart")
.append("svg") .attr("width",w).attr("height",h);
svg .append("text") .text("hello world!").attr("x",100).attr("y",100);
![Page 25: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/25.jpg)
Lo and behold:
![Page 26: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/26.jpg)
A web server
• You can view most d3 visualizations locally, simply by opening an html file in a browser.
• But if your visualization is reading data from files or from a database (XMLHttpRequest), then you need to publish it on a web server to test it.
• There are many options: EasyPHP (windows), Mac OS X Server, MAMP (Mac OS X)
![Page 27: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/27.jpg)
![Page 28: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/28.jpg)
![Page 29: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/29.jpg)
Finally, a browser
![Page 30: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/30.jpg)
The console
D3-capable browsers come with a "console" that helps tremendously in web development. Chrome: Ctrl+j (⌥ ⌘+j Mac) Firefox: Ctrl+Shift+k (⌥ ⌘+k Mac) Safari: Ctrl+Alt+c (⌥ ⌘+c Mac)
![Page 31: Visweek d3 workshop - jeromecukier.netjeromecukier.net/presentations/d3-tutorial/S04 - D3 – getting... · Visweek d3 workshop . ... desired in Firefox (in chrome/safari, the svg](https://reader031.vdocuments.net/reader031/viewer/2022022509/5ad42d6f7f8b9a177c8b5856/html5/thumbnails/31.jpg)
The console
D3-capable browsers come with a "console" that helps tremendously in web development. Chrome: Ctrl+j (⌥ ⌘+j Mac) Firefox: Ctrl+Shift+k (⌥ ⌘+k Mac) Safari: Ctrl+Alt+c (⌥ ⌘+c Mac)
Among other things, the console lets you see the value of variables, and let you enter some commands directly, without having to put them in a file.
3 0lagerdelar d3 0l9 8 d3 0l11 8 d3 0l13 8 d3 0l15 8 d3 0l17 8 d3 0l19 8 d3 0l21 8 d3 0l23 8 d3 0l25
3 5rollering units d3 5l11 8 d3 5l13 8 d3 5l15 8 d3 5l17 8 d3 5l19 8 d3 5l21 8 d3 5l23 8 d3 5l25 8 d