Hattery

Under Construction

admin — Wed, 27 Mar 2013 23:58:39 +0000

Hattery’s strength is its culture of collaboration, creative immersion, flexibility, and consideration for personal and team health. The spaces we occupy are vital forces in shaping this ethos, as they influence how people think, meet, and create.

A dedication to craftsmanship -- without sacrificing efficiency -- is a core Hattery value that informed the way we approached the buildout of our space, from the way we worked with the team and with architects to the way we sourced and repurposed materials. The original Hattery team worked around particle-board and sawhorse tables in Soup, our current kitchen. When the team got too big, the second floor was built out to create a beautiful, open space that could be reinvented daily. We pride ourselves on regularly hacking the existing framework to make it work for us -- from building custom desks out of wood harvested from our own building, to fastening casters to every piece of furniture for maximum flexibility. By December of 2012, Hattery had grown to almost thirty, and along with our resident startup teams, we were ready to expand to the first floor. The space was formerly a gym, where the sounds of heavy weights dropped on concrete floors still seemed to resonate loudly. It was dark, cold, and unsuited for inspiring innovation. Rather than hiring an architecture firm and general contractor to manage the build-out from afar, I was hired as an in-house studio design coordinator. This unique approach allowed me to be a part of the team, to understand their dynamic needs (from the practical to the wistful), and to design from the inside. I worked closely with architect Wayne Leong of Leong Architects and the Hattery team -- specifically Joshua To, who established the functional requirements and guided the vision and development of the aesthetic.

Together, we began to distill our spatial needs, picking apart the pieces to find out was working in personal, collaborative, and social spaces, and what we could improve. We set ourselves up to design and build in the same space, at the same time -- a rare and precious opportunity. Unlike most architectural flows, which operate as linear waterfall processes, we proceeded with a dynamic, flexible approach. At Hattery the designers and engineers sit together in order to solve problems efficiently, and we work dynamically with our clients and portfolio companies. In the same way, I was able to work alongside my contractors to see and fix problems immediately rather than months down the line. I learned on the fly to become a fast expert in establishing level sub-floors over sloping concrete, finding square footage in distant corners, and resolving data paths.

We sandblasted all of the concrete on the first floor, ridding it of plaster and paint, and exposing the texture and character underneath. We fabricated door handles from threaded pipe and fittings. Rather than replacing a sea of light fixtures, we repainted the ceilings to effectively reflect light and raised the existing fixtures to nestle between beams. We found light. This build-out was not about creating something entirely new, but rather uncovering, exposing, and repurposing. The light, square footage, and room divisions form the foundation of our workspace -- but just as important are the custom details in creative spaces, which I’ll be discussing in my next post. We have built the bones for our workshop, and will continue to hack, develop, and modify this space in parallel with our own growth and evolution.

Food is a Universal Language

admin — Mon, 25 Mar 2013 22:04:26 +0000

Hi, I’m Tina. I am the executive chef at Hattery. Like most other folks here, I am in the business of crafting experiences. Hattery’s kitchen started as a way to avoid the long lines at SoMa’s (admittedly wonderful) food trucks, and provide a moment in a busy day for the team to be nourished by good food and good conversation. Since then the team has expanded, and bit by bit, so has the kitchen, to the point where we now have a running roster of guest chefs that provide a fresh burst of inspiration every few weeks. When they stop by, I like to find out their perspective by asking them a set of questions for the Hattery Kitchen Tumblr. Here’s my perspective: Why I cook. I love food. I appreciate its ability to give us sustenance, and to be relevant no matter what situation you are in. It’s a universal language. People always love food and can in some way shape or manner talk about it. Cooking is like any vocation: It takes hard work, a team effort, and most importantly, passion. I cook because I love it and I can’t think of a better way to streamline the thoughts within my head. I believe that everyone should be able to have an avenue where they can experiment and grow. It’s a great feeling to constantly learn as well as teach. Food is deeply emotional, and inherently creative. My father was a baker. I remember the days when I stood on a step-stool and helped him cut dough. My favorite moments with him were Saturdays, when the two of us would go on adventures to new restaurants. I can’t tell you how important that was for me, to be able to taste different flavors. The strongest memories I have of my father are associated with food. With my mother, too, I have fond memories of the times spent in our kitchen as a little girl watching her pick herbs or chop meat with her rusted cleaver. She would blow onto a hot spoon that was freshly lifted from the bubbling pot, filled with stock or porridge and with one hand underneath, careful to not drop a drip, she ushered it into my mouth. Food can be transportative, and it makes us expansive and open to possibilities. It can take you backwards and forwards in time; it can take you all over the world in a single bite. Why is food important at Hattery? Eating lunch together isn’t just an office perk, it’s an integral part of culture. It’s important to take a break in order to refresh and recharge the mind, and interact with the people we work with in a different capacity. Having a chef on hand who cooks good, healthy and comforting foods invites those in the office to take a little time to nourish themselves.

From the eyes, nose, palate, and into the belly, it is important that the food is always warm and welcoming. I try to make lunch an experience, a moment to fully disconnect from whatever you’re working on and reconnect with an elemental part of yourself. There is a chalkboard detailing what it is that you will be eating, a nice tablecloth, music playing in the background, the patio door open when the sun is shining. Each day I carefully plate and take a picture alongside a Tweeted description of what’s for lunch. I call it a very tech savvy cow bell.

Keep it simple. It’s important for me to hand peel garlic, to decide whether to peel carrots or let them be. I find joy in hand grating carrots...I can’t tell you why. I like to cook as much as possible without using machines or shortcuts, to use the least amount of manipulation and really allow the flavors to come out.

With cooking, the most important thing is not to overcomplicate your food. If and when you do, you dilute it. I think this is true for any process of creation. That said, I’d like to share with you one of my favorite simple, nourishing, wholesome recipes. It is simple to make yet complicated in just the right way -- and completely flavorful. In it we use our house preserved lemons, made by our resident baker and pickler Ryan Lee. You can purchase preserved lemons at specialty stores, or make them at home.

Asparagus, Preserved Lemon & Green Garlic Pasta w/ Ricotta Mint & Pine Nuts

for two to four people

8 oz. Pasta 1 ½ C. Asparagus 4 T. Fine Minced Preserved Lemon 2/3 C. Ricotta ¼ C. Green Garlic ¼ C. Toasted Pine Nuts 2 T. Mint 4 T. Olive Oil Salt to taste

1. Bring water to boil: Season water well with salt to make it “taste like the sea”.

2. Place pasta in water and continue to cook according to packaged directions.

3. Heat sauté pan over medium heat. Add olive oil, place green garlic in pan and cook for 3 minutes. Do not add color or burn the green garlic. Add asparagus, toss and continue to cook for another 5 minutes. Season with salt (be mindful that the pasta water is quite salty. Taste all elements before you continue to salt your food).

4. Toast pine nuts either in another pan or in oven until lightly golden. Place aside.

5. Place drained pasta in pan with asparagus and green garlic. Transfer pasta to large bowl. Add minced preserved lemon, green garlic, ricotta and mint. Toss well. Serve.

You can find other recipes of the dishes being shared at Hattery here. For bite-sized updates, follow us on Twitter at @HatteryKitchen. Right now I am so happy to be in the present, cooking for the people at Hattery. I do know that I have lots to learn still, everyone has lots to learn, and it’s when you stop that you are defeating yourself. I hope that never happens to me.

T.D.

Consider the Enterprise User

admin — Mon, 11 Mar 2013 16:56:57 +0000

Enterprise UX and UI design first came to my attention while I was working in sales at Google in 2008. I noticed that an internal tool we used to send emails to advertisers was difficult to navigate -- so much so that only one or two people even had the keys to send these emails. I was surprised to find that although Google places a huge focus on making their enterprise tools easy-to-use for consumers, our own internal tools were sometimes clunky and non-intuitive. Since I have a design background, I was able to volunteer to develop a new interface for the email tool and then work with an engineering team to implement my design. What was once a product that was error-prone and not often used internally became a useful tool that entire marketing teams around the world were trained to use. While UX and UI are a priority for consumer-facing web and mobile products, the enterprise market is only slowly coming to understand the importance of design in creating a compelling product -- especially outside the Silicon Valley tech sector. I think most of us can recall an example of a customer service interaction that was unnecessarily onerous because of an antiquated or poorly-designed interface. These small, petty frustrations add up to lost time and therefore, lost profits. This is a huge missed opportunity for product developers. Enterprise products are traditionally focused on the strength of their features, but what if they shifted some of that focus to UX? Let’s take Salesforce, for example. The power of their product—driven by a complex collection of features and tools—is lost in an unintuitive interface that grants little attention to helping the user navigate services and tasks. When I open up Salesforce, the first thing I want to see is an action-oriented dashboard that clearly shows my active leads, which leads are close to closing, and what actions I should take next to close. Instead, this is what I see:

