Tech Notes of LaoGen'er: 2009

Cheat Sheet 一词在中文中并没有很贴切的对译，大概是考试作弊条一类的东西，这要求 Cheat Sheet 必须短小精悍又覆盖广泛，作为 Web 开发与设计师，免不了在工作时查询大量资料，某个 Web 色值，某个 JavaScript 库的核心语法，这类资料如果攒齐了，怕有半间屋子那么多，如果用 Cheet Sheet 也许几十页纸就够了，本文收集了近百份用于 Web 开发与设计的 Cheet Sheet，你会发现他们非常实用。
HTML, XHTML, CSS2
CSS2 Cheat Sheet

不仅是一份完整的 CSS2 速查手册，还让你了解每个属性该怎么用。预览下载（PDF）

Gosquared CSS help sheets
设计和结构都很整齐，漂亮。下载（PDF）

addedbytes CSS2 Cheat Sheet
该速查手册只有一页纸，包含 CSS 2.1 全部选择器和属性，还包含一个盒子模型示例。下载（PDF PNG）

Core css
将 CSS 的核心知识分成3部分，包含了 CSS 的方方面面。下载（需免费注册）

CSS Shorthand Cheat Sheet
一些不容易记住的 CSS 元素。下载（PDF）

CSS2 – Quick Reference Guide – PDF 下载（PDF）

XHTML 1.1 Cheat Sheet
XHTML 1.1 细则中涉及到的所有元素与属性。预览下载

Gosquared html help sheets
设计漂亮，结构精良的 HTML 速查。下载（PDF）

HTML Cheat Sheet
一份 A4 纸大小的单页 HTML 速查表。下载（PDF PNG）

HTML5 Canvas Cheat Sheet
HTML5 Canvas 对象的速查手册，直接编译自 WHATWG specs 细则，只是更容易阅读一些。下载（PDF PNG）

HTML Character Entities Cheat Sheet
HTML 字符标识速查。下载（ PDF PNG）

HTML Character Entities Cheat Sheet
该表包含 HTML 4 字符标识，包括 ISO8859-1 (Latin-1) 中的字符。预览下载

HTML Colors Cheat Sheet
该 HTML 颜色表包含 1050 种颜色，按色度区分，每个色度包含25中不同饱和度与亮度。还包含216种 Web 安全色。预览下载（PDF）

RGB Hex Colour Chart
RGB 16进制颜色表。包含216种 Web 安全色。下载（PNG PDF）

Scripting 速查手册
JavaScript Cheat Sheet
包含 JavaScript 的的方法与函数，正则表单时，以及 XMLHttpRequest 对象。下载（PNG PDF）

JavaScript DOM Cheatsheet
JavaScript DOM 结构速查手册。下载（PDF）

jQuery 1.3 Cheat Sheet
jQuery 1.3 速查表。预览下载（PDF）

jQuery Cheat Sheet 1.2 jQuery 1.2 速查手册下载（PDF）

mootools 1.2 cheat sheet
另一个 JavaScript 库 MooTools 1.2 速查手册。下载（PDF）

prototype 1.5.0 JavaScript 库 Prototype 1.5 速查手册。下载（PDF）

Prototype 1.6.0.2 Cheat Sheet
JavaScript 库 Prototype 1.6.0.2 速查手册。下载（PDF）

Addison-Wesley’s JavaScript Reference Card
JavaScript 参考手册。下载（PDF）

jQuery selectors
对 jQuery 开发者来说，该速查手册不可或缺，详细列举了 jQuery 所有选择器。下载（徐免费注册）
服务器端编程

PHP Cheat Sheet (V2)
单页 PHP 参考手册，包含日期格式，正则表达式以及常用函数。下载（PDF PNG）
visibone
该站包含2页基本PHP速查手册，以及8页高级速查手册。非免费。

Php 4 Reference Card PHP4 参考速查手册。下载（PDF）

PHP Cheat Sheet
PHP 比较操作速查手册。下载

Core C# and .NET Quick Reference C# 与 .NET 速查参考手册。下载（PDF）

ASP.net ASP.NET 速查参考手册。下载

MS ASP 古老的 ASP 与 VB Script 速查手册。下载（PNG PDF）

msnet formatting strings 微软 .NET 字符串格式化速查。下载（PDF）

SQL (Structured Query Language) in one page SQL 语言速查。直接访问

MySQL Cheat Sheet MySQL 速查。下载（PNG PDF）

XML (eXtensible Markup Language) in one page XML 单页速查手册。直接访问

XML Syntax Quick Reference XML 语法参考。下载（PDF）

SEO 速查手册
The Web Developer’s SEO Cheat Sheet
出自 SEO MOZ 的 SEO 速查手册，包括重要的 SEO HTML 标签，搜索引擎索引的限制，Title 标签语法建议等。下载（PDF）

本文资料来源：http://www.tripwiremagazine.com/tools/cheat-sheets/front-end-web-developers-toolbox.html翻译整理：COMSHARP CMS 官方网站

