Guest Lecture for the Data Visualization class at Ateneo de Manila University

1. RESPONSIVE
DESIGN
BASICS

2. STRATEGIES
FOR RESPONSIVE DESIGN
1

3. “Targets a specific experience but makes
allowances for smaller devices” - ZURB
MOBILE LAST
GRACEFUL DEGRADATION

4. Start your design with a single column layout.
One column forces you to focus only on the
most essential goals of your project.
Consider the mobile context when deciding
which features to include and exclude.
MOBILE FIRST
PROGRESSIVE ENHANCEMENT

5. Don’t design mobile for a specific device
(e.g. iPhone style)
Design for features not for screens
PROTIPS

6. BREAKPOINTS &
MEDIA QUERIES
FOR RESPONSIVE DESIGN
2

7. Browser widths that have a media query
declaration to change the layout once the
browser is within the declared range.
BREAKPOINTS

8. @media only screen and (min-device-width :
320px) and (max-device-width : 480px) {
/* Styles */
}
STANDARD BREAKPOINT
MOBILE

9. @media only screen and (min-device-width :
768px) and (max-device-width : 1024px) {
/* Styles */
}
STANDARD BREAKPOINT
TABLET

10. Select custom breakpoints that are more
suitable for the design
PROTIP

11. CSS PRE-
PROCESSORS
& FRONT-END
FRAMEWORKS
3

12. Takes code written in the
preprocessed language and then
converts it into standard CSS
CSS PRE-PROCESSOR

13. It saves a lot of time because it makes your
CSS easier to maintain.
It allows you to write less redundant code
by using variables and functions.
WHY TO USE ONE

14. Syntactically Awesome Stylesheets
http://sass-lang.com

15. $font-stack: Helvetica,
sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
SASS CSS
body {
font: 100% Helvetica,
sans-serif;
color: #333;
}

16. nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
SASS CSS
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}

17. // _reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
SASS CSS
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font: 100% Helvetica, sans-
serif;
background-color: #efefef;
}
/* base.scss */
@import 'reset';
body {
font: 100% Helvetica, sans-
serif;
background-color: #efefef;
}

18. Leaner CSS
http://lesscss.org/

19. @base: #f938ab;
.box-shadow(@style, @c) when
(iscolor(@c)) {
-webkit-box-shadow: @style @c;
box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%)
when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0,
0, @alpha));
}
.box {
color: saturate(@base, 5%);
border-color: lighten(@base,
30%);
div { .box-shadow(0 0 5px,
30%) }
}
LESS CSS
.box {
color: #fe33ac;
border-color: #fdcdea;
}
.box div {
-webkit-box-shadow: 0
0 5px rgba(0, 0, 0,
0.3);
box-shadow: 0 0 5px
rgba(0, 0, 0, 0.3);
}

20. A collection of production ready HTML/CSS/
JavaScript components that can be further
modified to suit custom projects
FRONT-END FRAMEWORK

21. quick and easy
tested
PROS
hard to customize
sometimes
updating can break
your design
CONS

22. http://getbootstrap.com/
BOOTSTRAP
USING LESS/SASS

23. http://foundation.zurb.com/
FOUNDATION
USING SASS

24. BOOTSTRAP FOUNDATION
<!-- Foundation Grid Syntax -->
<div class="row">
<div class="six columns">
<p>Lorem ipsum...</p>
</div>
<div class="six columns">
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Bootstrap Grid Syntax -->
<div class="row">
<div class="span6">
<p>Lorem ipsum...</p>
</div>
<div class="span6">
<p>Lorem ipsum...</p>
</div>
</div>

25. RESPONSIVE DESIGN
FOR DATA VISUALIZATION
4

26. https://blog.safaribooksonline.com/2014/02/17/
building-responsible-visualizations-d3-js/
USING VIEWBOX FOR SVG

27. http://eyeseast.github.io/visible-data/
2013/08/26/responsive-d3/
USING JAVASCRIPT
http://eyeseast.github.io/visible-data/
2013/08/27/responsive-legends-with-d3/