If leading enterprise products like Salesforce and Oracle were reworked to prioritize an enjoyable user experience, there would be a significant time savings and subsequent uptick in productivity for the user -- and their user base would be that much more reliant on their technology. VMWare’s vSphere is the industry-dominant solution for managing virtual environments -- the infrastructure of the cloud. However, the interface is difficult to use, often costing systems administrators hours just to identify which specific machine, or ‘VM’ is having an issue. The dashboard looks like this:

At Hattery, we’ve seen this disconnect between the enterprise product and the user as a huge opportunity. We worked with CloudPhysics to refine a set of tools to make complex data more quickly comprehensible for system administrators -- a user base that hasn’t traditionally received too much attention. As data shifts to the cloud, the workers who manage these new, more intricate virtual environments need effective tools that work. Hattery took inspiration from consumer products to make the CloudPhysics product straightforward and enjoyable to use. Comprehensive visual analysis features give the whole portrait of a data center in an uncluttered profile. CloudPhysics uses the power of its digital community, like crowdsourcing platforms and social media platforms do. And practical tools are given priority, making a product that is action- oriented. CloudPhysics is not alone. While much of the enterprise market still needs to adopt the consumer market’s dedication to design, this is a trend that's starting to take off. More enterprise companies are turning to design as a way to craft a competitive product, because they have to. As Fred Wilson observed, more late stage investors are moving from consumer to enterprise, and the enterprise world is starting to adjust. For example, Square, the mobile payments processor, has revolutionized the way Point of Sales systems work. In the restaurant industry, the existing options for POS work, but they’re outdated, unintuitive, and expensive to install and maintain. Square overturns that model with a simple, clean interface and the mobility and inexpensiveness of tablets. Like the email marketing tool I worked with at Google, Square allows more employees to fully exploit the product features -- and more easily troubleshoot any problems that crop up. This experience can and should be replicated across other industries -- from banking to human resources software, and everything in between. Good design does more than lend usability to a product -- it sharply decreases inefficiencies and time lost by clumsy interfaces, leading directly to more profitable businesses.

Kao: An Experiment in User-Experience Engineering

admin — Fri, 01 Feb 2013 18:41:49 +0000

I’ve always been fascinated by how engineering can have a direct impact on the end user. Often there are several layers of people between the developer and the user, with adverse effect. With products like jQuery, the UX takes care of itself because the developer is also the end user -- removing the layers between user and developer results in a more intuitive and successful product. It’s for this reason that I like to work as closely as possible with the end user (if it isn’t me) and with the designer on any given project. I just finished up work on a project for Brute Labs, a nonprofit organization that uses design and technology to foster sustainable social entrepreneurship. They needed a complete overhaul of the site to rearrange their content and optimize for the user, and wanted to base the design around one of the company’s first website designs. This project was exciting for me because it gave me the opportunity to do both front-end and back-end engineering and really stretch myself on user experience thinking along the way. At the early stage of the project, I was thinking about how to create a site which solves the problems of the first design using new web technologies to improve the functionality for the user. The reason a user would go to the projects page is to be able to browse through past work to gain a better understanding of what the organization does. The current version of the page showed a tile-view of past projects, with the ability to click to expand each project -- but this interaction had some problems, which you can play with yourself here.

A user clicking to expand a project will find that other projects disappear from her view and there are gaps and strange margins between elements.
A user sorting through the projects by filter sees only a few projects at a time, making the interactivity feel static.
The projects section is also embedded in the home page, but they use different static rules to process the data, making code that is not scalable across different areas of the site.

I started to look for solutions to these issues but my usual tricks weren’t working. Then, with my awesome colleague Antonio’s help, I found a jQuery plugin called Isotope which seemed to solve all of them. Isotope is an impressive plugin, created by David DeSandro, and well-loved for its ability to create smart layouts and sorting. From a user-experience standpoint, though, Isotope still had a few issues of its own for the context we wanted to use it in. Here is a version of the BRUTE prototype using Isotope.