1 Jun

50 Great Examples of Data Visualization

Categories: Design, Information, Visualization

40

Wrapping your brain around data online can be challenging, especially when dealing with huge volumes of information.

And trying to find related content can also be difficult, depending on what data you’re looking for.

But data visualizations can make all of that much easier, allowing you to see the concepts that you’re learning about in a more interesting, and often more useful manner.

Below are 50 of the best data visualizations and tools for creating your own visualizations out there, covering everything from Digg activity to network connectivity to what’s currently happening on Twitter.

Music, Movies and Other Media

Narratives 2.0 visualizes music. Different music tracks are segmented into single channels that are then shown in a fan-like structure.

Liveplasma is a music and movie visualization app that aims to help you discover other musicians or movies you might enjoy. Type in the name of a band, artist, movie, director or actor and liveplasma will show you related people, bands or movies.

Tuneglue is another music visualization service. Just type any artist or band into the search box and hit enter. A circle comes up representing that band. You can then expand from there, clicking on any new additions after each expansion to expand further. By click on “releases” you can order their albums from Amazon.

MusicMap is similar to TuneGlue in its interface, but seems slightly more intuitive. Search for an artist or band and a list of albums will come up. Once you choose an album a circle pops up on the map. From there you can expand to get related albums, remove that album, or get more information.

Last.Forward is a downloadable, open-source tool to visualize any Last.fm user’s social network, including relationships between other users.

Fidg’t is a desktop app that uses Flickr and Last.fm tags to let you visualize your network and their tagging activities. You can see what your network’s predispositions are toward different tags and types of content.

Digg, Twitter, Delicious, and Flickr

Looks Del.icio.us is a collection of different Delicious bookmark visualizations. They’re created with a python-based graphics library and layout engine.

Arc is a product from Digg Labs that shows the latest Diggs, and the relationships between the users submitting and digging them. There are two different speed modes, the slower of which is great if you actually want to read the story headlines.

Stack is probably the most useful of the visualization offerings from Digg. Stories with the most recent activity load across the bottom of the screen and then ‘Diggs’ seemingly fall from the sky to land and create a real-time graph of what stories are popular. Whenever a ‘Digg’ hits a story stack, the title of the story is shown at the bottom of the screen, pushing previous stories down, and eventually off the screen.

Swarm has one of the cooler user interfaces of all the Digg Labs offerings, with stories and users flying around on the screen. When someone ‘diggs’ a story, they fly over to the circle representing the story itself and are briefly linked up to it. Hovering over a story or user shows its name and allows you to click. You can also download Swarm as a screensaver.

Research Chronology shows the relationships between one student’s research paths via Delicious bookmarks over the course of a semester. It’s an ongoing project and includes bookmarks for more than 270 websites.

TwittEarth shows live tweets from all over the world on a 3D globe. It’s a great visualization tool to see where tweets are coming from in real time and discover new people to follow. It’s also fascinating just to sit and watch.

Tag Galaxy lets you search for Flickr tags and have them shown visually in a mockup of a star system. Clicking on any planet (tag) within the first representation changes the image and recenters that tag as the star and pops up new related tags as planets. Clicking on the sun itself brings up a globe covered in images tagged as you’ve specified.

The Flickr Related Tag Browser allows you to search for a series of tags and see related tags. Clicking on a different tag brings up new related tags. You can zoom into the tag selected in the center of the screen by hovering and see images tagged with that word. It also gives a total image count and lets you browse by page.

Internet Visualizations

Mapping the Blogosphere is a collection of maps of the blogosphere, including hyperbolic maps, as shown here.

The Twingly Screensaver visualizes the blogosphere worldwide in real time. You get a continuous feed of blog activity straight to your screen.

Web Trend Map 4 shows a visualization of current trends online. This is the fourth iteration of this map and the most detailed one yet.

The Bloom Diagram is a project from the IBM Watson Research Center that visualizes the contributions of individuals to open source projects.

Akami Real-time Web Monitor shows a map of the world with real-time information about internet traffic, latency and current network attacks. The maps are color-coded and easy to read, but only give very generalized information.

The Mapa de Conocimiento (Map of Knowledge) is a schematic of knowledge involved in any given idea or project. Built in Flash, this tool visualizes a group of URLs organized under main ideas. The map is available in English and Spanish.

Akami Network Performance Comparison shows the packet loss and network speeds between different cities around the world (to showcase how their technology is better than the standard “public” internet). It also shows graphs of the information.

Internet Health Report shows the latency, packet loss, and network availability of the major ISPs and backbone providers worldwide in a color-coded grid format. Hovering over any of the cells in the grid gives more information about the health of that particular connection.

The Hierarchical Structure of the Internet was a study that looks at how the Internet is organized, both in terms of structure and connectivity. It shows how the central core of the Internet is made up of about 80 core nodes, but that even if those nodes failed, 70% of the other nodes would still function via peer-to-peer connections.

