George Oliver 安原譲治: Projects

Interactive Country Map

Interactive Country Map

The JavaScript library d3.js allows you to make some incredible interactive data visualizations. One of my projects has been to create a web app that enables users to identify ethnic dining opportunities in Chicago. The interface consists of two dynmically-linked maps: a Google map displaying one's current location (if you're in Chicago) and nearby restaurants, and a country map that highlights countries whose cuisines are represented by restaurants in the Google map area. Clicking on a country filters for restaurants serving that country's cuisine. For a few countries (the US, Canada, Mexico, Brazil, India, China, Australia), if you click on the country, the country's administrative units are displayed, and you can further filter restaurants by these geographies. The tiles below the map to zoom to and filter for various world regions' cuisines. Map data was acquired from Natural Earth, and QGIS was used to manipulate the data. I acquired restaurant information through web searches. I'm still working on improving load times.

Interactive Billboard Top 40 Chart

Interactive Billboard Top 40 Chart

My family knows me as someone with non-traditional and rather nerdy interests. One interest I've had since the 6th grade was an obsession with Billboard charts. Every weekend I'd listen to the Top 40 Countdown on the radio, and I kept a graphical chart representing the Top 40. On the x-axis is time, with the week as the unit. On the y-axis is chart position, with 40 at the bottom and 1 at the top. A particular song has a 'chart run' from its debut week to its final week on the chart; the chart run is composed of a line connecting the dots between each week's position. For any given week, there are 40 different curves present. To help more easily differentiate songs in the chart, I used a cycle of 13 colors (13 divides into 52 weeks evenly). The end result is a riotous rainbow-hued confusion of curves. There's something about the shape of the individual lines that get me... To help myself learn the JavaScript interactive data visualization library d3.js, I gave myself the project of re-creating my junior high school Top 40 graphs using code, adding an interactive spin. This visualization works best on a full-size screen. On mobile phones, it only works if you request the desktop site.

Coupon Alert App

Coupon Alert App

After taking a course in Android app programming at UCLA Extension, I continued to learn about Android and in late 2014 published a free app onto the Google Play store. The user manually inputs information about coupons (or, really, anything you want to remind yourself about), and the app reminds you two days before and on the day of the expiration date entered. The Android Notification API was a little thorny to deal with, since when I created the app, notifications needed to be re-scheduled each time the phone was turned off/on. The app has been downloaded over 100 times (lol)!

Selction to SQL Query

Selection to SQL Query

This tile links to a simple tool I created leveraging Esri's arcpy Python library. Esri's flagship software ArcGIS is used to visualize map data. The map items displayed on the screen, e.g., streets in a metropolitan area, are linked to data tables with related attributes. While employed at Esri, I often worked with street data. A single street is often composed of multiple records in a data table, corresopnding to multiple sub-lines in the map. I frequently found myself needing to select all records pertaining to multiple streets, but it was a pain in the butt to do that by manually clicking on table records or lines on the map. This tool automates the process of selecting all these records, by deriving a SQL query to select the desired streets and then applying the query to the map. It's like telling the software "I've selected parts of these 10 streets. Can you select all records that have these street names?" Of course, this tool isn't limited to street names; you can select any other attribute in the data table as the basis of the selection. In other words, this tool enables one to make a full selection of records based on an ad hoc partial selection.

Los Angeles Metro Demographics Maps

Los Angeles Metro Demographics Maps

I was hired at Esri after a summer internship. Between the internship and becoming a full employee, I had some extra time, so I decided to learn how to use the mapping module of arcpy, Esri's Python library which enables use of the extensive set of geospatial processing and management tools offered by Esri's core product ArcGIS. At the time, I was trying to make some sense of the sprawling Los Angeles metro area to find a place to live. So I downloaded Census Bureau data and used the mapping module to automate the production of demographic maps. Later, to practice rudimentary HTML, CSS and JavaScript, I added some additional design elements (please forgive the roughness/garishness of the colors...).

Comparison of NYC/Tokyo Transit Accessibility

Comparison of NYC/Tokyo Transit Accessibility

This is the (static) map I made for a final project for a Cartography course I took at the University of Wisconsin, Madison. One of my passions is public transit. I've spent about 4 years of my life in Tokyo, and I am still in love with the dense array of above-ground trains and subways that fan out around Tokyo. The highly dense urban sprawl that surrounds Tokyo developed contemporaneously with the suburban railway network. As the city grew, train companies continued to extend above-ground lines farther from the central city, allowing quick and economical access for suburban dwellers to downtown areas. This allowed Tokyo to grow to the point that is still considered by many to be the most populous single urban conglomeration in the world. Above-ground train construction is much cheaper than subway construction, which cities that are already built out must resort to. Additionally, unlike in the United States, where following the robber baron years of railway monopolies the American government restricted real estate investment by railway companies, Tokyo suburban rail companies did not face such restrictions and built railway lines that complemented their real estatement development projects. The synergy between railway and real estate development is one of the major forces responsible for the nature of Tokyo's built environment. This map reflects the unique quality of Tokyo's urban environment: a much larger portion of Tokyo proper is accessible by rail than New York City.

2016 Olympic Medal Counts vs. Population/Wealth

2016 Olympic Medal Counts

This was the first project I gave myself to practice the JavaScript library d3.js. It's a pretty bare-bones interactive graph, but I think it reminds us of a few important points about Olympic medal counts: countries with larger populations get more medals, and, more importantly, wealthy countries get more medals. One other variable that would be interesting to incorporate into the visualization is the amount of investment in Olympic training by country.