Diamond Application Development Crafting Solutions with Precision
SVG, CSS3, and D3 for Beginners Guide
1. SVG, CSS3, and D3 for Beginners
Oswald Campesato
Consultant/Training:
www.iquarkt.com
ocampesato@yahoo.com
2. Features of SVG
The SVG <line> Element
The SVG <ellipse> Element
The SVG <rect> Element
The SVG <polygon> Element
The SVG <polyline> Element
The SVG <path> Element
3. Features of SVG
SVG <linearGradient> Element
SVG <radialGradient> Element
SVG <filter> Element
SVG <pattern> Element
SVG <defs> Element
SVG <text> elements (super/sub)
SVG <use> Element
SVG Fonts and WOFF
Custom Glyphs/Unicode
5. SVG Transforms/Animation
The SVG <translate> Transform
The SVG <rotate> Transform
The SVG <scale> Transform
The SVG <skewX> Transform
The SVG <mask> Element
The SVG <clipPath> Element
NB: SMIL is (not?) deprecated in Chrome
6. SVG and Other Technologies
SVG and CSS
SVG and D3
SVG and jQuery
SVG and Angular 2
SVG and PolymerJS
SVG and ReactJS
8. Other Aspects of SVG
SVG elements are inserted in the DOM so you can
track/manage groups of SVG elements
no blurred/jagged edges when zooming in
Convenient format for import/export between tools
Can apply XSL stylesheets to SVG documents
On the other hand:
• Verbose (what do you expect? It’s XML)
• Can be difficult/incomprehensible (SVG tiger)
Animation code can be cumbersome/tedious
Consider D3 instead of “pure” SVG
Blog by Patrick Dengler: SVG versus Canvas
10. Exercise Set One
1) Render an ellipse that is directly below the given ellipse
2) Render an ellipse that is perpendicular to the given ellipse
3) Repeat #1 and #2 for the rectangle
If you have extra time:
4) Create a 2x2 rectangle checkerboard pattern
12. Rendering Cubes (basic code)
<!-- top face (counter clockwise) -->
<polygon fill="red"
points="50,50 200,50 240,30 90,30"/>
<!-- front face -->
<rect width="150" height="150" x="50" y="50"
fill="blue"/>
<!-- right face (counter clockwise) -->
<polygon fill="yellow"
points="200,50 200,200 240,180 240,30"/>
13. Exercise Set Two
1) Create a triangle with <polygon>
2) Create a “diamond” shape with polygons
If you have extra time:
3) Create a regular octagon with a <polygon> element
4) Create a simple “star” shape with <polygon>
16. Exercise Set Three
1) Create a linear gradient with 5 stops colors and display a
rectangle with that linear gradient
2) Create a radial gradient with 5 stop colors and display an
ellipse with that radial gradient
If you have extra time:
3) Display a checkerboard with gradient effects
4) Display a cube with linear and radial gradients
18. Exercise Set Four
1) Apply a scale() transform to an ellipse
2) Apply a skew() transform to an ellipse
3) Apply a rotate() transform to a rectangle
4) Apply a translate() transform to a rectangle
If you have extra time:
5) Apply all transforms to an ellipse
19. Useful Features of SVG (summary)
An XML-based vocabulary for 2D shapes:
render circles/ellipses/elliptic arcs
squares/rectangles/parallelograms
cubic/quadratic Bezier curves
arbitrary polygons
linear/radial gradients and filters
mouse events and animation support (*)
good for charts/graphs
works well with CSS3
(*) consider using D3.js
20. Modular and Scalable CSS (1)
OOCSS: Object Oriented CSS
SMACSS: Scalable and Modular Architecture for
CSS
DRY: Don’t Repeat Yourself CSS
BEM: Block, Element, Modifier
21. Modular and Scalable CSS (2)
#1 and #2 avoid id (prefer class)
all share common goals
they use different approaches
provide general guidelines (not absolute)
try to understand underlying principles
then take the relevant parts
31. What “Works” with CSS3?
Combine these with CSS3 in a Web Page:
SVG and D3 (=Document Driven Data=JS+SVG)
HTML5 Canvas (bitmap and without a DOM)
For Web applications:
jQuery (cross-browser and cross-platform)
BackboneJS (MVP reduces spaghetti code)
AngularJS (open source from Google)
Basically any JavaScript-based toolkit
32. When CSS3 Alone isn’t Enough
CSS3 can leverage the power of SVG:
+ reference SVG documents via “url()”
• SVG can leverage CSS3 by:
+ embedding CSS selectors in an SVG doc
use jQuery methods:
+ the css() method for updating properties
• Use jQuery Mobile features:
+ bindings to handle mouse/touch events
33. Exercise: PNGs with Transforms
Create an HTML5 Web page that:
1) renders three PNGs
2) References a CSS3 stylesheet with:
a) selectors for scale, rotate, and skew
b) hover-based animation effect
34. 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
Make sure to visit this website:
https://github.com/mbostock/d3/wiki/Gallery
35. D3 Functionality
D3 on Mobile Devices
D3 Boilerplate
Method Chaining in D3
The D3 Methods select() and selectAll()
Creating New HTML Elements
The Most Common Idiom in D3 (TMCIID3)
Binding Data to DOM Elements
Generating Text Strings
36. More Features of D3
Bezier Curves and Text
2D Transforms
Scaling Arrays of Numbers
Tweening in D3
Formatting Numbers
Linear/Radial Gradients
Render PNG Files
D3 and Filters
D3 API Reference
37. Why/When use D3?
For data visualization
extremely versatile
leverage JavaScript skills
leverage SVG
Create HTML5 Web pages with D3 and:
HTML5 Canvas, CSS3, SVG, jQuery, …
38. What Can You Do With D3?
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
39. How Does D3 Work?
Creates SVG elements via JavaScript
Often involves “method chaining”:
svg.selectAll()
.attr(a, “b”)
.attr(c,”d”)…
attributes: use constants/variables/functions
select-data-enter-append:
"TMCIID3” ("The Most Common Idiom in D3”)
41. Add SVG Elements: 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
42. Creating a Circle in D3 (1/2)
1) First create an <svg> element:
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height",height);
43. Creating a Circle in D3 (2/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>
44. A Scatter Chart (1/2)
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);
47. 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+")";
})
})
48. Examples of Transforms in D3
yourPreviouslyCreatedSVGElement
.attr("transform", "translate(50,100)")
.attr("transform", "rotate(40)")
.attr("transform", "scale(0.5,1.3)")
.attr("transform", "skewX(20)")
49. Easing Functions (for animation)
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
51. Recent/Upcoming Books and Training
1) HTML5 Canvas and CSS3 Graphics (2013)
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 (2015)
7) Python Pocket Primer (2015)
8) SVG Pocket Primer (2016)
9) CSS3 Pocket Primer (2016)
10) Angular 2 Pocket Primer (2016)