<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Know How Design</title>
	<atom:link href="http://knowhowdesign.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://knowhowdesign.com</link>
	<description>KnowHowDesign.com</description>
	<lastBuildDate>Wed, 23 Nov 2011 14:27:48 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.1-RC1</generator>
<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />
		<item>
		<title>Javascript Library for Building a Timeline of Events</title>
		<link>http://knowhowdesign.com/javascript-library-for-building-a-timeline-of-events/</link>
		<comments>http://knowhowdesign.com/javascript-library-for-building-a-timeline-of-events/#comments</comments>
		<pubDate>Wed, 23 Nov 2011 14:12:29 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Code Libraries]]></category>

		<guid isPermaLink="false">http://knowhowdesign.com/?p=124</guid>
		<description><![CDATA[While researching an article for JavaScript based graphing solutions, I happened upon the project page for SIMILE Widgets JavaScript libraries.  SIMILE Widgets has a a number of other interesting libraries (see &#8216;Runway&#8217;, a JavaScript based clone of iTunes &#8216;Covershow&#8217;) but &#8230; <a href="http://knowhowdesign.com/javascript-library-for-building-a-timeline-of-events/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>While researching an article for <a title="Javascript Graphing Libraries" href="http://knowhowdesign.com/four-javascript-libraries-for-dynamic-charts-and-interactive-data-2011/">JavaScript based graphing solutions</a>, I happened upon the project page for <a title="SIMILE Widgets" href="http://www.simile-widgets.org/">SIMILE Widgets JavaScript libraries</a>.  SIMILE Widgets has a a number of other interesting libraries (see &#8216;Runway&#8217;, a JavaScript based clone of iTunes &#8216;Covershow&#8217;) but the project that captured my attention was the &#8221;<em>Timeline&#8221;</em> library.  As the name suggests, <em>Timeline</em> allows the developer to create an interactive timeline, thus &#8216;Visualizing Temporal Data&#8217;.  <em>Timeline</em> creates an easily accessible, engaging and interactive visualization that immediately had me immersed.</p>
<p>Check out the demo <a title="Timeline of the JFK Assasination" href="http://www.simile-widgets.org/timeline/">Timeline of the JFK assasination</a>:<br />
<a href="http://www.simile-widgets.org/timeline/"><img class="alignnone size-large wp-image-128" title="timeline" src="http://knowhowdesign.com/wp-content/uploads/2011/11/23/javascript-library-for-building-a-timeline-of-events/timeline-1024x290.jpg" alt="" width="640" height="181" /></a></p>
<p>I searched high and low and a was unable to find a competing solution that comes close to SIMILE Widgets&#8217; <em>Timeline</em>.  To my knowledge nothing comes close.  Additionally, a independently developed supporting library aptly named <em>TimeMap</em> uses Google, OpenLayers, and Bing in coordination with the SIMILE <em>Timeline</em> library to load one or more datasets in JSON, KML, or GeoRSS onto both a map and a timeline simultaneously.  You can check out the project Timeline library <a title="SIMILE Widgets Timeline" href="http://code.google.com/p/timemap/">here</a> and the Timemap project on google code <a title="Timemap" href="http://code.google.com/p/timemap/">here</a>.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://knowhowdesign.com/javascript-library-for-building-a-timeline-of-events/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Four Javascript Libraries for Dynamic Charts and Interactive Data 2011</title>
		<link>http://knowhowdesign.com/four-javascript-libraries-for-dynamic-charts-and-interactive-data-2011/</link>
		<comments>http://knowhowdesign.com/four-javascript-libraries-for-dynamic-charts-and-interactive-data-2011/#comments</comments>
		<pubDate>Mon, 21 Nov 2011 15:36:45 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Code Libraries]]></category>
		<category><![CDATA[data visualization]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://knowhowdesign.com/?p=104</guid>
		<description><![CDATA[A number of maturing JavaScript libraries now allow web developers and designers to create beautiful new visualizations quickly and easily.  With the approach of an HTML5 internet, we can expect these types of tools and their level of interactivity to &#8230; <a href="http://knowhowdesign.com/four-javascript-libraries-for-dynamic-charts-and-interactive-data-2011/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>A number of maturing JavaScript libraries now allow web developers and designers to create beautiful new visualizations quickly and easily.  With the approach of an HTML5 internet, we can expect these types of tools and their level of interactivity to continue to improve.  Today we are highlighting a few of the best JavaScript libraries available for quickly creating a nice balance between aesthetics and accessible info.</p>
<h3><a title="D3" href="http://mbostock.github.com/d3/"><strong>D3.js</strong></a></h3>
<p>The makers of D3.js (previously Protovis) have created an elegant library enabling the developer to bind data to a Document Object Model,  and then apply data-driven transformations.  This type of functionality that will become native with HTML5 and the Canvas object and D3.js is poised for the transition with this powerful set of libraries.</p>
<p>D3 Choropleth:<img class="alignnone size-full wp-image-106" title="d3-js-choropleth" src="http://knowhowdesign.com/wp-content/uploads/2011/11/21/four-javascript-libraries-for-dynamic-charts-and-interactive-data-2011/d3-js-choropleth.jpg" alt="" width="950" height="497" /><a href="http://knowhowdesign.com/wp-content/uploads/2011/11/21/four-javascript-libraries-for-dynamic-charts-and-interactive-data-2011/d3-js-treemap.jpg"></a></p>
<p>D3 TreeMap:<img class="alignnone size-full wp-image-105" title="d3-js-treemap" src="http://knowhowdesign.com/wp-content/uploads/2011/11/21/four-javascript-libraries-for-dynamic-charts-and-interactive-data-2011/d3-js-treemap.jpg" alt="" width="950" height="495" /></p>
<h3><a title="InfoVis Toolkit" href="http://thejit.org/demos/">JavaScript InfoVis Toolkit</a></h3>
<p>Equally compelling and comparible to D3.js is the InfoVis Toolkit.  Created by Nicolas Garcia Belmonte, InfoVis is standards based, fast, beautiful and interactive.  Similarly to D3.js, InfoVis allows you to create a canvas and bind data as objects while providing a powerful library for interactivity.</p>
<p>InfoVis Pie Chart:<img class="alignnone size-full wp-image-110" title="infovis-pie" src="http://knowhowdesign.com/wp-content/uploads/2011/11/21/four-javascript-libraries-for-dynamic-charts-and-interactive-data-2011/infovis-pie.jpg" alt="" width="638" height="593" /></p>
<p>InfoVis SunBurst:<img class="alignnone size-full wp-image-108" title="infovis-suburst" src="http://knowhowdesign.com/wp-content/uploads/2011/11/21/four-javascript-libraries-for-dynamic-charts-and-interactive-data-2011/infovis-suburst.jpg" alt="" width="638" height="595" /><a href="http://knowhowdesign.com/wp-content/uploads/2011/11/21/four-javascript-libraries-for-dynamic-charts-and-interactive-data-2011/infovis-treemap.jpg"></a></p>
<p>InfoVis TreeMap:<img class="alignnone size-full wp-image-109" title="infovis-treemap" src="http://knowhowdesign.com/wp-content/uploads/2011/11/21/four-javascript-libraries-for-dynamic-charts-and-interactive-data-2011/infovis-treemap.jpg" alt="" width="638" height="595" /></p>
<h3><a title="HighCharts" href="http://www.highcharts.com/demo/line-ajax">HighCharts</a></h3>
<p>Highcharts is a charting library written in pure JavaScript.  Straightforward and intuitive, they currently support line, spline, area, areaspline, column, bar, pie and scatter chart types.  They are perfect for traditional chart types that seamlessly integrating interactive and real time features.  HighCharts has a sister library especially for stock market data called HighStock.</p>
<p>Ajax loaded data with clickable points. If you are familiar with Google Analytics Charts, you will recognize this one.  <img class="alignnone size-full wp-image-113" title="highcharts-clickable" src="http://knowhowdesign.com/wp-content/uploads/2011/11/21/four-javascript-libraries-for-dynamic-charts-and-interactive-data-2011/highcharts-clickable.jpg" alt="" width="1042" height="420" /></p>
<p>HighCharts Pie Chart:<img class="alignnone size-full wp-image-112" title="highcharts-pie" src="http://knowhowdesign.com/wp-content/uploads/2011/11/21/four-javascript-libraries-for-dynamic-charts-and-interactive-data-2011/highcharts-pie.jpg" alt="" width="1042" height="419" /></p>
<p>HighCharts Combo Chart:<img class="alignnone size-full wp-image-111" title="highchart-combo" src="http://knowhowdesign.com/wp-content/uploads/2011/11/21/four-javascript-libraries-for-dynamic-charts-and-interactive-data-2011/highchart-combo.png" alt="" width="1044" height="419" /></p>
<h3><a title="dygraphs" href="http://dygraphs.com/#demo">Dygraphs</a></h3>
<p>dygraphs is an open source JavaScript library that produces produces  interactive, zoomable charts of time series. It is designed to display  dense data sets and enable users to explore and interpret them.</p>
<p>Comparing two datasets:<img class="alignnone size-full wp-image-114" title="dygraphs-compare" src="http://knowhowdesign.com/wp-content/uploads/2011/11/21/four-javascript-libraries-for-dynamic-charts-and-interactive-data-2011/dygraphs-compare.jpg" alt="" width="843" height="351" /></p>
<p>U2MRWT3FRYX6</p>
]]></content:encoded>
			<wfw:commentRss>http://knowhowdesign.com/four-javascript-libraries-for-dynamic-charts-and-interactive-data-2011/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Online Tools to Compare Screen Fonts and CSS</title>
		<link>http://knowhowdesign.com/online-tools-to-compare-screen-fonts-and-css/</link>
		<comments>http://knowhowdesign.com/online-tools-to-compare-screen-fonts-and-css/#comments</comments>
		<pubDate>Fri, 11 Nov 2011 11:11:50 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Online Tools]]></category>
		<category><![CDATA[typography]]></category>

		<guid isPermaLink="false">http://knowhowdesign.com/?p=88</guid>
		<description><![CDATA[In-browser online tools can be a great way to experiment with typography as you develop your website designs. The most useful allow you to compare different typefaces side-by-side.  Two such tools, Typetester and FontTester, allow you compare three fonts simultaneously.   &#8230; <a href="http://knowhowdesign.com/online-tools-to-compare-screen-fonts-and-css/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>In-browser online tools can be a great way to experiment with typography as you develop your website designs. The most useful allow you to compare different typefaces side-by-side.  Two such tools, Typetester and FontTester, allow you compare three fonts simultaneously.   Both sites allow you to change the color, leading, tracking, size, the latter of which has slightly more options for tweaking the CSS styles of your font.  Both prove to be indispensable tools when brainstorming over which fonts and styles to use for different elements or for compiling font stacks.</p>
<p><strong>TypeTester</strong></p>
<p><a title="TypeTester - Compare fonts for the screen" href="http://www.typetester.org/"><img class="alignnone size-large wp-image-89" title="typetester" src="http://knowhowdesign.com/wp-content/uploads/2011/11/11/online-tools-to-compare-screen-fonts-and-css/typetester-1024x480.png" alt="" width="640" height="300" /></a></p>
<p>&nbsp;</p>
<p><strong>FontTester</strong></p>
<p><a title="FontTester - CSS font comparison tool" href="http://www.fonttester.com/"><img class="alignnone size-large wp-image-94" title="fonttester" src="http://knowhowdesign.com/wp-content/uploads/2011/11/11/online-tools-to-compare-screen-fonts-and-css/fonttester-1024x482.png" alt="" width="640" height="301" /></a></p>
<p>A complimentary site that will help you with your style type-storming is  TypeChart.  Browse through existing css styles and fonts to get the  creative juices flowing, then copy your selection into Typetester and  FontTester to refine your styles and make them your own.</p>
<p><strong>TypeChart</strong></p>
<p><strong><a title="TypeChart - Browse Web Type" href="http://www.typechart.com"><img class="alignnone size-large wp-image-91" title="typechart" src="http://knowhowdesign.com/wp-content/uploads/2011/11/11/online-tools-to-compare-screen-fonts-and-css/typechart-1024x483.png" alt="" width="640" height="301" /></a></strong></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="_mcePaste" class="mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow: hidden;">http://www.typechart.com/Type</div>
]]></content:encoded>
			<wfw:commentRss>http://knowhowdesign.com/online-tools-to-compare-screen-fonts-and-css/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Welcome</title>
		<link>http://knowhowdesign.com/welcome/</link>
		<comments>http://knowhowdesign.com/welcome/#comments</comments>
		<pubDate>Tue, 13 Sep 2011 03:13:27 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://knowhowdesign.com/?p=18</guid>
		<description><![CDATA[]]></description>
			<content:encoded><![CDATA[]]></content:encoded>
			<wfw:commentRss>http://knowhowdesign.com/welcome/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

