ix4

A cartogram of rectangular blocks displaying the relative weight of different states of India based on different statistical parameters.

Testing in-browser gif generation from an SVG with gif.js. Works in recent Chrome/Safari/Firefox.

Process:

Create a standard SVG line chart.
Step through in-between frames of the line chart: for each one, update the SVG, render to an image, add the image element to a stack of gif frames.
Render frames together in the background using gif.js web workers.
When rendering's complete, add the blob URL as an image and start the SVG on an infinite loop with d3.timer (gratuitous).

	reported,date,shooter,killed,wounded,location,article1,article2,article3,article4,article5,article6,article7,article8,article9
	,1/1/2013,Carlito Montoya,4,0,"Sacramento, CA",http://sanfrancisco.cbslocal.com/2013/01/12/3-young-men-teenage-boy-murdered-on-oakland-streets-in-6-hours-no-arrests/,http://hinterlandgazette.com/2013/01/oakland-gun-violence-ken-harbin-larry-lovette-eddiebo-rodriguez-4-killed-6hour-span.html,http://www.huffingtonpost.com/2013/01/12/oakland-shootings_n_2464783.html,,,,,,
	,1/1/2013,Unknown,1,3,"Hawthorne, CA",http://losangeles.cbslocal.com/2013/01/01/man-killed-3-wounded-at-nye-party-in-hawthorne/,http://latimesblogs.latimes.com/lanow/2013/01/hawthorne-new-year-party-three-killed.html,,,,,,,
	,1/1/2013,Julian Sims,0,4,"McKeesport, PA",http://pittsburgh.cbslocal.com/2013/01/01/4-people-shot-in-mckeesport/,http://www.wtae.com/news/local/allegheny/U-S-Marshals-task-force-arrests-New-Year-s-party-shooting-suspect/-/10927008/17977588/-/1ydqtj/-/index.html,,,,,,,
	,1/1/2013,"Desmen Noble, Da

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">

	<!-- D3.js -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

	<!-- Google fonts -->
	<link href='https://fonts.googleapis.com/css?family=Cardo:400,400italic,700' rel='stylesheet' type='text/css'>

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>US Electoral Map</title>
	<link rel="stylesheet" href="style.css"/>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<script src="http://d3js.org/d3.v2.min.js?2.10.1"></script>
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

	<!DOCTYPE html>
	<html>
	<head>
	<title>Election Mapping Bonanza</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700\|Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>

	<style>