Using parallax to discuss college athletic spending

Athletic Spending in ACC and Big Ten

For my final CNS project, I wanted to learn parallax. Parallax is the difference between positions of an object viewed at different depths. It is from the Greek word parallaxis, which means alteration.

Parallax in web design has become huge. Web designers are using parallax scrolling to create the effect that images or text are moving at different speeds. As the user scrolls, different images and text come into view. It is a sort of animation — without needing something like Flash. View great examples of parallax scrolling in web design.

I based the graphic’s design on this demo. I also used a jQuery plugin called stellar.js for this project. Stellar.js makes coding parallax scrolling easier. You add data attributes to the html markup and then run $.stellar().

For this graphic, I compiled data from the Knight Commission on Intercollegiate Athletics. I compared athletic and academic spending at schools in the ACC and Big Ten conferences. And for an added focus, this graphic provides a look at athletic finances as the University of Maryland switches conferences from the ACC to the Big Ten.

I am excited to create more projects using parallax and stellar.js.

Designing a wine tasting chart

For the past two weeks, I have been designing a wine tasting chart to go along with an article about the growing Maryland wine industry. I used a color wheel mentality for the design, mirroring the circular, official wine tasting chart. The graphic is made purely with CSS and JavaScript.

I incorporated this CSS color wheel for the basic set up. But I needed to add another wheel layer on top of the first, to create more of a chart. This proved a bit difficult because instead of creating more pie slices, I had to make another, separate color wheel to create the inner layer. So, in effect, I was creating two color wheels for this project. There was some necessary manipulation to keep them from interfering with each other. I also added tooltips to provide more information on specific wines.

For this project I had to keep track of hundreds of lines of CSS and countless divs. I also learned more about the :before and :after properties, which change how elements are shown in a finalized version on the page. I struggled with and then mastered the text-transform property, used to rotate elements and text.

I’m improving with each project. This is one of the most time-consuming and complex interactives I’ve designed. I am extremely proud with how it turned out.

I hope it is useful to find which wine you want to try. Cheers!

Learning to build

Last week in Capital News Service I learned tabletop js and became “mustache champ,” which stands for my initials and the Mustache language. I’ve been learning new tools every week for the wire service, stretching and improving my coding abilities.

I brainstormed with a reporter writing a story about media choosing not to use the name Washington Redskins. We decided I would make a database listing a few publications and their editorial policy. My editor happened to attend the Online News Association conference last weekend and learned about tabletop — so he suggested I use it.

Tabletop allows you to display Google spreadsheets on websites. It simplifies the process of creating a database, and this way you don’t need to use MySQL. When you need to update the database, you can just update the Google spreadsheet — simple as that.

Since it was my first experience with tabletop, I decided to do some research. There are some great guides out there, like “The Absurdly Illustrated Guide to Sortable, Searchable Online Data Tables,” by Lisa Williams, or “Some Thoughts After a Couple Months With Tabletop and Handlebars,” by Chris Keller.

My editor wanted to link a Google Form to the database so we could crowdsource. Did readers know another publication choosing to drop or use a different reference for the team name? They could submit it to us with the Google Form. But then responses were being entered directly into the database — and we wanted to have more control over possible spam. How would I keep some rows of the spreadsheet hidden while the rest showed up on the site?

When I started to get confused and muddled, I didn’t fret. A great thing about the coding community that I’m beginning to see is how open and welcoming everyone is. They want to help. They struggled and got stuck before — it happens to all coders, beginners to the advanced.

stuck coding try taking a break

I reached out to @ChrisLKeller on Twitter — a great tool for instantly getting in touch with coders around the nation and world. He suggested handlebars. While I ended up not using handlebars for this project (I’m excited to learn it next), I found a tabletop query string that enabled me to only show certain rows of the spreadsheet. Something like query: "approved = >1" and putting “2” in the rows I wanted to display. This gave me control over what data would appear on the page viewers see.

I love the trial and error method behind coding. You really have to break something before you build it. This can be terrifying, but also exhilarating. When I figure a problem out in coding, there is nothing else like that triumphant feeling. It’s different than seeing my name in print or online. I’ve built something. I’ve created.

Check out the database below. Let me know what you think!

Becoming a cartographer

I created this interactive map using TileMill to show locations of bird-friendly coffee farms. TileMill is an application you download to your computer and use to code maps with many styles and zoom levels. The application uses a mixture of HTML, CSS and its own CartoCSS, a cartography-based CSS.


from French, cartographie, meaning chart

This was my first time using the program, and there was a slight learning curve, but I’m excited to use it again.

TileMill has different styles than Google Maps and allows for more customization. You can add several layers of data into TileMill. The mapping software allows you to pinpoint specific locations with geocoding. You can choose icons and customize the styling of tooltips that appear if you hover over the icons.

There have been very advanced maps made using TileMill. Check some out in their gallery.

Charting Maryland casino revenue

I created two charts that track Maryland casino revenue, using Highcharts. The website offers demos that make it easy to learn and make your own charts.

Highcharts uses JavaScript to make the charts interactive, clickable and add more data. You can create various graphs, including:

  • line charts
  • area charts
  • column and bar charts
  • pie charts
  • scatter and bubble charts
  • dynamic charts (like updating stock market charts)

It’s very easy to make your own chart using Highcharts’ documentation. You can change the axes, legend, symbols and more. They have several options and make the JavaScript simple.