cramja/d3_example_0.html

## d3_example_0.html
<!DOCTYPE html>
<style>

button {
  position: absolute;
  top: 10px;
  left: 10px;
}

circle {
  fill: none;
  stroke: #000;
  stroke-width: 2px;
}

</style>
<div id="mychart"></div>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>


var svg = d3.select("svg");//,
    // margin = {top: 30, right: 30, bottom: 30, left: 30},
    // width = +svg.attr("width") - margin.left - margin.right,
    // height = +svg.attr("height") - margin.top - margin.bottom,
    // g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

width = svg.attr('width');
height = svg.attr('height');

var pts = [];
for (var i = 0; i < 10; i++) {
  pts.push({x:Math.random() * width,
            y:Math.random() * height,
            r:5});
}

function update(pts) {
  xx = pts.map(function(a) {return a.x;});
  yy = pts.map(function(a) {return a.y;});
  var svg = d3.select("svg");

  // DATA JOIN
  var vline = svg.selectAll("line-vert").data(xx);
  var hline = svg.selectAll("line-vert")
    .data(yy)
    .enter()
      .append("line")
      .attr("x1", 0)
      .attr("x2", width)
      .attr("y1", function(d){return d;})
      .attr("y2", function(d){return d;})
      .attr("stroke", "red")
      .attr("stroke-width", 2);

  vline.enter()
      .append("line")
      .attr("x1", function(d){return d})
      .attr("x2", function(d){return d})
      .attr("y1", 0)
      .attr("y2", height)
      .attr("stroke", "red")
      .attr("stroke-width", 2)
    .merge()

  var circ = svg.selectAll("circle")
    .data(pts)
    .enter()
      .append("circle")
      .attr("cx", function(d){return d.x})
      .attr("cy", function(d){return d.y})
      .attr("r", function(d){return d.r});
};

update(pts);


</script>
	<!DOCTYPE html>
	<style>

	button {
	position: absolute;
	top: 10px;
	left: 10px;
	}

	circle {
	fill: none;
	stroke: #000;
	stroke-width: 2px;
	}

	</style>
	<div id="mychart"></div>
	<svg width="960" height="500"></svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>


	var svg = d3.select("svg");//,
	// margin = {top: 30, right: 30, bottom: 30, left: 30},
	// width = +svg.attr("width") - margin.left - margin.right,
	// height = +svg.attr("height") - margin.top - margin.bottom,
	// g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	width = svg.attr('width');
	height = svg.attr('height');

	var pts = [];
	for (var i = 0; i < 10; i++) {
	pts.push({x:Math.random() * width,
	y:Math.random() * height,
	r:5});
	}

	function update(pts) {
	xx = pts.map(function(a) {return a.x;});
	yy = pts.map(function(a) {return a.y;});
	var svg = d3.select("svg");

	// DATA JOIN
	var vline = svg.selectAll("line-vert").data(xx);
	var hline = svg.selectAll("line-vert")
	.data(yy)
	.enter()
	.append("line")
	.attr("x1", 0)
	.attr("x2", width)
	.attr("y1", function(d){return d;})
	.attr("y2", function(d){return d;})
	.attr("stroke", "red")
	.attr("stroke-width", 2);

	vline.enter()
	.append("line")
	.attr("x1", function(d){return d})
	.attr("x2", function(d){return d})
	.attr("y1", 0)
	.attr("y2", height)
	.attr("stroke", "red")
	.attr("stroke-width", 2)
	.merge()

	var circ = svg.selectAll("circle")
	.data(pts)
	.enter()
	.append("circle")
	.attr("cx", function(d){return d.x})
	.attr("cy", function(d){return d.y})
	.attr("r", function(d){return d.r});
	};

	update(pts);



	</script>