timelyportfolio timelyportfolio

A demonstration of D3’s vertically-oriented bullet charts, based on this example.

Zoomable Sunburst with Labels

This is a Binned Line Chart version of Mike Bostock's zoomable area chart. You can find his source here. The graph shows number of flights per day in the United States.

Use the mouse-wheel to zoom in and out, and drag the slider to adjust the size of the bins.
View with the step-after interpolation method to see the discrete bins.

A detailed publication as part of Matt Woelk's Masters Thesis will be available in Fall, 2013.

d3js Multiline chart with brushing and mouseover

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Chronological Diagram of Asia</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>
	<style type="text/css">
	.chart {
	shape-rendering: crispEdges;
	}

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Chronological Diagram of Asia</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>
	<style type="text/css">
	.chart {
	shape-rendering: crispEdges;
	}

	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.6"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.csv.js?1.29.6"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.time.js?1.29.6"></script>
	<style type="text/css">

	body {
	font: 10px sans-serif;