Uncontrollable movements of the elements : Sometimes elements disappear from the view when you try to expand them
The elements only can be expanded from left to right. This was a problem because we wanted to expand the right side elements to the left in cases where expanding to the right would push them to a new line.
High probability of gaps: When you try to expand some elements, you can see empty spaces where there should be elements.
Great difficulty to customize certain effects: Abrupt element movements when expanded.

After some playing around, and talking to DeSandro to see if there was a solution within the plugin, I began to realize that if I wanted to fix the problems using smart layouts, I had to rebuild Isotope. Isotope uses advanced javascript techniques, which is not my strongest ability -- but this seemed like a fun challenge, so I went for it. If there’s one great thing I’ve learned in Silicon Valley, it’s that failure is often a key part of the process before success. It wasn’t a simple process, and there was a lot of trial and error in the coding. I ended up using hardware accelerated CSS3 to give the plugin 2D transitions. What I’ve come up with isn’t yet perfected (it’s early yet), but it solves the problems mentioned, and above all it helps to create a good user experience for the new Brute Labs site. It’s open source and available on this page-- where you can also experiment with the plugin and see technical information. You can also find it on github. Any feedback or suggestions are more than welcome; please send me an email. I decided to name my plugin Kao: “Kao” from the spanish pronunciation of the english word K.O(knockout) and from my last name (Chao). It’s a dynamic layout script that positions and reorders elements and offers different options of filtering and expanding elements. I don’t want to close this post without saying that I’m really proud to have been part of the Brute Labs project, it has been a great experience and I’ve had the opportunity to learn a lot. And one more thing, now I can officially say that BRUTE IS OUT OF THE LABS!!!

Lesson #1: Act with Purpose

admin — Mon, 26 Nov 2012 06:30:16 +0000

A year ago, we formed Hattery because we wanted to change the way businesses are built. Like most entrepreneurs, the three of us created our business because we had a strong belief that there was a market opportunity that we could -- and should -- harness. We recognized the potential of startups to make an impact in the world, and we wanted to create a business model that would truly get behind businesses we believe in. Our idea was to raise a venture capital fund to invest in a relatively small number of startups, and to help them succeed by offering the resources of an in-house creative team. Here are some of the things we’ve learned in the last year about starting up a business. Keep the destination in sight, but don’t be afraid to change your route. The “pivot” is a key part of startup vernacular, thanks to Eric Ries. The concept generally has a negative connotation, but with a little flexibility, adjusting along the way is something every entrepreneur should be prepared to do. It’s inevitable that a startup will need to revise its approach at some point -- the important thing to remember is to keep focused on the original purpose, no matter how often the organization evolves. One of the great surprises from the last year has been our ability to begin investing without raising a fund immediately. Since February, we’ve invested in seven companies, some as part of syndicates with leading venture capital firms. This has given us the opportunity to get moving on building businesses faster. Two of our portfolio companies have already gone on to raise subsequent rounds, and the others continue to go strong. We also discovered that we could build a larger and more diverse pool of talent within the firm by taking on engaging client work, instead of relying solely on fund management fees to pay salaries. Consequently, we've been able to work on projects as diverse as building Poop Games with the Gates Foundation to infographics and analysis with Google, taking advantage of the full capacity of our team while stretching ourselves on other projects we care about. A need to be frugal can build a culture that is rich. Our seed financing constituted the life savings of the partners, including 401ks -- a familiar scenario for most entrepreneurs. Out of necessity, an ethos has evolved at Hattery of watching every dollar and making it count -- but the consequence of this has been a rich company culture that is close-knit and resourceful. Our decision to hire a chef and serve meals achieved two important things. It allowed us to serve lunch and snacks at a cost of $4.50 per person, per day -- in contrast to the individual cost of $7.50 per day for lunch in our SOMA neighborhood. More importantly, it helped us build a culture of eating healthy, hearty meals together while sharing stories and ideas. The kitchen is fondly regarded in our office, and our daily lunches together have inspired a culture that is warm, considerate, and convivial. Pick a team that can move as quickly as your startup needs to. Every successful entrepreneur will tell you that identifying talent is the most important job of any leader. We've been fortunate to assemble a very talented team, and it’s been extremely rewarding to watch our relatively young group mature and excel quickly. We have a marine biologist leading user experience, and a biomechanical engineer working on startup advocacy. Many of our team members come from nontraditional backgrounds -- but what matters even more than experience accrued is the ability to learn. The team we’ve assembled is comprised of people who are innately curious, and able to quickly acquire new skills or borrow from other disciplines. Our team has to be able to learn quickly, and then teach what they have learned just as fast. All of our entrepreneurs are jumping off the deep end -- all the better to have done it first. Startups have to opt-in to politics. Entrepreneurs are inherently focused on building their product and getting to market quickly. Very early stage entrepreneurs don’t have the time, resources, or the wherewithal to become involved in policy. A compliance department doesn’t come until it’s time to IPO, and a lobbying arm might get added when serious revenues are already being generated. Working alongside startups -- and being one ourselves -- we’ve experienced the frustration of trying to comply with complex regulations that seem designed to protect antiquated markets and products. We helped form Engine Advocacy in December to give startups a voice in the political process, and do the heavy-lifting on influencing policy that allows entrepreneurship to thrive. Engine has advocated for startups on issues as diverse as copyright, crowdsourced investments, skilled immigration, and software patents, and remains a resource for our portfolio companies and the community at large. Working with Engine, we’ve hosted elected officials from across the political spectrum, eager to learn from startups about the problems their businesses face. The startup community is invaluable. The startup “scene” is a distraction. Time is short. Opportunity cost is high. It can be counterproductive to get sucked into the startup “scene” -- trendy conferences, parties, and even demo days can be a distraction from a startup’s main focus of its product and the people who use it. While we recognize the value in being an engaged member of the wider community, we believe a heads down focus on building the best possible products has served us better. The kind of community we have built at Hattery has proved invaluable to us and to our portfolio companies and clients, from the daily information exchange that happens over lunch or in shared spaces in the office, to the access our companies have to a network of advisors and service providers. Celebrate your successes. In the startup world, it's common to blow past your achievements as you strive for the next milestone -- but in an environment where people are working fast and lean to create a product they have passion for, recognizing accomplishment can be an inoculation against burnout and an important reminder of the bigger picture. Last month, we celebrated our one year anniversary. It was an opportunity for us to reflect on what we’re proud of: the work we’ve done over the last year, the space we’ve built, and the team that made it happen. We’re looking forward to what the next year brings, and to sharing it with you.

If you visit us, you’ll find out...

60+ people eat lunch together at Hattery every day, and follow the @hatterykitchen twitter feed
Dozens of startups in our neighborhood rely on us as a wireless relay connection to the local datacenter through our direct microwave link with local ISP Monkeybrains
An average of 150 devices are connected to our wireless network during business hours
We have a custom Hattery typeface, created by local type designer James Edmonson
Our conference tables and many of our desks were crafted from wood salvaged in the office buildout from the second floor rafters
Our largest resident dog is a rescue greyhound named Chasqui. Our smallest, a long-haired Chihuahua who goes by El Chupacabra

From Wisdom to Hattery Script: Innovating Typography

admin — Thu, 25 Oct 2012 18:21:57 +0000

When we set about choosing the logotype that would represent Hattery, we wanted something beautiful, meaningful to us, and indelible. We knew that choice of type is not trivial; that different typefaces convey a multitude of connotations through the details of the kearning, the presence or absence of serifs, and the curvature of the vowels. Typography has been an important aid in communicating for centuries. In recent years, hand-lettered fonts have experienced a resurgence in popularity, as craftsmanship and artisanal sensibility have become increasingly valued in western society. James T. Edmonson is the type designer who worked with us to create our logotype and script font. He embraces the craft of hand-lettering with the passion and precision of a dedicated craftsman, and combines it with an inherent affinity for new technologies—creating an interesting juxtaposition of old and new that clearly resonates with Hattery’s mission. His hand-lettered fonts are frequently used on the web, requiring a different set of specifications than what is usually required for print lettering. James uses a program to innovate on his work after the initial process of hand drawing, creating scores of variables that make his fonts more flexible and resilient across different media. Using this multilateral approach, James created a unique script font for Hattery that pushes the boundaries of what a traditional typeface is able to do. Here is the video of how he did it:

Citizen/Hackers at reroute/sf

admin — Thu, 25 Oct 2012 18:21:27 +0000