29. Size and scale SVG
elements based on their
containers.

30. Don’t hardcode your sizes!
Use variables instead to make scaling easier.
PROTIP

31. var margin = {top: 10, left: 10, bottom: 10, right: 10}
, width = parseInt(d3.select('#map').style('width'))
, width = width - margin.left - margin.right
, mapRatio = .5
, height = width * mapRatio;
This gets the container width of the graph
In this case #map is the container div

32. var margin = {top: 10, left: 10, bottom: 10, right: 10}
, width = parseInt(d3.select('#map').style('width'))
, width = width - margin.left - margin.right
, mapRatio = .5
, height = width * mapRatio;
Remove the margin size from the width

33. var margin = {top: 10, left: 10, bottom: 10, right: 10}
, width = parseInt(d3.select('#map').style('width'))
, width = width - margin.left - margin.right
, mapRatio = .5
, height = width * mapRatio;
Adjust the height relative to the size of the width

34. var projection = d3.geo.albersUsa()
.scale(width)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
Use the width variable to set the scale

35. Resize when the window
size changes.

36. d3.select(window).on('resize', resize);
function resize() {
width = parseInt(d3.select('#map').style('width'));
width = width - margin.left - margin.right;
height = width * mapRatio;
projection
.translate([width / 2, height / 2])
.scale(width);
map
.style('width', width + 'px')
.style('height', height + 'px');
map.select('.land').attr('d', path);
map.selectAll('.state').attr('d', path);
}
Catch the window resize event and call resize()

37. d3.select(window).on('resize', resize);
function resize() {
width = parseInt(d3.select('#map').style('width'));
width = width - margin.left - margin.right;
height = width * mapRatio;
projection
.translate([width / 2, height / 2])
.scale(width);
map
.style('width', width + 'px')
.style('height', height + 'px');
map.select('.land').attr('d', path);
map.selectAll('.state').attr('d', path);
}
Adjust things when the window size changes

38. d3.select(window).on('resize', resize);
function resize() {
width = parseInt(d3.select('#map').style('width'));
width = width - margin.left - margin.right;
height = width * mapRatio;
projection
.translate([width / 2, height / 2])
.scale(width);
map
.style('width', width + 'px')
.style('height', height + 'px');
map.select('.land').attr('d', path);
map.selectAll('.state').attr('d', path);
}
Update the projection

39. d3.select(window).on('resize', resize);
function resize() {
width = parseInt(d3.select('#map').style('width'));
width = width - margin.left - margin.right;
height = width * mapRatio;
projection
.translate([width / 2, height / 2])
.scale(width);
map
.style('width', width + 'px')
.style('height', height + 'px');
map.select('.land').attr('d', path);
map.selectAll('.state').attr('d', path);
}
Resize the map container div

40. d3.select(window).on('resize', resize);
function resize() {
width = parseInt(d3.select('#map').style('width'));
width = width - margin.left - margin.right;
height = width * mapRatio;
projection
.translate([width / 2, height / 2])
.scale(width);
map
.style('width', width + 'px')
.style('height', height + 'px');
map.select('.land').attr('d', path);
map.selectAll('.state').attr('d', path);
}
Redraw the map graph

42. FRAMEWORKS
FOR D3.JS
5

43. d3.chart is a small framework that allows one to
define reusable charts that are repeatable,
configurable, extensible and composable
http://misoproject.com/d3-chart/

44. http://nvd3.org/
NVD3

45. http://c3js.org/
C3JS

46. http://dimplejs.org
DIMPLE

47. GABRIEL FLORIT
ON RESPONSIVE DESIGN & DATA
VISUALIZATION
6

48. Gabriel Florit creates data visualizations at the Boston
Globe, and gave a talk about the surprising difficulties of
bringing the principles of responsive design to data viz at
the OpenVis Conference.
https://www.youtube.com/watch?v=BrmwjVdaxMM