Web Design

On this page:


Tabbed Interface

Our customer wanted a colorful, tabbed interface for a new web page, but the feature had to work inside the controlled environment of the US EPA's Drupal website. I worked with a colleague to research jQuery features, to create quick mockups, to code working drafts, to finalize graphics, to test the working code, and to deploy the new feature to production.

The customer has been very happy with their web page, and we have modified the page multiple times: adding new tabs, updating content, and improving the code.

View the tabbed interface at the US EPA's website. Below is a screenshot of the page.

Tabbed Interface

Tailor Your Search

The customer wanted a new feature that was simpler than a full application but almost as powerful. Users should be able to sort and filter data quickly to find what they need, but the EPA customer did not want to build a whole application. We used a datatable (jQuery feature) and modified it to react like an application. Users can check boxes, submit their interests, and immediately see the results, which expand/close with accordions. The results area includes links to additional web pages with more details for interested users.

View the Tailor Your Search at the US EPA's website. Below are screenshots of the feature.

Tailor Your Climate Adaptation Search

Results from the Tailor Your Climate Adaptation Search

Data Visualization

Which State is the Most Artsy?

I wanted to determine which state has the most artists per capita, so I consulted the Bureau of Labor Statistics and found Occupational Employment Statistics per state for May 2016. Occupation Code #27-0000 is for Arts, Design, Entertainment, Sports, and Media Occupations, and since not all states include all the subcategories within this occupation code, I used the summary numbers for the entire code of #27-0000 (major category). That means I lumped together art directors, craft artists, floral designers, coaches, scouts, sports officials, musicians, actors, reporters, film makers, and more. I collected the data, plugged it into Microsoft Power BI, and outputted the information graphic below (First Infographic).

Mousing over a state's rectangle reveals a tooltip window with the data for that state. Washington DC is most artsy with 51.51 jobs per 1,000 jobs (more than two times the 2nd place state of New York), and Arkansas is the least artsy with 6.86.

What a minute! Washington DC is the most artsy?

Politics can be very creative at times, but that still doesn't seem right. Diving into the details shows that DC has a high number of public relations specialists, who are part of the #27-0000 labor category, and that is inflating Washington DC's artsy number.


Can We Make the Artsy Numbers More Artsy?

Yes we can, and we can follow the NEA's previous work to guide us in filtering the data from the #27-000 labor code. I removed technical writers, public relations experts, news analysts, media technicians, and other subcategories to follow the NEA's filtering process. I plugged this filtered data into Microsoft Power BI, and outputted the new information graphic below (Revised Infographic).

In this new graphic the state colors and sizes are much closer to each other at the beginning (top left), vs. the previous graphic that had a large red square for Washington DC followed by a much smaller gray rectangle. Mousing over the states shows the details within a tooltip, which confirms New York (13.07) is now a close second to Washington DC (13.82).

Final Decision and Next Project

Since Washington DC is more of a large city than a state, it might be more appropriate to compare it to other cities. The Bureau of Labor Statistics includes data on major cities, and we could use this data to find the Most Artsy Cities, thus making New York the most Artsy State.


Copyright © Tom Buhrman 1990-2017