oogali · March 18, 2012 05:14 · biovisualize · Dec 30, 2012
diff --git a/d3-sample.html b/d3-sample.html
 <html>
  <head>
    <title>latency!</title>
    <style type = "text/css">
      body { font-family: "Helvetica Neue"; font-size: 0.8em; font-weight: 300; }
      #chart rect { stroke: #000; fill: #084c7d; }
      text { fill: #000; }
    </style>
    <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src = "https://raw.github.com/mbostock/d3/master/d3.v2.min.js"></script>
  </head>
  <body>
    <div id = "chart"></div>
    <script language = "javascript">

    var data = [
      { time: '7:18pm', latency: 0.720 },
      { time: '7:19pm', latency: 0.724 },
      { time: '7:20pm', latency: 0.721 },
      { time: '7:21pm', latency: 0.719 },
      { time: '7:22pm', latency: 0.722 },
      { time: '7:23pm', latency: 0.717 },
      { time: '7:24pm', latency: 0.718 },
      { time: '7:25pm', latency: 0.723 },
      { time: '7:26pm', latency: 1.224 },
      { time: '7:27pm', latency: 1.019 }
    ];

    $(document).ready(function() {
      var w = 900;
      var h = 600;

      var chart = d3.select('#chart')
        .append('svg')
        .attr('width', w)
        .attr('height', h)
        .append('g')
        .attr('transform', 'translate(50, 35)');
  
      var x = d3.scale.linear().domain([0, d3.max(data, function(d) { return d.latency; })]).range([0, w - 100]);
      var y = d3.scale.ordinal().domain([0, d3.max(data, function(d) { return d.latency; })]).rangeBands([0, h - 100]);

      /* draw chart backstop */
      chart.append('line')
        .attr('y1', 0)
        .attr('y2', h - 100)
        .style('stroke', '#000');
  
      /* draw x-axis, 10 ticks worth */
      chart.selectAll('.rule')
        .data(x.ticks(10))
        .enter()
        .append('text')
        .attr('class', 'rule')
        .attr('x', x)
        .attr('y', 0)
        .attr('dy', -3)
        .attr('text-anchor', 'middle')
        .text(function(d) { return d == 0 ? 0 : d.toFixed(1); });
  
      /* draw y-axis, per bar */
      chart.selectAll('.rule')
        .data(data, function(d) { return d.time; })
        .enter()
        .append('text')
        .attr('class', 'rule')
        .attr('x', 0)
        .attr('y', function(d, i) { return (i * 40) + 32; })
        .attr('dx', -25)
        .attr('dy', -3)
        .attr('text-anchor', 'middle')
        .text(function(d) { return d.time; });

      /* draw rule lines for ticks */
      chart.selectAll('line')
        .data(x.ticks(10))
        .enter()
        .append('line')
        .attr('x1', x)
        .attr('x2', x)
        .attr('y1', 0)
        .attr('y2', h - 100)
        .style('stroke', '#cfcfcf');

      /* draw bars */
      chart.selectAll('rect')
        .data(data, function(d) { return d.latency; })
        .enter()
        .append('rect')
        .attr('y', function(d, i) { return (i * 40) + 15; })
        .attr('width', function(d) { return x(d.latency); })
        .attr('height', 20);

      /* put latency numbers within bars */
      chart.selectAll('.latency')
        .data(data, function(d) { return d.latency; })
        .enter()
        .append('text')
        .style('class', 'latency')
        .attr('x', function(d) { return x(d.latency); })
        .attr('y', function(d, i) { return (i * 40) + 15; })
        .attr('dx', -3)
        .attr('dy', '1.1em')
        .attr('text-anchor', 'end')
        .style('fill', '#efefef')
        .text(function(d) { return d.latency.toFixed(3) + ' ms'; });
    });
    </script>
  </body>
 </html>
	<html>
	<head>
	<title>latency!</title>
	<style type = "text/css">
	body { font-family: "Helvetica Neue"; font-size: 0.8em; font-weight: 300; }
	#chart rect { stroke: #000; fill: #084c7d; }
	text { fill: #000; }
	</style>
	<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src = "https://raw.github.com/mbostock/d3/master/d3.v2.min.js"></script>
	</head>
	<body>
	<div id = "chart"></div>
	<script language = "javascript">

	var data = [
	{ time: '7:18pm', latency: 0.720 },
	{ time: '7:19pm', latency: 0.724 },
	{ time: '7:20pm', latency: 0.721 },
	{ time: '7:21pm', latency: 0.719 },
	{ time: '7:22pm', latency: 0.722 },
	{ time: '7:23pm', latency: 0.717 },
	{ time: '7:24pm', latency: 0.718 },
	{ time: '7:25pm', latency: 0.723 },
	{ time: '7:26pm', latency: 1.224 },
	{ time: '7:27pm', latency: 1.019 }
	];

	$(document).ready(function() {
	var w = 900;
	var h = 600;

	var chart = d3.select('#chart')
	.append('svg')
	.attr('width', w)
	.attr('height', h)
	.append('g')
	.attr('transform', 'translate(50, 35)');

	var x = d3.scale.linear().domain([0, d3.max(data, function(d) { return d.latency; })]).range([0, w - 100]);
	var y = d3.scale.ordinal().domain([0, d3.max(data, function(d) { return d.latency; })]).rangeBands([0, h - 100]);

	/* draw chart backstop */
	chart.append('line')
	.attr('y1', 0)
	.attr('y2', h - 100)
	.style('stroke', '#000');

	/* draw x-axis, 10 ticks worth */
	chart.selectAll('.rule')
	.data(x.ticks(10))
	.enter()
	.append('text')
	.attr('class', 'rule')
	.attr('x', x)
	.attr('y', 0)
	.attr('dy', -3)
	.attr('text-anchor', 'middle')
	.text(function(d) { return d == 0 ? 0 : d.toFixed(1); });

	/* draw y-axis, per bar */
	chart.selectAll('.rule')
	.data(data, function(d) { return d.time; })
	.enter()
	.append('text')
	.attr('class', 'rule')
	.attr('x', 0)
	.attr('y', function(d, i) { return (i * 40) + 32; })
	.attr('dx', -25)
	.attr('dy', -3)
	.attr('text-anchor', 'middle')
	.text(function(d) { return d.time; });

	/* draw rule lines for ticks */
	chart.selectAll('line')
	.data(x.ticks(10))
	.enter()
	.append('line')
	.attr('x1', x)
	.attr('x2', x)
	.attr('y1', 0)
	.attr('y2', h - 100)
	.style('stroke', '#cfcfcf');

	/* draw bars */
	chart.selectAll('rect')
	.data(data, function(d) { return d.latency; })
	.enter()
	.append('rect')
	.attr('y', function(d, i) { return (i * 40) + 15; })
	.attr('width', function(d) { return x(d.latency); })
	.attr('height', 20);

	/* put latency numbers within bars */
	chart.selectAll('.latency')
	.data(data, function(d) { return d.latency; })
	.enter()
	.append('text')
	.style('class', 'latency')
	.attr('x', function(d) { return x(d.latency); })
	.attr('y', function(d, i) { return (i * 40) + 15; })
	.attr('dx', -3)
	.attr('dy', '1.1em')
	.attr('text-anchor', 'end')
	.style('fill', '#efefef')
	.text(function(d) { return d.latency.toFixed(3) + ' ms'; });
	});
	</script>
	</body>
	</html>