Responsive Design And Dataviz – Tyler Machado, hbr.org

View Github Repository Open presentation in a new window

tylermachado

See all presentation from tylermachado

Responsive Design And Dataviz – Tyler Machado, hbr.org

0 0

responsive-design-and-dataviz

A presentation about making dataviz graphics play nicely with responsive sites. Presented at CASCADE BOS in June 2016.

On Github tylermachado / responsive-design-and-dataviz

Responsive Design And Dataviz

Tyler Machado, hbr.org

@tylermachado / tylermachado.com
hey what's up i'm the editorial web dev at HBR work on interactives and dataviz with our editors

principles of mobile dataviz

  • limited real estate
  • vertical orientation
  • touch/hover events are difficult
there's no good or bad, just context
original prototype by Scott was dense, horizontal layout brainstormed with designers for ideas sketch by Laura: square design fits nicely into any size

(print version)

it actually works here! you could imagine a video as well
started with line, sketched out heatmap takes advantage of vertical scroll annotations don't hide info re-renders on width -- more effort to implement
subtle differences to account for space ai2html
radically different chart type
streamlines the necessary info
small multiples on desktop animated GIFs on mobile

AI2HTML

developed by New York Times turns Illustrator documents into HTML and CSS includes custom script for responsiveness

Pym.js

Javascript library developed by NPR make iframes responsive

Javascript : D3.js

function render() {
	d3.select("#chartcontainer").selectAll("*").remove();
	width = window.innerWidth;
	console.log(window.innerWidth);
	if (window.innerWidth > 768) {
		drawLineChart();
		pymChild.sendHeight();
	} else {
		drawHeatmap();
		pymChild.sendHeight();
	}
}

render();

window.onresize = render;

thanks, here's a chill dog pic