Skip to content

Instantly share code, notes, and snippets.

@kforeman

kforeman/index.html

Created June 15, 2011 21:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kforeman/1028143 to your computer and use it in GitHub Desktop.
Save kforeman/1028143 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body>
<script type="text/javascript">
// data
var groups = ['A','B','C'],
dataset_1 = [ {'group':'A', 'x':1990, 'y':5},
{'group':'A', 'x':1991, 'y':4},
{'group':'A', 'x':1992, 'y':3},
{'group':'A', 'x':1993, 'y':2},
{'group':'A', 'x':1994, 'y':1},
{'group':'A', 'x':1995, 'y':0},
{'group':'B', 'x':1990, 'y':100},
{'group':'B', 'x':1991, 'y':80},
{'group':'B', 'x':1992, 'y':60},
{'group':'B', 'x':1993, 'y':40},
{'group':'B', 'x':1994, 'y':20},
{'group':'B', 'x':1995, 'y':0},
{'group':'C', 'x':1990, 'y':0},
{'group':'C', 'x':1991, 'y':100},
{'group':'C', 'x':1992, 'y':200},
{'group':'C', 'x':1993, 'y':300},
{'group':'C', 'x':1994, 'y':400},
{'group':'C', 'x':1995, 'y':500} ],
dataset_2 = [ {'group':'A', 'x':1990, 'y':5},
{'group':'A', 'x':1991, 'y':4},
{'group':'A', 'x':1992, 'y':3},
{'group':'A', 'x':1993, 'y':2},
{'group':'A', 'x':1994, 'y':1},
{'group':'A', 'x':1995, 'y':0},
{'group':'B', 'x':1990, 'y':100},
{'group':'B', 'x':1991, 'y':80},
{'group':'B', 'x':1992, 'y':60},
{'group':'B', 'x':1993, 'y':40},
{'group':'B', 'x':1994, 'y':20},
{'group':'B', 'x':1995, 'y':0} ];
// make a dropdown to switch between datasets
var dataset = dataset_1;
function change_dataset(d) {
dataset = (d==1 ? dataset_1 : dataset_2);
nested_dataset = nest_data(dataset);
}
dropdown = d3.select('body')
.append('div')
.append('select')
.attr('onchange', 'change_dataset(value);');
dropdown.append('option').attr('value', 1).text('dataset_1');
dropdown.append('option').attr('value', 2).text('dataset_2');
// draw the main panel
var x = 200,
y = 200,
p = 20,
chart = d3.select('body')
.append('svg:svg')
.attr('width', x + 2*p)
.attr('height', groups.length*(y+p));
// draw a box for each group
var boxes = chart.selectAll('box')
.data(groups)
.enter().append('svg:g')
.attr('transform', function(d,i) { return 'translate(' + p + ',' + i*(y+p) + ')'; });
boxes.append('svg:rect')
.attr('width', x)
.attr('height', y)
.style('stroke', 'black')
.style('fill', 'none');
// use the same x-axis grid lines for each box
var x_scale = d3.scale.linear()
.domain([d3.min(dataset, function(d) { return d.x; }), d3.max(dataset, function(d) { return d.x; })])
.range([0,x]);
boxes.selectAll('xgrid')
.data(x_scale.ticks(5))
.enter().append('svg:line')
.attr('x1', function(d) { return x_scale(d); })
.attr('x2', function(d) { return x_scale(d); })
.attr('y1', 0)
.attr('y2', y)
.style('stroke', 'gray');
// add labels to the x-axis
/* TODO - visible only on bottom panel (parent.index == groups.length) */
boxes.selectAll('xlab')
.data(x_scale.ticks(5))
.enter().append('svg:text')
.attr('x', function(d) { return x_scale(d); })
.attr('y', x + p/2)
.style('text-anchor', 'middle')
.style('alignment-baseline', 'middle')
//.attr('visibility', this.parentNode.__data__ == groups[groups.length-1] ? 'visible' : 'hidden')
.text(String);
// nest the dataset by group
function nest_data(d) {
return d3.nest()
.key(function(i) { return i.group; })
.map(d);
}
var nested_dataset = nest_data(dataset);
// find a separate y-axis scale for each group
var y_scale = {};
for (i=0; i<groups.length; i++) {
y_scale[groups[i]] = d3.scale.linear()
.domain([d3.min(nested_dataset[groups[i]], function(d) { return d.y; }), d3.max(nested_dataset[groups[i]], function(d) { return d.y; })])
.range([y, 0]);
}
/* TODO - apply separate y-axis labels to each box */
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment