Saman Bemel-Benrud samanpwbb

Jeff -

Here are the wires we'll walk you through today.

You'll see we are planning on less maps than expected and do dynamic stack graphs instead. We found this approach to be much better suited as it naturally gives an impression of the situation in the entire US. Animations between graphs will allow for nice comparability between facets. More about that in our meeting at 1 PM today.

This change affects scope but we can still make it work within the budget by just moving the $10,000.- we had allocated for maps and to doing stack graphs. We are planning to still have some maps on the site - on state profiles. We'll use them to situate the state and give a way to laterally browse the site by clicking from neighbor state to neighbor state. Again here: we'll talk more about this in our meeting today.

We call these deliverables "wires" because they talk about communications goals, broad functionality and rough space usage. They do not suggest specific colors, fonts, imagery or icons - we will work on these it

state cubes: hover = display tooltip w/ state name, click= highlight selected state
title/details in location viz: hover = color highlight over title, click for dropdown
policy rankings labels: hover=subtle highlight, click to reveal definition on top of visualization + link to methodology page.
grade level key: hover= hide other grade levels besides selected grade level. This could be clickable to show only one grade type at a time
global button hover states= double the white, slight change to background color.

Website

(John F) Make map more central to the web design
(John F) Bring in more map tools, like openstreetbugs

Toggle between two versions, with clear purposes: 1) big map (default if not logged in). 2) activity feed (default if logged in).

Exporting / Extracting:

Tools for taking / reusing OSM data and maps (everything from shapefiles to vector shapes)

	undefined:1
	n.shp.xml

	SyntaxError: Unexpected token ILLEGAL
	at Object.parse (native)
	at Object.handleMessage (/Users/saman/tilemill/lib/node/worker.js:140:20)
	at Object.handleData (/Users/saman/tilemill/lib/node/worker.js:121:18)
	at Stream.<anonymous> (/Users/saman/tilemill/lib/node/worker.js:68:10)
	at Stream.emit (events:31:17)
	at IOWatcher.callback (net:489:16)

	Hi Team,

	We've had a great couple weeks building out the site. After sign-off on the mockups we started on the task of iteratively adapting the creative into the build and we are now at a good resting place to show off the site. Staging is here. Have a look and let me touch on some key components of the build and walk through our process.
	Overall


	We wanted the site to be highly indexable and fast. The exact parameters of the visualizations on the state profile and explore sections are linkable. Should a user want to send a link that targets a particular indicator and year, the URL will automatically reflect those configurations.

	** Frontpage

	.btn {
	display: inline-block;
	*display: inline;
	padding: 4px 14px;
	margin-bottom: 0;
	*margin-left: .3em;
	font-size: 14px;
	line-height: 20px;
	*line-height: 20px;
	color: #333333;

	<!DOCTYPE html>
	<html>
	<head>
	<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.5/mapbox.js'></script>
	<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.5/mapbox.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>

	var locked = true,
	b = $('.branding');

	var fadeOut = setInterval(function() {
	if (!locked) b.removeClass('visible');
	}, 3000); // Change the 3000 value to your liking.

	$('body').mousemove(function() {
	locked = false;
	clearInterval(fadeOut);

	$('body').mousemove(function() {
	$('.branding').addClass('visible');
	});