Mary Becica mbecica

[ Launch Inlet ]Gist #3200444

This grouped bar chart is constructed from a CSV file storing the populations of different states by age group. The chart employs conventional margins and a number of D3 features:

d3.csv - load and parse data
d3.scale.ordinal - x-position encoding and color encoding
d3.scale.linear - y-position encoding
d3.format - SI prefix formatting (e.g., “10M” for 10,000,000)
d3.max - compute domains
d3.keys - compute column names
d3.svg.axis - display axes

	<!DOCTYPE HTML>
	<head>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	</head>
	<body>
	<script type="text/javascript">
	//Setup canvas
	var canvas = document.createElement("canvas");
	document.body.appendChild(canvas);
	canvas.width = 1000;

	<!DOCTYPE HTML>
	<head>
	<title>AppDirect release History</title>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js"></script>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.1/underscore-min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://raw.github.com/bigmlcom/tipsy/master/src/javascripts/jquery.tipsy.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="http://onehackoranother.com/projects/jquery/tipsy/stylesheets/tipsy.css" type="text/css" title="no title" charset="utf-8">
	</head>
	<style>

	<!DOCTYPE HTML>
	<head>
	<title>Stacked bar d3 canvas transition</title>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/2.8.1/d3.v2.min.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/zepto/1.0rc1/zepto.min.js"></script>
	</head>
	<body>
	<div id="graphs"></div>
	<button id="switch">Switch</button>

	<!DOCTYPE html>
	<head>
	<title>Some Physics</title>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/zepto/1.0rc1/zepto.min.js"></script>
	<script type="text/javascript" src="physics.js"></script>
	<style>
	body {
	margin:0;
	}
	</style>

	border: no
	height: 800
	license: gpl-3.0

	height: 600
	border: no
	license: gpl-3.0

	height: 600
	border: no
	license: gpl-3.0