index.html

---
layout: default
style: home
---

<article class="hero-container">
	<div id="hero-video">
      <!-- Video Partial -->
      <video id="video" class="video"  preload="auto" autoplay loop muted>
      	<source src="/hero2.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.vi40.2">
      	<source src="/hero2.mp4" type="video/webm; codecs=vp8,vorbis">
      	<source src="/hero2.ogv" type="video/ogg">
      </video>
      <![if !IE]>
      <!-- <video id="video" class="ta-video video" preload="auto" autoplay muted>
          <source src="/hero.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
      </video> -->
      <![endif]>
      <div class="overlay"></div>

	<div class="tag-container">
		<h2>From data to stories.</h2>
	</div>

	<div class="down-arrow mbl"></div>

  </div>

</article>

<article class="welcome-msg sub-container">
	<section>
		<h3>
			Welcome to Datawheel, where we make big data easy to use and open to everyone.
		</h3>
		<p>
			Datawheel is a small but mighty crew of programmers and designers who are here to make sense of the world’s vast amount of data. We know how to turn any client’s raw data into an interactive interface that is clear, accessible and beautiful.
		</p>
	</section>
</article>

<article class="parallax-window" data-parallax="scroll" data-image-src="/img/home/desk1.jpg" data-bleed="100" data-speed="0.5"></article>

<article class="offerings sub-container">
	<h3>What we offer</h3>
	<section>
		<div class="offering a">
			<div class="badge"></div>
			<p>
				A web interface tailored to your unique dataset
			</p>
		</div>
		<div class="offering b">
			<div class="badge"></div>
			<p>
				The merging of disparate datasets into a unified API
			</p>
		</div>
		<div class="offering c">
			<div class="badge"></div>
			<p>
				Apprenticeships to help you update and maintain your site
			</p>
		</div>
		<div class="offering d">
			<div class="badge"></div>
			<p>
				The leverage of cutting-edge, open-source software
			</p>
		</div>
	</section>
</article>

<article class="projects">
	<h3>What we make</h3>
	<section>
		<div class="row a">
			<div class="project datausa">
				<a class="project-title" href="/portfolio/datausa/">Data USA</a>
			</div>
			<div class="project datachile">
				<a class="project-title" href="/portfolio/datachile/">DataChile</a>
			</div>
		</div>
		<div class="row b">
			<div class="project dataafrica">
				<a class="project-title" href="/portfolio/dataafrica/">Data Africa</a>
			</div>
			<div class="project oec">
				<a class="project-title" href="/portfolio/oec/">Observatory of Economic Complexity</a>
			</div>
		</div>
		<div class="row c">
			<div class="project verizon">
				<a class="project-title" href="/portfolio/verizon-dbir/">Verizon DBIR</a>
			</div>
			<div class="project codelife">
				<a class="project-title" href="/portfolio/codelife/">Codelife</a>
			</div>
		</div>
		<div class="row d">
			<div class="project cny">
				<a class="project-title" href="/portfolio/cny-vitals/">CNY Vitals</a>
			</div>
		</div>
	</section>
</article>

{% assign logos = "deloitte,mit,iad-bank,estee-lauder,verizon,steelcase,fapemig,fundep,antofagasta,corfo,entel-lab,minecon,direcon,asech,ifpri,cnycf,wasphi,government-of-argentina,authority-health,minas-gerais-government,funarbe" | split: ',' %}

<article class="partners">
	<h3>Who we work with</h3>
	<ul class="logo-grid">
		{% for logo in logos %}
	  	<li class="logo-item">
				<img class="logo-img"
					src="/img/partners/{{logo}}-logo.svg"
					onerror="this.src='/img/partners/png/{{logo}}-logo.png'; this.onerror=null;"
					alt="{{logo}}"
					draggable="false">
			</li>
		{% endfor %}
	</ul>
</article>

<article class="contact sub-container">
	<section class="dialogue-form">
		<h3>Let's talk</h3>
		{% include form.html small="true" %}
	</section>
	<section id="map" class="sub-container"></section>
</article>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDddngz-y6g5VkiQAATZ5usfL_eMa81AQ4"></script>
<script type="text/javascript">

	  $(document).ready(function() {
	    $(".video").backgroundVideo({
	      $videoWrap: $(".video").parent(),
	      $outerWrap: $(".video").parent().parent(),
				pauseVideoOnViewLoss: false,
	      preventContextMenu: true,
	      parallaxOptions: {effect: 2}
	    });
	  });

    google.maps.event.addDomListener(window, 'load', init);

    function init() {
        var mapOptions = {
            zoom: 17,
            center: new google.maps.LatLng(42.374233,-71.09927829999998),
            scrollwheel:  false,
            disableDefaultUI: true,
            scrollwheel: false,
    				navigationControl: false,
	    			mapTypeControl: false,
	    			scaleControl: false,
	    			draggable: false,
            styles:
	           [{"featureType":"landscape","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#F0F0F1"}]},
	           {"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"hue":"#FFCC66"},{"color":"#F0F0F1"}]},
	           {"featureType":"road","elementType":"geometry","stylers":[{"color":"#FFCC66"},{"visibility":"simplified"}]},
	           {"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},
	           {"featureType":"road.local","elementType":"labels","stylers":[{"visibility":"off"}]},
	           {"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#FFCC66"}]},
	           {"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#FFCC66"}]},
	           {"elementType":"labels.icon","stylers":[{"visibility":"off"}]},
	           {"featureType":"transit.line","elementType":"geometry","stylers":[{"visibility":"on"},{"lightness":700}]},
	           {"featureType":"water","elementType":"all","stylers":[{"color":"#F0F0F1"}]},
	           {"featureType": "administrative","elementType": "all","stylers": [{"visibility": "off"}]}]
        };
        var mapElement = document.getElementById('map');
        var map = new google.maps.Map(mapElement, mapOptions);
				var markerImage = new google.maps.MarkerImage("/img/home/map_marker.png", null, null, null, new google.maps.Size(228, 157));
				var marker = new google.maps.Marker({
          "position": new google.maps.LatLng(42.373683,-71.09927829999998),
          "map": map,
          "title": "1299 Cambridge St",
          "icon": markerImage
        });

				google.maps.event.addListener(marker, "click", function() {
					window.open("https://goo.gl/maps/7cv2ScytYYE2", "_blank");
				})
    }
</script>