chromy/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Drawable Graphs in d3

  
## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#content {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  font-family: "PT Sans", sans-serif;
}

.example rect {
  fill: steelblue;
}

.example text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: middle;
  padding-bottom: 30px;
}
</style>
</head>
<body>
<div id="content">
  <svg id="example1" class="example"></svg>
  <svg id="example2" class="example"></svg>
  <svg id="example3" class="example"></svg>
</div>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
function chart() {
  var width = 700, // default width
      height = 80; // default height

  var data = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];

  var max = 100;
  var discrete = false;

  var y = d3.scale.linear()
      .range([height, 0]);

  function my(selection) {
    y.domain([0, max]);
    var barWidth = width / data.length;

    selection
      .attr("width", width)
      .attr("height", height);

    var bar = selection.selectAll("g")
        .data(data);

    var enterg = bar.enter()
        .append("g")
          .attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; });
    enterg.append("rect");

    var rect = bar.select("rect")
        .attr("y", function(d) { return y(d); })
        .attr("height", function(d) { return height - y(d); })
        .attr("width", barWidth - 1);

    selection
      .on('mousemove', function() {
        var pt = d3.mouse(this);
        var px = pt[0];
        var py = pt[1];
        var sample = Math.floor(px / barWidth);
        var newValue = y.invert(py);
        if (discrete) {
          newValue = Math.floor(newValue);
        }
        data[sample] = newValue;
        my(selection);
      });
  }

  my.width = function(value) {
    if (!arguments.length) return width;
    width = value;
    return my;
  };

  my.height = function(value) {
    if (!arguments.length) return height;
    height = value;
    return my;
  };

  my.max = function(value) {
    if (!arguments.length) return max;
    max = value;
    return my;
  };

  my.data = function(value) {
    if (!arguments.length) return data;
    data = value;
    return my;
  };

  my.n = function(value) {
    if (!arguments.length) return data.length;
    data.length = value;
    // Set any new values to 50%
    for (var i=0; i<data.length; i++) {
      if (!data[i]) {
        data[i] = max / 2;
      }
    }
    return my;
  };

  my.discrete = function(value) {
    if (!arguments.length) return discrete;
    discrete = value;
    return my;
  };

  return my;
}

// Minimal example.
var example1 = chart();
d3.select("#example1").call(example1);

// Large n.
var example2 = chart()
  .n(100);
d3.select("#example2").call(example2);

var example3 = chart()
  .n(20)
  .max(8)
  .discrete(true);
d3.select("#example3").call(example3);


</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style>
	#content {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	font-family: "PT Sans", sans-serif;
	}

	.example rect {
	fill: steelblue;
	}

	.example text {
	fill: white;
	font: 10px sans-serif;
	text-anchor: middle;
	padding-bottom: 30px;
	}
	</style>
	</head>
	<body>
	<div id="content">
	<svg id="example1" class="example"></svg>
	<svg id="example2" class="example"></svg>
	<svg id="example3" class="example"></svg>
	</div>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	function chart() {
	var width = 700, // default width
	height = 80; // default height

	var data = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];

	var max = 100;
	var discrete = false;

	var y = d3.scale.linear()
	.range([height, 0]);

	function my(selection) {
	y.domain([0, max]);
	var barWidth = width / data.length;

	selection
	.attr("width", width)
	.attr("height", height);

	var bar = selection.selectAll("g")
	.data(data);

	var enterg = bar.enter()
	.append("g")
	.attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; });
	enterg.append("rect");

	var rect = bar.select("rect")
	.attr("y", function(d) { return y(d); })
	.attr("height", function(d) { return height - y(d); })
	.attr("width", barWidth - 1);

	selection
	.on('mousemove', function() {
	var pt = d3.mouse(this);
	var px = pt[0];
	var py = pt[1];
	var sample = Math.floor(px / barWidth);
	var newValue = y.invert(py);
	if (discrete) {
	newValue = Math.floor(newValue);
	}
	data[sample] = newValue;
	my(selection);
	});
	}

	my.width = function(value) {
	if (!arguments.length) return width;
	width = value;
	return my;
	};

	my.height = function(value) {
	if (!arguments.length) return height;
	height = value;
	return my;
	};

	my.max = function(value) {
	if (!arguments.length) return max;
	max = value;
	return my;
	};

	my.data = function(value) {
	if (!arguments.length) return data;
	data = value;
	return my;
	};

	my.n = function(value) {
	if (!arguments.length) return data.length;
	data.length = value;
	// Set any new values to 50%
	for (var i=0; i<data.length; i++) {
	if (!data[i]) {
	data[i] = max / 2;
	}
	}
	return my;
	};

	my.discrete = function(value) {
	if (!arguments.length) return discrete;
	discrete = value;
	return my;
	};

	return my;
	}

	// Minimal example.
	var example1 = chart();
	d3.select("#example1").call(example1);

	// Large n.
	var example2 = chart()
	.n(100);
	d3.select("#example2").call(example2);

	var example3 = chart()
	.n(20)
	.max(8)
	.discrete(true);
	d3.select("#example3").call(example3);


	</script>
	</body>
	</html>