With the presidential election fast approaching, every one of us has been reminded of our civic duty to vote and participate in the democratic process. For many of us, this is what we think of when we think of being a citizen. But every day across the country, hackers, hustlers, and designers are playing an increasingly important role in bettering our world through social entrepreneurship. They’re not trying to save the world all at once. They’re not in it for the money. They’re in it to make something they can have authorship of and be proud of. As the host of reroute/sf, our job at Hattery was to enable and empower these people to become civic leaders doing the best for our city. Last weekend, we partnered with the San Francisco Municipal Transit Authority and the Mayor’s office to create reroute/sf, an event to help solve some of the transportation challenges facing San Francisco. Innovating doesn’t always mean fighting the system or disrupting the market. When people think about hackers, they often think about the destructive, anarchistic type that troll the internet. But by working closely within existing government structures, we saw that scrappy innovators and public sector organizations can get a lot done when we work together to better the spaces we inhabit. More than a hundred people showed up to hack on how to fix transit in SF. Engineers, designers, and a bunch of random people you might not expect—like scientists and one motivated biochemist—attended. They came to get it done. The city offered up its transportation data on everything from public transit to traffic and customer feedback. Many people came alone but the spirit of the weekend quickly turned individuals into collaborators bent on using the time to create real, usable tools with the data that would help get people moving around the city more easily. It was awesome to hear positive feedback from participants, who were there to work not just with one another, but with the city and its data. The success of the event was largely due to this open and constructive partnership. We we owe a lot to our amazing partners, including Google Maps, General Assembly, Waze, Neighborland, and Keen—who got involved by providing resources, tools, and prizes to help get people hacking with purpose. Winners were declared, and more than $10,000 in grants and prizes were awarded to teams to help make their innovations real. While that’s great, the real achievements of reroute/sf are ongoing. The resources and tools people developed will be open source. We want the hackers and teams to continue to test their ideas, try new things, and work to make their community a better place to live in and navigate. Using open-source code and Creative Commons-based sharing, these tools become all the more powerful, usable, and effective. People in the startup community like talking about disruption and shifting paradigms, but sometimes the most productive projects work within existing structures. Part of the spirit of hacking and modding is taking existing things we love and making them better through hard work and a sense of community. Reroute/sf was a small part of the spirit of community, innovation, and civic duty we’re fostering at Hattery.

How I Tamed Fusion Tables to Tell a Beautiful Story About Tech Jobs

admin — Thu, 25 Oct 2012 18:20:55 +0000

This essay is adapted from an article by the author which previously appeared on www.clarebayley.com. In August, the Hattery team, working with Engine Advocacy and the Bay Area Council Economic Institute, created a data visualization illustrating tech job growth all across America. With just a few weeks to go before the Democratic and Republican national conventions—two of the most attended events of the election cycle—we received a whole heap of U.S. government data from BACEI. The data showed that tech jobs are growing all across the country. We knew we had to create a digestible visualization to help show policymakers and voters at the convention why tech and innovation policies are important in each and every state. An engineer (myself), designer, writer, and analyst built the entire site in about two weeks. The full source is now available on Github and all the Fusion Tables we used are public, so feel free to take a look around the inner workings. From an engineering standpoint, there were four main parts we had to tackle:

The data had to be sorted and processed to give us a workable set of numbers. I used a local MySQL install for this.
The visualization needed to display those numbers in some kind of viewer-friendly format. We mapped the data with Fusion Tables.
The interface had to be designed and engineered to display 20 different sets of data without overwhelming the user. I built this using jQuery.
The final numbers had to be displayed next to the map and change on some interaction by the user.

This is the story of how we did it.

Wrangling the Data

The data came to us as massive CSV files. The largest one had more than one million observations. It was way more data than we could possibly visualize, but that’s the mark of good research. To make sense of this giant pile of information, we needed to be able to ask it questions and pull out the data we needed. Enter MySQL. I created a MySQL database on my local machine to house all of our data. I ultimately created the table by hand through PhpMyAdmin and then populated it through the command line. Using the MySQL command line interface, I populated the table from the CSV file. Once everything was in the database we spent a lot of time exploring different ways of sorting the data to tell a compelling story. We knew we wanted to talk about how technology companies are vital to the economy, not just Silicon Valley and New York, but which numbers would work best to do that? Was it the number of companies? The difference in job growth rates between tech and overall? Should it be shown by state, county, metro area, or congressional district? We also wanted to emphasize the role startups played in technology’s impact on the economy. Did we want to combine the data sets? Show them side by side? On different pages entirely? Maybe overlapping on the same map? We spent more than a week answering these questions. Although nothing was really ‘built’ during that time, I was running tons of SQL queries, trying to extract an overall picture of several different numbers so we could decide what to use. Unfortunately, it’s kinda hard to ‘see’ anything in a giant list of over 3,000 numbers. Before we could decide what data we were going to display, I had to figure out a way to display it.

