Anand Eng-Thakker anandthakker

Hi Matt and Chris,

As we discussed last week, we've pulled together a bare-bones, pre-beta version of the "state card" component, to give you some time to work on page builder integration before the holidays. Docs and other info are here: http://dohdeick6sqa6.cloudfront.net/assets/alpha/index.html . Much of this is of course quite rough, but it should have enough of the under-the-hood functionality in place to be a good test integration.

Some notes:

The results data is indeed being requested every 30 seconds, but it's just pointing at static dummy data right now. We have dummy data set up for four raceIds: 2016-02-01-IA-16672, 2016-02-01-IA-16957, 2016-02-09-NH-31146, and 2016-02-09-NH-31796 -- that's one for each party for IA and NH.
Please disregard the visuals: i.e., colors are mindlessly auto-generated placeholders, map boundaries are low-precision stubs, etc.

Our thought is that if you're able to get this successfully integrated as a page builder feature, then we'd be able to update

Demonstrates the d3.geo.tile plug-in used in conjunction with the d3.geo.mercator projection to clip MapBox Natural Earth II raster tiles. The outline of the United States is loaded in TopoJSON format.

Zoom	Tile size at equator (km)	Resolution at equator (m)
0	22568	88155
1	11284	44078
2	7656	29904
3	4577	17881
4	2443	9544
5	1244	4861
6	625	2442
7	313	1223


	var tb = require('tilebelt')
	var turf = require('turf')

	var columns = ['Zoom', 'Tile size at equator (km)', 'Resolution at equator (m)']
	console.log(columns.join('\|'))
	console.log(columns.map((c) => c.replace(/./g, '-')).join('\|'))
	for (var z = 0; z < 22; z++) {
	var tile = tb.tileToGeoJSON(tb.pointToTile(0, 0, z));
	var area = turf.area(tile);

	{
	"feature": "word-break",
	"featureData": {
	"title": "CSS3 word-break",
	"caniuseData": {
	"title": "CSS3 word-break",
	"description": "Property to prevent or allow words to be broken over multiple lines between letters.",
	"spec": "http://www.w3.org/TR/css3-text/#word-break",
	"status": "wd",
	"links": [

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title></title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.22.1/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.22.1/mapbox-gl.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title></title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.22.1/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.22.1/mapbox-gl.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title></title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.22.1/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.22.1/mapbox-gl.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }

	#!/usr/bin/env node

	var spawn = require('child_process').spawn
	var argv = require('minimist')(process.argv.slice(2), {
	alias: {
	i: 'ssh-keypath',
	t: 'instance-type',
	r: 'iam-role'
	},
	default: {