Rootzmap—Mapping the Internet is a series of maps based on data sets provided by NASA and created by Philippe Bourcier. There are a number of different maps available.

Websites as Graphs shows the structure of different websites based on the tags used in their code in a color-coded map that grows on the screen as you watch. Tags are somewhat intuitive in their color-codes, with blue for links, red for tables, and gray for any tags not specifically given a color.

Schemaball visualizes SQL database schema. Relationships are shown based on foreign keys within tables. It’s capable of showing schemas with hundreds of different tables and relationships.

The Opte Project aims to map every class C network on the Internet from a single computer and a single Internet connection. The overall goal is to create a map of the entire Internet.

Miscellaneous Visualizations and Tools

Visualizing Information Flow in Science includes a set of four visualizations showing relationships between citations in scholarly journals that are used to evaluate the importance of each journal.

The Micro Fashion Network: Color visualizations show the continuous change of styles in fashion, with a particular look at the basic elements of color. It was created by using a fixed camera and special software to map the colors of clothing people in Cambridge were wearing.

The TED Sphere shows videos from the TED conference in a spherical format with 3D navigation. You can view the sphere from inside or outside and the layout of videos is based on semantic compatibility.

Visualizing The Bible gives a visual overview of more than 63,000 textual cross-references within the Bible. It’s intention is to be more beautiful than functional.

Walrus is a visualization tool that allows you to interact with massive graphs in a 3D interface. Interaction is based on selecting any node and then having the graph zoom in to expand on that point.

We Feel Fine is one of the most interesting visualization tools I came across. It provides visualizations on the general feelings populating the blogosphere on any given day. You can filter results based on age, location, gender, weather, and other criteria. There are six different visualizations available: Madness, Murmurs, Montage, Mobs, Metrics, and Mounds, each of which give a different portrait of the general feelings abounding on the internet.

One Week of The Guardian is a visualization of the stories from The Guardian newspaper. It focuses on the relationships between headlines, authors, pages, and categories.

Nemulator is a project that aims to visualize “nemes,” or different fragments of states of mind. It also aims to serve as a starting point for discussions relating to the scalability of nemes.

Voyage is a web-based RSS reader that visually displays RSS feeds on a timeline. It’s a great way to explore the different feeds you subscribe in a completely different format.

Blooming Numbers is the 2006 CGD MFA Thesis Project of Yuri Lee. It’s goal is to show the relationships between preferences of numbers and cultural contexts in an interactive way.

CIA World Factbook Visualization shows a visualization of relationships between different countries and continents based on data from the CIA World Factbook. It shows semantic relationships for each country, including neighboring countries, languages, water and terrestrial boundaries, and more.

TextArc Visualization of The History of Science is a static visualization of the book The History of Science. It was originally displayed at the NYPL Science, Industry, and Business Library in New York.

This Newspaper Map is a visualization of the rules of the daily production of a newspaper is a striking graphic format. The closeness of words signifies their relationships with each other as do lines traced between words.

GraphNews is a news visualization browser from the Libero WebNews service. It shows news stories in a mind-map-like format. Clicking on one node recreates the graph with the clicked item as the focus.

Newsmap shows a visual representation of current headlines on Google News. It shows the relationships and patterns between different news stories across cultures and within different news segments. Be sure to click to the new JavaScript version for the best features.

FreeMind is a Java-based mind mapping software that allows you to build your own data visualizations quickly and easily. Finished maps can be exported into clickable XHTML files as well as other formats.

Resource System Reference Database was presented as a poster at InfoVis2004, IEEE’s annual conference. In this visualization, line weight shows the strength of relationships.

Is the New documents instances of the phrase “is the new” and shows the relationships between the subject and object of that phrase. Examples include “Purple is the new pink” and “Technology is the new religion.”

WikiMindMap is a tool to visually browse Wiki content in a mind-map format and includes the ability to download any of their mindmaps in FreeMind format.

How Scientific Paradigms Relate shows the relationships between more than 700 scientific paradigms based on how they were mentioned in more than 800,000 scientific papers. Relationships are also based on how often different papers were cited by each other and by authors of other papers.

Universe is a great app for visualizing the “universe” of particular search terms. There are sample terms available or you can input whatever you choose. The visualization given is reminiscent of astronomical charts.

visualcomplexity.com isn’t strictly a visualization software, but rather a collection of visualizations already created and categorized. Categories include business networks, art, internet, knowledge networks, biology, transportation networks, social networks, and more.

The Strengths of Nations is a visualization of the scientific advancement of ten different nations, including the United States, United Kingdom, France, China, and Australia. The map analyzes 23 different scientific areas, including math, biochemistry, and astrophysics.

Written exclusively for WDD by Cameron Chapman, a freelance writer and designer.

Which 0nes are your favorites? How important is the way we visualize data? Please share your comments with us…