Introduction to Multilingual Retrieval Augmented Generation (RAG)
SVCC 2013 D3.js Presentation (10/05/2013)
1. D3 for Data Visualization on
Desktops, Smart Phones, and
Google Glass
SVCC (10/05/2013)
Foothill College Los Altos
Oswald Campesato
oswald@swiftbot.com
ocampesato@yahoo.com
2. Pace and Sequence of Topics
This session moves quickly
Focus is primarily on demos
topics are discussed based on their
relevance in demos (i.e., not
necessarily sequential)
Some code will be made available
later
5. How/Where do the Demos Work?
All demos work on desktop/laptops:
launched as HTML5 Web pages
Demos created as Android apks work on:
mobile phones, tablets, and Google Glass
• Android apks can be created via:
Eclipse/PhoneGap/Android Studio/other
6. What is D3?
open source project (2010)
Mike Bostock (principal/creator)
based on JavaScript
a layer of "abstraction" over SVG
also support for HTML5 Canvas
github.com/mbostock/d3
https://github.com/mbostock/d3/wiki/
Gallery
7. Why/When use D3?
data visualization
extremely versatile
leverage JavaScript skills
leverage SVG
Create HTML5 Web pages with D3 and:
HTML5 Canvas, CSS3, SVG, jQuery, …
8. What Can D3 Do?
All the stuff you can do in SVG
graphics/animation
filters/gradients
mouse/keyboard events
custom charts/graphs
Support for Ajax, JSON, XML, CSV files
9. How Does D3 Work?
Creates SVG elements via JavaScript
Often involves “method chaining”:
svg.selectAll()
.attr(a, “b”)
.attr(c,”d”)…
select-data-enter-append:
"TMCIID3” ("The Most Common Idiom in D3”)
11. Adding SVG: General Approach
#1: create/append an <svg> element to <body>
#2: often define JavaScript array(s) of values
#3: iterate through arrays create SVG elements:
use constants/variables/anonymous functions
Optional:
#4: add event listener(s)
#5: add animation-related code
12. Creating a Circle in D3 (part 1)
1) First create an <svg> element:
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height",height);
13. Creating a Circle in D3 (part 2)
2) Include the following D3 code:
svg.append("circle")
.attr("cx", 10)
.attr("cy", 10)
.attr("r", 100)
.attr("fill", "red")
D3 code generates this SVG element:
<body>
<circle cx="10" cy="10” r="100" fill="red" />
</body>
14. A Scatter Chart (part 1)
Step #1 define a JS array with data values:
var dataXValues=[10, 50, 20, 80,150,180,220];
Step #2 Create an SVG element:
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
18. Mouse Handler for ScatterChart
circles.on("mouseover",function() {
d3.select(this) // the “mouseover” circle
.transition()
.duration(duration)
.attr("transform", function() {
var sx = 1+Math.random();
var sy = 1-Math.random();
return "scale("+sx+","+sy+")";
})
})
19. Examples of Transforms in D3
yourPreviouslyCreatedElement
.attr("transform", "translate(50,100)")
.attr("transform", "rotate(40)")
.attr("transform", "scale(0.5,1.3)")
.attr("transform", "skewX(20)")
20. Easing Functions (Animation Effects)
Create an SVG element and append this code:
.on("mouseover",function(){
.duration(1000)
.delay(200)
.ease("out-elastic",1,1)
})
At least 10 easing functions available
21. Bar Charts in D3
Scale horizontal/vertical values
Various label types (numeric/date) for axes
Unicode support
Add mouse events to „bar‟ elements
22. D3 and SVG Filters
Define an SVG <filter> element (in <defs>):
<defs>
…
<filter id="blurFilter1”>
<feGaussianBlur "stdDeviation"=4>
</feGaussianBlur>
</filter>
…
</defs>
23. How to Define Filters in D3
var defs = svg.append("defs")
defs.append("svg:filter")
.attr("id", "blurFilter1")
.append("svg:feGaussianBlur")
.attr("stdDeviation", 4);
The preceding code is equivalent to this code:
<filter id="blurFilter1”>
<feGaussianBlur "stdDeviation"=4 />
</filter>
24. D3 and SVG Linear Gradients
Insert this code in an SVG <defs> element:
<linearGradient id="GradientL"
gradientUnits="userSpaceOnUse"
cx="100" cy="50" r="160"
fx="100" fy="50">
<stop offset="0%" stop-color="red"/>
<stop offset="33%" stop-color="blue"/>
<stop offset="67%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
29. D3 and CSV Files
Read data from a CSV file (1,000 rows)
Each row represents a line segment
Add a mouseover event listener
Append line coordinates to a second
array when users „mouse over‟ that
segment
Works fine for up to 4,000 rows
30. What about Large Datasets?
Superconductor.js:
DSL/JS/Web Workers
Uses a <canvas> element
“browser in a browser”
Smoothly handles 100K data points
• Druid (Metamarkets)
• Weave/Yarn (Apache): layer over Hadoop
• Kafka, Storm, and D3 (more recent)
31. D3 and Other Technologies
D3 and BackboneJS in one Web page
D3 and AngularJS in one Web Page
Use D3 with HTML5 Web Sockets
D3 with NodeJS (and Meteor)
32. D3 and CSS3
CSS3 2D transforms:
rotate, scale, skew, translate, matrix, and
perspective
• CSS3 3D transforms:
Similar to 2D versions (but no „skew‟)
Also three axis-specific methods:
rotateX, rotateY, rotateZ
• More details in next session
33. Spherical Coordinates
(1) x = w*cos(a); y = w*sin(a);
(2) z = r*sin(b);
(3) w = r*cos(b);
Substitute (3) into (1) to get:
(4) x = r*cos(b)*cos(a);
(5) y = r*sin(b)*sin(a);
(6) z = r*cos(b);
34. D3 and Android
1) Create an Android application Test
2) modify $TOP/res/layout/activity_main.xml:
insert a WebView component
3) create $TOP/assets/www
4) copy TestD3.html into $TOP/assets/www
5) modify src/com/Test.java:
reference TestD3.html in onCreate()
36. Contents of onCreate() Method
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Your new code goes here:
mWebView = (WebView) findViewById(R.id.webview);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setDomStorageEnabled(true);
mWebView.loadUrl(
"file:///android_asset/www/Test3D.html");
37. What is PhoneGap?
A Plugin to create Hybrid Mobile apps
Available on 6 platforms
A JavaScript “bridge”
Access to hardware (camera/etc)
No compilation required
No Java/Objective-C code
Handles the manual steps for you
Creates an index.html Web page
38. Why use PhoneGap?
No compilation required
No Java/Objective-C code
Handles the manual steps for you
Provides access to hardware (camera/etc)
39. D3 and Google Glass
Create an Android apk in Eclipse
Deploy to Glass:
adb install D3Demo.apk
• Find the package and main Android Activity:
Let‟s call them “a.b.c” and “D3Main”
* Launch from the command line:
adb shell am start -a android.intent.action.MAIN
-n a.b.c/.D3Demo
42. Open Source Projects
• Graphics Projects on http://code.google.com/p:
+ css3-graphics and html5-canvas-graphics
+ css3-jquery-graphics and d3-graphics
+ svg-graphics and svg-filters-graphics
+ easel-graphics, fabric-graphics, paper-graphics
+ ThreeJS, jQuery, Raphael, Google Go, Android
+ Dart, Dojo, JSF, Two.js, JavaFX 2.0
+ Lua, PHP, Perl, Python, Ruby, SWT graphics
43. Some Training Topics
• D3/SVG
• HTML5 (CSS3/Canvas/etc)
jQuery/jQuery Mobile
Android (iOS later)
BackboneJS/PhoneGap
44. Recent/Upcoming Books
1) HTML5 Canvas and CSS3 Graphics (2012)
2) jQuery, CSS3, and HTML5 for Mobile (2013)
3) HTML5 Pocket Primer (2013)
4) jQuery Pocket Primer (2013)
5) HTML5 Mobile Pocket Primer (2014)
6) D3 Pocket Primer (2014)
• “WebGL: Up and Running” (Tony Parisi)
Co-creator of VRML and X3D