Fusion Tables

If you’ve never used them, Google Fusion Tables are kind of like single-table databases hosted inside Google Docs that can support huge amounts of data. They can be used to graph or chart the data. If you’re a non-technical kind of person, consider them a fancy spreadsheet. Before this project I’d never touched Fusion Tables, but I was about to become intimately familiar with all their beautiful quirks and infuriating flaws. Creating Fusion Tables is super easy. Just go to Google Drive where you will be given lots of lovely options to fill in tables. One of the methods is to upload a CSV file, so I went in to my database and created a SQL query that sorted the data I needed for one year. The query returns data on employment change and average wage for the high-tech industry across all counties in the US. “FIPS codes” allow for data to be matched to counties on the map. After running this query in PhpMyAdmin, you can export the result into a CSV file with column name headers that’s perfect for uploading into Fusion Tables. You can create a new Fusion Table by uploading this file in the creation dialogue. Voila! You’ve now got one year’s worth of county data in a table online. Which isn’t incredibly useful because it’s still just a giant bunch of numbers. The real magic comes next. We need to match those FIPS codes with the geographical shape of the county. Google provides public Fusion Tables with KML district boundaries for US states, counties, and congressional districts for just such a purpose. These tables gave me everything I needed to make a full picture of the yearly employment change in the high-tech Industry for 2011, broken down by county. Obviously, that’s not a very clear picture of anything, but that’s why we did it! Now we could start evaluating different data sets for how well they visualize on a map. Once I got used to the process I could go from someone asking “Clare, can we see the 2006 Tech Job Share broken down by state?” to having the map on the screen in under 2 minutes. Now that we could see the meaning in the numbers, we were able to make some decisions about what the final map would actually display. We chose share of tech jobs for the main display (that’s the percent of employed people who work at a high-tech company) and a couple additional data points for a side display, including percent job growth and startups founded that year. Our designers got to work concepting the interface, our analyst started building the final maps and figuring out what ‘buckets’ would be best to represent the distribution of values on the map, and I got to sit down and figure out how to put these maps into a web page.

Make It Interactive

So far the team had created a bunch of really great-looking visualizations for the data but they were all inside of Google Docs – not really something we could put on show at the conventions. We needed a way to display these maps inside a custom web page that also provided an easy way to switch between years and state/county. The solution was the FusionTablesLayer, a part of the Google Maps JavaScript API v3. Google says this layer is still “experimental,” but I like to live on the edge. The FusionTablesLayer does exactly what you would guess: it loads a FusionTables Map as a layer onto a Google Maps object in your webpage. So, I built a couple JavaScript objects to store my FusionTable IDs, one for county and one for state, and made the year the key for easy lookup. The last trick here was getting thick state boundary lines to display on top of every map. Those are actually in a separate FusionTableLayer loaded from the public State boundary table and heavily styled inside Javascript. We created an embedded Google Map with FusionTablesLayers which can be changed with county and state buttons and a year-by-year slider. That left one big part left to do – the additional data to be displayed in the bar on top of the map.

Show Me The Numbers

Originally these dashboard numbers were intended to update whenever the viewer moved their mouse over one of the counties/states on the data map. Unfortunately, the mouseover listener is disabled in FusionTablesLayers and all of the recommended workarounds involve loading all the KML shapes from the FusionTable as native Google Maps object. That’s not exactly feasible when your FusionTable has over 3,000 distinct polygons. So, after a full day of trying (and failing) to figure out a way to trick the system into doing mouseovers, we decide to use onClick as an alternative. The data represented by any given county/state is, conveniently, included in the object passed to the click listener for FusionTableLayers. Most of this step involved me printing the listener objects to the console and digging through them to find the right string of array keys to extract the data I wanted and using jQuery to stick them in the appropriate boxes. And, that’s it! Nothing to it, right? There’s also a whole bunch of work that went into the ‘quiz’ component of the intro for the map, but that was way more straightforward than this. If you’re really interested, you can check it out in the source code. The data visualization was displayed by Google at both major party nominating conventions to show politicians and convention-goers that technology is a positive factor for job growth beyond Silicon Valley and the East Coast. It turned out beautifully and was was featured in TechCrunch, Politico, PandoDaily, and other tech media, and helped to drive the political conversation about innovation.