HTML 5 has a new input type named ‘range’ which creates what all would normally call a slider. This input type deals with numbers. The code below when viewed in Google Chrome or Safari 5 will produce the ‘slider’ effect, the javacript will get the value of the slider while it is being moved in either direction and as a bonus change the width of the div that has the new rounded CSS corners. Unfortunately, if you do not view the code in an HTML 5 compatible browser it will simply render a textbox. What you should see can be found below.
First, gone are the days of cutting background images to fit in carefully placed div tags to make those rounded corners that everyone wants. The new CSS3 specs allow for rounding by bringing the new style:
GE Health Map, Explore the health of the nation county by county
It’s been a year since the government started the open data initiative, you can download mash up and view over 277,000 datasets at www.data.gov, but that wasn’t enough for some enterprising individuals. The website http://www.datamasher.org/ contains datasets from data.gov as well as state data, and datasets from nonprofit organizations. However, with healthcare such a big topic right now, by far one of the most impressive ‘data dashboards’ has to be the community health map developed by GE Health. You can click on the map at this link and navigate to the county level http://www.ge.com/visualization/county_health/index.html. This is the idea behind binding large data sets into intuitive visual displays, with 277K datasets at your fingertips you have more than enough to start working with.
More on visual information can be found here at Edward Tufte’s (created the march on Russia ) website http://www.edwardtufte.com/tufte/. The speaker does a great job of conveying the importance of visual displays of data, and we already know that we are overloaded with raw data. But just how do we build those graphical widgets into our websites, apps, or presentations? Luckily there are several charting packages that are available such as http://code.google.com/apis/charttools/ that allow us to connect backend data sources to a clean display. There is however a down side to all of this, which is the fact that we still need to know what types of displays are better for certain types of data which is where the presentation above comes into play. Some of the lesser known charts that come to mind after watching the presentation include:
This is a great way to show several data points over time, such as the example below that shows the entire 2009 Atlanta Braves season, where red lines denote a loss and black lines denote a win.
Atlanta Braves 2009 Season shown with SparkLines
This type of graph shows categories in a box where the size is indicative of the relative importance in relation to the category or group of data that is being viewed. For example, the chart below shows the most popular (measured by book sales) programming languages of 2007 .