bhvaleri/index.html

## index.html
<!DOCTYPE html>

<html>
  <head>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  </head>

  <body>

  <script>
    var data = [
      { x: 1, y: 4 },
      { x: 2, y: 5 },
      { x: 3, y: 6 },
      { x: 4, y: 7 },
      { x: 5, y: 8 },
      { x: 6, y: 9 },
      { x: 7, y: 20 },
      { x: 8, y: 10 },
      { x: 9, y: 11 },
      { x: 10, y: 110 }
    ]

    var margin = {top: 20, right: 10, bottom: 20, left: 40 };

    var width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var svg = d3.select('body').append('svg')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom)
      .append('g')
        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

    var xScale = d3.scale.linear()
      .range([0, width])
      .domain([1,10]);

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

    var xAxis = d3.svg.axis()
        .orient('bottom')
        .scale(xScale);

    var yAxis = d3.svg.axis()
        .orient('left')
        .scale(yScale);

    //layers
    var xAxisLayer = svg.append('g')
        .attr('class', 'x-axis-layer')
        .attr('transform', 'translate(0,' + height + ')');

    var yAxisLayer = svg.append('g')
        .attr('class', 'y-axis-layer');

    var dotLayer= svg.append('g')
        .attr('class', 'dot-layer');


    var draw = function () {
      yScale.domain([d3.max(data, function(d) { return d.y; }), 0]);
      yAxis.scale(yScale);

      xAxis(xAxisLayer);
      yAxisLayer.transition().call(yAxis);

      var dots = dotLayer.selectAll('.dot').data(data);


      dots.enter()
        .append('circle')
        .attr('class', 'dot')
        .attr('r', 5)
        .on('click', function(d) {
          var index = data.indexOf(d);
          data.splice(index, 1);
          draw();
        })
        ;

      dots
        .attr('cx', function(d) { return xScale(d.x); })
        .attr('cy', function(d) { return yScale(d.y); });

      dots.exit().remove();

    };

    draw();
  </script>
</html>
	<!DOCTYPE html>

	<html>
	<head>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	</head>

	<body>

	<script>
	var data = [
	{ x: 1, y: 4 },
	{ x: 2, y: 5 },
	{ x: 3, y: 6 },
	{ x: 4, y: 7 },
	{ x: 5, y: 8 },
	{ x: 6, y: 9 },
	{ x: 7, y: 20 },
	{ x: 8, y: 10 },
	{ x: 9, y: 11 },
	{ x: 10, y: 110 }
	]

	var margin = {top: 20, right: 10, bottom: 20, left: 40 };

	var width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var svg = d3.select('body').append('svg')
	.attr('width', width + margin.left + margin.right)
	.attr('height', height + margin.top + margin.bottom)
	.append('g')
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

	var xScale = d3.scale.linear()
	.range([0, width])
	.domain([1,10]);

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

	var xAxis = d3.svg.axis()
	.orient('bottom')
	.scale(xScale);

	var yAxis = d3.svg.axis()
	.orient('left')
	.scale(yScale);

	//layers
	var xAxisLayer = svg.append('g')
	.attr('class', 'x-axis-layer')
	.attr('transform', 'translate(0,' + height + ')');

	var yAxisLayer = svg.append('g')
	.attr('class', 'y-axis-layer');

	var dotLayer= svg.append('g')
	.attr('class', 'dot-layer');


	var draw = function () {
	yScale.domain([d3.max(data, function(d) { return d.y; }), 0]);
	yAxis.scale(yScale);

	xAxis(xAxisLayer);
	yAxisLayer.transition().call(yAxis);

	var dots = dotLayer.selectAll('.dot').data(data);


	dots.enter()
	.append('circle')
	.attr('class', 'dot')
	.attr('r', 5)
	.on('click', function(d) {
	var index = data.indexOf(d);
	data.splice(index, 1);
	draw();
	})
	;

	dots
	.attr('cx', function(d) { return xScale(d.x); })
	.attr('cy', function(d) { return yScale(d.y); });

	dots.exit().remove();

	};

	draw();
	</script>
	</html>