timelyportfolio timelyportfolio

group	date	value
1	2008-01	10
1	2008-04	8
1	2008-07	14
1	2008-10	9
1	2009-01	10
1	2009-04	8
1	2009-07	14
1	2009-10	9
2	2008-01	3

#zui53 Zoom Adaptation of Mike Bostock's Line Chart I have not seen anyone pair zui53 with so I thought I would experiment by adding the zoom and drag functionality to this line chart. I also wanted to test my skills by using a long form csv dataset with two series. zui53 zoom and drag does not work in Internet Explorer. Works best when opened in full window

Original Readme.md is below

A line chart with mouseover so that you can read the y-value based on the closest x-value. The x-value is found using d3.mouse and scale.invert. The y-value is then found by bisecting the data.

This chart compares the BRIC countries (Brazil, Russia, India and China) with a new group of upstarts, MIST (Mexico, Indonesia, South Korea, Turkey). The data are from the World Bank. It was my attempt to achieve object constancy for multiple sets of time series data. I used d3.nest() to sort one big CSV file based on each economic indicator, then used d3.key() on the header row (the countries) to make ensure constancy. Check the boxes at the top to highlight the country groups. An interpretation of this visual can be found on my website.

###d3 inside a resizable and draggable jquery ui element This offers an example of how we might use the jquery ui interactions to act as a container for a d3 graph. I randomly chose this example from Mike Bostock, but really any d3 could benefit from this behavior. The majority of this code (probably all the good stuff) should be attributed to the following references:

###original readme.md is below describing the d3 portion of the code This example demonstrates how to add visible and draggable handles to D3’s d3.svg.brush component, rather than that relying on the invisible boundary of the brush extent. The handle sizes here are exaggerated for demonstration purposes!

source	target	value
Agricultural Energy Use	Carbon Dioxide	1.4
Agriculture	Agriculture Soils	5.2
Agriculture	Livestock and Manure	5.4
Agriculture	Other Agriculture	1.7
Agriculture	Rice Cultivation	1.5
Agriculture Soils	Nitrous Oxide	5.2
Air	Carbon Dioxide	1.7
Aluminium Non-Ferrous Metals	Carbon Dioxide	1
Aluminium Non-Ferrous Metals	HFCs - PFCs	0.2

##Fork of Mike Bostock's original force-directed example. This fork uses an ugly csv which unfortunately is just a fact of life in my world. JSON is highly recommended unless it is unavailable.

##Original readme.md is below and does a very nice job of explaining the graph.

This simple force-directed graph shows character co-occurence in Les Misérables. A physical simulation of charged particles and springs places related characters in closer proximity, while unrelated characters are farther apart. Layout algorithm inspired by Tim Dwyer and Thomas Jakobsen. Data based on character coappearence in Victor Hugo's Les Misérables, compiled by Donald Knuth.

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>One Graph</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>
	<script type="text/javascript" src="simple-graph.js"></script>
	<style type="text/css">
	body { font: 13px sans-serif; }
	rect { fill: #fff; }

	<html>
	<head>
	<title>Interactive Line Graph</title>
	<script src="http://d3js.org/d3.v3.js"></script>
	<!--
	using JQuery for element dimensions
	This is a small aspect of this example so it can be removed fairly easily if needed.
	-->
	<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<script src="sample_data.js"></script>

	<!--fork of Ben Christensen gist https://gist.github.com/benjchristensen/2657838*/!-->
	<html>
	<head>
	<title>Interactive Line Graph</title>
	<script src="http://d3js.org/d3.v3.js"></script>
	<!--
	using JQuery for element dimensions
	This is a small aspect of this example so it can be removed fairly easily if needed.
	-->
	<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

	<!DOCTYPE html>
	<script src="http://mbostock.github.com/d3/d3.v2.js?2.8.1"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<style>

	body {
	font: 10px sans-serif;
	}

	rect {