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.

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.

cartographer

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.