aaizemberg/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Reloj</title>
  <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>

<script>
var timer = setInterval(update, 1000);

function update() {
  d = new Date();
  s = d.getSeconds();
  m = d.getMinutes();
  h = d.getHours();

  posX = width/2 + width/2 * 0.75 * Math.cos(x(s-15));
  posY = width/2 + width/2 * 0.75 * Math.sin(x(s-15));
  d3.select("circle#punto").attr("transform","translate("+posX+" "+posY+")");

  d3.select("line#hora").attr("transform", "translate("+width/2+" "+height/2+") rotate( " + escala_h(h) + "  )");
  d3.select("line#minutos").attr("transform", "translate("+width/2+" "+height/2+") rotate( " + escala_sm(m) + "  )");
  d3.select("line#segundos").attr("transform", "translate("+width/2+" "+height/2+") rotate( " + escala_sm(s) + "  )");
  d3.select("text#digital").text(d.toLocaleTimeString());
}

var width = 500, height = 500;
var posX, posY;

var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);
var escala_sm = d3.scaleLinear().domain([0,60]).range([0,360]);
var escala_h  = d3.scaleLinear().domain([0,12]).range([0,360]);

var x = d3.scaleLinear().domain([0,60]).range([0,2*Math.PI]);

var d = new Date();
var s = d.getSeconds(); // 0 .. 59
var m = d.getMinutes(); // 0 .. 59
var h = d.getHours();   // 0 .. 23

svg.append("circle")
   .attr("cx", width/2)
   .attr("cy", height/2)
   .attr("r",  width/2)
   .attr("fill","steelblue")

svg.append("line")
   .attr('id','hora')
   .attr("transform", "translate("+width/2+" "+height/2+") rotate( " + escala_h(h) + "  )")
   .attr("y2",-1 * width/2 * 0.50)
   .attr("stroke","white")
   .attr("stroke-width","4");

svg.append("line")
   .attr('id','minutos')
   .attr("transform", "translate("+width/2+" "+height/2+") rotate( " + escala_sm(m) + "  )")
   .attr("y2",-1 * width/2 * 0.75)
   .attr("stroke","white")
   .attr("stroke-width","2");

svg.append("line")
   .attr('id','segundos')
   .attr("transform", "translate("+width/2+" "+height/2+") rotate( " + escala_sm(s) + "  )")
   .attr("y2",-1 * width/2 * 0.75)
   .attr("stroke","white")
   .attr("stroke-width","1");

svg.append("text")
   .attr("id","digital")
   .attr("x",width/2)
   .attr("y",0.90 * height)
   .attr("text-anchor","middle")
   .attr("font-size",50)
   .attr("fill","white")
   .text(d.toLocaleTimeString())

posX = width/2 + width/2 * 0.75 * Math.cos(x(s-15));
posY = width/2 + width/2 * 0.75 * Math.sin(x(s-15));
svg.append("circle").attr('id','punto').attr("r",5)
   .attr("fill","white")
   .attr("transform","translate("+posX+" "+posY+")");
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Reloj</title>
	<script src="https://d3js.org/d3.v5.min.js"></script>
	</head>
	<body>

	<script>
	var timer = setInterval(update, 1000);

	function update() {
	d = new Date();
	s = d.getSeconds();
	m = d.getMinutes();
	h = d.getHours();

	posX = width/2 + width/2 * 0.75 * Math.cos(x(s-15));
	posY = width/2 + width/2 * 0.75 * Math.sin(x(s-15));
	d3.select("circle#punto").attr("transform","translate("+posX+" "+posY+")");

	d3.select("line#hora").attr("transform", "translate("+width/2+" "+height/2+") rotate( " + escala_h(h) + " )");
	d3.select("line#minutos").attr("transform", "translate("+width/2+" "+height/2+") rotate( " + escala_sm(m) + " )");
	d3.select("line#segundos").attr("transform", "translate("+width/2+" "+height/2+") rotate( " + escala_sm(s) + " )");
	d3.select("text#digital").text(d.toLocaleTimeString());
	}

	var width = 500, height = 500;
	var posX, posY;

	var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);
	var escala_sm = d3.scaleLinear().domain([0,60]).range([0,360]);
	var escala_h = d3.scaleLinear().domain([0,12]).range([0,360]);

	var x = d3.scaleLinear().domain([0,60]).range([0,2*Math.PI]);

	var d = new Date();
	var s = d.getSeconds(); // 0 .. 59
	var m = d.getMinutes(); // 0 .. 59
	var h = d.getHours(); // 0 .. 23

	svg.append("circle")
	.attr("cx", width/2)
	.attr("cy", height/2)
	.attr("r", width/2)
	.attr("fill","steelblue")

	svg.append("line")
	.attr('id','hora')
	.attr("transform", "translate("+width/2+" "+height/2+") rotate( " + escala_h(h) + " )")
	.attr("y2",-1 * width/2 * 0.50)
	.attr("stroke","white")
	.attr("stroke-width","4");

	svg.append("line")
	.attr('id','minutos')
	.attr("transform", "translate("+width/2+" "+height/2+") rotate( " + escala_sm(m) + " )")
	.attr("y2",-1 * width/2 * 0.75)
	.attr("stroke","white")
	.attr("stroke-width","2");

	svg.append("line")
	.attr('id','segundos')
	.attr("transform", "translate("+width/2+" "+height/2+") rotate( " + escala_sm(s) + " )")
	.attr("y2",-1 * width/2 * 0.75)
	.attr("stroke","white")
	.attr("stroke-width","1");

	svg.append("text")
	.attr("id","digital")
	.attr("x",width/2)
	.attr("y",0.90 * height)
	.attr("text-anchor","middle")
	.attr("font-size",50)
	.attr("fill","white")
	.text(d.toLocaleTimeString())

	posX = width/2 + width/2 * 0.75 * Math.cos(x(s-15));
	posY = width/2 + width/2 * 0.75 * Math.sin(x(s-15));
	svg.append("circle").attr('id','punto').attr("r",5)
	.attr("fill","white")
	.attr("transform","translate("+posX+" "+posY+")");
	</script>

	</body>
	</html>