Javascript

Screen Shot 2014-11-09 at 7.21.41 PMThis 2012 post by the Guardian is a pretty cool way to show data. The story is gay rights in the US, and they have different interactive charts that show where each state stands in gay rights. They have the categories broken down by color, so you can get an easy visual just by glancing at the chart and key. But if you want more specific information, you just hover over the slice that represents the state and information shows up along the side. If you scroll down, the areas of gay rights are broken down by region and further discussed.

I noticed they had a few small problems- like in some of the regional charts, only one of the highlighted categories descriptions pops up. For example, you can clearly see that Minnesota allows both single and joint adoptions, but when you hover, it only says single. Otherwise, however, the story seems pretty successful.

You can see they used javascript to make it interactive- it’s how they have the hovering and have the information pop up at the side. CSS was mainly used for basic styling. I just really think it’s a cool way to make data interactive, so that the viewer doesn’t get lost in all the information and can focus on however much of the data they wish at one time.

Advertisements

3 thoughts on “Javascript

  1. Zhao Hong says:

    This is exactly the data visualization I want to do. It’s simple and clear but is based on serious and rich data content, which requires a lot of searching, arrangement and analysis. One thing I noticed is that the saturation of color also indicates different degrees of the execution of the rights. For example, the color green infers employment. The saturated green means “prohibits discrimination based on gender identity and sexual orientation.” The light green (NY, WI & NH) means “prohibits discrimination based on sexual orientation.”

    Like

  2. georgedumontier says:

    This thing is awesome. CSS and javascript alone is pretty limited for data visualization like this. That’s why they used SVGs. You can do anything you can think of with them. Unfortunately the syntax is a little different from CSS. Here’s a good article on SVGs in HTML if you’re interested. https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial

    Also D3 is the industry standard nowadays for fancy data viz like this. If you’re interested, Mike Jenner is putting together a two hour class next semester focused solely around D3.

    Like

  3. arw62d says:

    This is very similar to the data visualization I posted from National Geographic earlier this week. I’m pretty sure they used D3 to put most of it together and JavaScript for some of the simpler effects for the overall page. I wonder how close you could get to something like this JavaScript alone.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s