Jacob Brown kardeiz

CNI Fall 2012 Meeting

Website: Fall 2012 Meeting
Twitter: #cni12f

Disclaimer 1: These notes provide my perception and understanding of the CNI conference presentations. It is possible that errors were made in the reporting or that speaker statements have been inadvertently misrepresented.

Switch between stacked and grouped layouts using sequenced transitions! Animations preserve object constancy and allow the user to follow the data across views. Animation design by Heer and Robertson. Colors and data generation inspired by Byron and Wattenberg.

This stacked area chart is constructed from a TSV file storing the market share of several popular web browsers over the last year. Data is from Clicky Web Analytics. The chart employs conventional margins and a number of D3 features:

d3.tsv - load and parse data
d3.time.format - parse dates
d3.format - format percentages
d3.time.scale - x-position encoding
d3.scale.linear - y-position encoding
d3.scale.category20, a d3.scale.ordinal - color encoding
[d3.extent](https://github.com/mbostock/d3/wiki/Arrays#wiki-d3_exten

Jacob Brown

[email protected]
214/223-1654

EDUCATION

M.S., Information Science (Digital Imaging). University of North Texas. December 2011. (4.0 GPA.)

	// This may not be the most efficient way to do this, but it's pretty clean

	var yourObject = d3.nest()
	.key(function(d) { return d; })
	.rollup(function(d) { return d.length; })
	.map(yourArray);

	// e.g.,
	// var input = ["this","is","a","test","for","this","method"];
	// var output = {"this":2,"is":1,"a":1,"test":1,"for":1,"method":1}

	#!/usr/bin/env ruby
	# encoding: utf-8

	# This works pretty well, but can't yet go up dir tree
	# Also doesn't work on JS generated hrefs/srcs
	# I was surprised there wasn't a ready-made solution online (that I could quickly find)

	require 'open-uri'
	require 'nokogiri'
	require 'active_support/core_ext'

	<html>
	<head>
	<title>Sankey Diagram</title>
	<script src="../assets/d3.v2.js"></script>
	<script src="../assets/sankey.js"></script>
	<script src="../assets/jquery-1.8.3.min.js"></script>
	<script src="../assets/underscore.js"></script>
	<script src="../assets/underscore.nest.js"></script>
	<script src="../assets/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.js"></script>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

	(function(){

	if (typeof jQuery=='undefined') {
	var headTag = document.getElementsByTagName("head")[0];
	var jqTag = document.createElement('script');
	jqTag.type = 'text/javascript';
	jqTag.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js';
	jqTag.onload = (function(){ myJQueryCode(jQuery); });
	headTag.appendChild(jqTag);
	} else {

	<?xml version="1.0" encoding="UTF-8"?>
	<!-- Derived from imlsdcc.grainger.uiuc.edu/docs/stylesheets/GeneralMARCtoQDC.xsl -->
	<xsl:stylesheet version="1.0" xmlns:marc="http://www.loc.gov/MARC21/slim" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" exclude-result-prefixes="marc">
	<xsl:template name="subfieldSelect">
	<xsl:param name="codes"/>
	<xsl:param name="delimeter">
	<xsl:text> </xsl:text>
	</xsl:param>
	<xsl:variable name="str">
	<xsl:for-each select="marc:subfield">

	<html>
	<head>
	<title>Charts</title>
	<!-- <script src="../assets/d3.v2.js"></script> -->
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="../assets/sankey.js"></script>
	<script src="../assets/jquery-1.8.3.min.js"></script>
	<script src="../assets/underscore.js"></script>
	<script src="../assets/underscore.nest.js"></script>
	<script src="../assets/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.js"></script>