Responsive Design for Data Visualization
-
Upload
mika-aldaba -
Category
Data & Analytics
-
view
93 -
download
0
Transcript of Responsive Design for Data Visualization
RESPONSIVE DESIGN
BASICS
STRATEGIES FOR RESPONSIVE DESIGN
1
“Targets a specific experience but makes
allowances for smaller devices” - ZURB
MOBILE LAST GRACEFUL DEGRADATION
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
Don’t design mobile for a specific device
(e.g. iPhone style)
Design for features not for screens
PROTIPS
BREAKPOINTS & MEDIA QUERIES FOR RESPONSIVE DESIGN
2
Browser widths that have a media query
declaration to change the layout once the
browser is within the declared range.
BREAKPOINTS
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ }
STANDARD BREAKPOINT
MOBILE
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ }
STANDARD BREAKPOINT
TABLET
Select custom breakpoints that are more
suitable for the design
PROTIP
CSS PRE-PROCESSORS & FRONT-END FRAMEWORKS
3
Takes code written in the
preprocessed language and then
converts it into standard CSS
CSS PRE-PROCESSOR
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
$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;}
nav { ul { margin: 0; padding: 0; list-style: none; }
li { display: inline-block; }
a { display: block; padding: 6px 12px; text-decoration: none; }}
SASS CSSnav ul { margin: 0; padding: 0; list-style: none;}
nav li { display: inline-block;}
nav a { display: block; padding: 6px 12px; text-decoration: none;}
// _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;}
@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);}
A collection of production ready HTML/CSS/
JavaScript components that can be further
modified to suit custom projects
FRONT-END FRAMEWORK
quick and easy
tested
PROS
hard to customize
sometimes
updating can break
your design
CONS
http://getbootstrap.com/
BOOTSTRAP USING LESS/SASS
http://foundation.zurb.com/
FOUNDATION USING SASS
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>
RESPONSIVE DESIGN FOR DATA VISUALIZATION
4
https://blog.safaribooksonline.com/2014/02/17/
building-responsible-visualizations-d3-js/
USING VIEWBOX FOR SVG
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/
Size and scale SVG
elements based on their
containers.
Don’t hardcode your sizes!
Use variables instead to make scaling easier.
PROTIP
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
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
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
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
Resize when the window
size changes.
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()
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
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
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
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
FRAMEWORKS FOR D3.JS
5
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/
GABRIEL FLORIT ON RESPONSIVE DESIGN & DATA VISUALIZATION
6
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