Skip to content

Instantly share code, notes, and snippets.

@extrasleepy
Last active August 29, 2015 14:26
Show Gist options
  • Save extrasleepy/b7b9f3e70d5f381fa50a to your computer and use it in GitHub Desktop.
Save extrasleepy/b7b9f3e70d5f381fa50a to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Andrew Kleindolph">
<title>Number Fog Patterns</title>
<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/freelancer.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href='http://fonts.googleapis.com/css?family=Quattrocento+Sans|Righteous' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Quattrocento+Sans:700' rel='stylesheet' type='text/css'>
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" class="index">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#page-top">Number Fog Patterns</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li class="page-scroll">
<a href="#portfolio">Patterns</a>
</li>
<li class="page-scroll">
<a href="#overview">Overview</a>
</li>
<li class="page-scroll">
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Portfolio Grid Section -->
<section id="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Behind the Patterns:</h2>
<!--<hr class="star-primary">-->
</div>
</div>
<div class="row">
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/prints/buses.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/prints/iotpalms.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/prints/droneandfire.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal4" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/prints/tent.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal5" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/prints/condo.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/prints/clipper.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal7" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/prints/fistbump.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal8" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/prints/icecream.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal9" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img src="img/prints/tamale.png" class="img-responsive" alt="">
</a>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section class="success" id="overview">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h3>Overview</h3>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<p>This project applies data visualization and drawing in fabric patterns that capture the prevalence, contrasts, and/or frictions of rapid change as it affects parallel lives in the Bay Area. The fabric patterns are modeled after Dutch Block Print designs which are popular in West Africa and may appropriately be referred to as "African Fabric". Data, derived from socio-political concerns (such as changes in property values, transportation, or labor and income) and represented as shape and line, become the fabric backgrounds. The foreground patterns are composed of drawn symbology related to various technologies emerging from the social, economic and political environment in the San Francisco Bay Area. The finished fabrics are intended to serve a similar purpose as some of the designs in West Africa: highlight certain objects as windows into a changing socio-political landscape.</p>
<p>See a <strong><a href="https://vimeo.com/131601106">video</a></strong> of the design tools.</p>
</div>
<div class="col-lg-8 col-lg-offset-2 text-center">
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Feedback and Inquiry</h2>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<!-- To configure the contact form email address, go to mail/contact_me.php and update the email address in the PHP file on line 19. -->
<!-- The form should work on most web servers, but if the form is not working you may need to configure your web server differently. -->
<form name="sentMessage" id="contactForm" novalidate>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Name</label>
<input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Email Address</label>
<input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Message</label>
<textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-success btn-lg">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="text-center">
<div class="footer-above">
<div class="container">
<div class="row">
<h3>Created by</h3>
<p>Andrew Kleindolph <strong><a href="http://www.extrasleepy.com">extrasleepy.com</a></strong></p>
</div>
</div>
</div>
<div class="footer-below">
<div class="container">
<div class="row">
<div class="col-lg-12">
Copyright &copy; Andrew Kleindolph 2015
</div>
</div>
</div>
</div>
</footer>
<!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
<div class="scroll-top page-scroll visible-xs visible-sm">
<a class="btn btn-primary" href="#page-top">
<i class="fa fa-chevron-up"></i>
</a>
</div>
<!-- Portfolio Modals -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Buses of San Francisco</h2>
<img src="img/prints/buses.png" class="img-responsive img-centered" alt="">
<p>Data, represented as circles from left to right : Gender and diversity data from 6 major Bay Area tech companies. Rightmost data: San Francisco ethnicity breakdown according to 2013 US census data.
<p>
<ul class="list-inline item-details">
<li>Data Source:
<strong><a href="http://www.techrepublic.com/article/diversity-stats-10-tech-companies-that-have-come-clean/">Article</a>
</strong>
</li>
<li>Date:
<strong>July 2015
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Internet of Things/Environmental Data Monitoring Palms</h2>
<img src="img/prints/iotpalms.png" class="img-responsive img-centered" alt="">
<p>Data represented as pink circles of lines: Numbers of recorded tree species in San Francisco</p>
<ul class="list-inline item-details">
<li>Data:
<strong><a href="http://urbanforestmap.org/">Urban Forest Map</a>
</strong>
</li>
<li>Date:
<strong>July 2015
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Drones and Fire</h2>
<img src="img/prints/droneandfire.png" class="img-responsive img-centered" alt="">
<p>Data, represented as stars: Close calls between pilots and drones reported, by state, to the FFA in 2014. California is the largest of the stars with 25 "close calls" reported.</p>
<ul class="list-inline item-details">
<li>Data Source:
<strong><a href="http://www.nbcbayarea.com/investigations/California-Leads-Nation-in-Drone-Close-Calls-288110521.html">Article</a>
</strong>
</li>
<li>Date:
<strong>July 2015
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>$900 Month Tent</h2>
<img src="img/prints/tent.png" class="img-responsive img-centered" alt="">
<p>Data, represented as magenta lines: San Jose Average monthly rent 2009-2015. Based on <a href="http://www.cnbc.com/2015/06/26/live-in-this-silicon-valley-mans-tent-for-900-a-month.html">this event</a>.</p>
<ul class="list-inline item-details">
<li>Data Source:
<strong><a href="https://www.rentjungle.com/average-rent-in-san-jose-rent-trends/">Rent Stats</a>
</strong>
</li>
<li>Date:
<strong>July 2015
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Mission Condo</h2>
<img src="img/prints/condo.png" class="img-responsive img-centered" alt="">
<p>Data, represented as inverted dot graph: Quarterly San Francisco Median Home Values 1990 - 2014.</p>
<ul class="list-inline item-details">
<li>Data Source:
<strong><a href="http://www.vitalsigns.mtc.ca.gov/home-prices">Vital Signs</a>
</strong>
</li>
<li>Date:
<strong>July 2015
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Transport Unity</h2>
<img src="img/prints/clipper.png" class="img-responsive img-centered" alt="">
<p>Data represented at yellow arrows: Traffic volumes at regional (freeway) gateways</p>
<ul class="list-inline item-details">
<li>Data Source:
<strong><a href="http://www.vitalsigns.mtc.ca.gov/traffic-volumes-regional-gateways">Vital Signs</a>
</strong>
</li>
<li>Date:
<strong>July 2015
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal7" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Wearable Tech Fist Bump/Battle</h2>
<img src="img/prints/fistbump.png" class="img-responsive img-centered" alt="">
<p>Data, represented as hearts from left to right : California quarterly E-waste intake by private companies (in millions of pounds) from 2005 - 2015.</p>
<ul class="list-inline item-details">
<li>Data Source:
<strong><a href="http://www.calrecycle.ca.gov/Electronics/CEW/ProgramStats.pdf">Cal Recycle</a>
</strong>
</li>
<li>Date:
<strong>July 2015
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal8" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Street Vending/Coding Mash Up:HTML Frozen Treats</h2>
<img src="img/prints/icecream.png" class="img-responsive img-centered" alt="">
<p>Data, represented as droplets from left to right : Quanity of people claiming food insecurity in the Bay Area 2001 -2013. Data, represented as dot spiral : Mobile food vending permits issued in San Francisco.</p>
<ul class="list-inline item-details">
<li>Data Source(droplets):
<strong><a href="http://www.spur.org/publications/spur-report/2015-02-05/healthy-food-within-reach">Spur Article</a>
</strong>
</li>
<li>Data Source(spiral):
<strong><a href="https://data.sfgov.org/Economy-and-Community/Mobile-Food-Permit-Map/px6q-wjh5?">SFOpenData</a>
</strong>
</li>
<li>Date:
<strong>July 2015
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal9" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Street Vending/Coding Mash Up:CSS Tamales</h2>
<img src="img/prints/tamale.png" class="img-responsive img-centered" alt="">
<p>Data, represented as polygons from left to right : Average Hourly wage for 22 San Francisco occupations as defined by the Bureau of Labor Statistics</p>
<ul class="list-inline item-details">
<li>Data Source:
<strong><a href="http://www.bls.gov/regions/west/news-release/occupationalemploymentandwages_sanfrancisco.htm">BLA Stats</a>
</strong>
</li>
<li>Date:
<strong>July 2015
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/freelancer.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment