Skip to content

Instantly share code, notes, and snippets.

@samanpwbb
Created April 17, 2012 23:07
Show Gist options
  • Save samanpwbb/2409754 to your computer and use it in GitHub Desktop.
Save samanpwbb/2409754 to your computer and use it in GitHub Desktop.
Hi Team,
We've had a great couple weeks building out the site. After sign-off on the mockups we started on the task of iteratively adapting the creative into the build and we are now at a good resting place to show off the site. Staging is here. Have a look and let me touch on some key components of the build and walk through our process.
Overall
We wanted the site to be highly indexable and fast. The exact parameters of the visualizations on the state profile and explore sections are linkable. Should a user want to send a link that targets a particular indicator and year, the URL will automatically reflect those configurations.
** Frontpage
*front page image*
The goal of the front page is to provide users with a high level understanding of the project quickly by illustrating the subject matter of the research project, providing an overview of the data, and introducing users to the structure of the site.
Upon hovering over an icon - visualized as sections of a classroom - a general overview queued to that section. To further illustrate this as windows to a classroom each section highlights a particular window in the main classroom icon.
*front page with popup*
Explore Interactive
This is the real meat of the site. This component of the site has been architected to be very fast and responsive. There are a number of visualization features here:
Policy values per state visualized as volume units
The ability to highlight a state and trace its policy value
Hovering over grade value links just above the visualization targets a particular grade category and dims out the other levels.
Among each main category there is an additional drill down menu that covers a more detailed indicator and refreshes the visualization
State profile pages
Functionally, this is very similar to the explore section. A date slider and unit highlighting is available. It's primary intent is to show off all values per state at once, grouped together by high level indicators.
Methodology and static pages
Site Management and Editing
Any longer paragraph passages are editable through a content editor. You can access the editor online by visiting: columnist.devseed.com
Editing page sections
Once logged in as the project user on GitHub, Columnist provides access to editing content in the Methodology, About and Download data section.
Code
Project files are hosted on github. There you will find source files for the site and map used on state pages. The map data and layers are editable via TileMill, our map editing toolkit. You can learn more about getting started with the map layer under the TileMill section of thereadme.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment