JoseJuan81 · April 16, 2020 23:13
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/aapl-bollinger.csv b/aapl-bollinger.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
 </head>

 <body>
  <script>
 	const width = 900
  const height = 400
  const margin = { bottom: 20, top: 20, left: 30, right: 20 };
  const val = 'close';

  const svg = d3.select("body").append("svg")
  	.attr("width", width)
 	  .attr("height", height)
  	.style('padding', '20px');

 d3.csv('aapl-bollinger.csv', (err, data) => {
 		data.forEach(item => {
      item.close = ++item.close;
      item.middle = ++item.middle;
      item.lower = ++item.lower;
      item.upper = ++item.upper;
      item.date = new Date(item.date);
    })
    
 // máximos y mínimos
  const xExtent = d3.extent(data, d => d.date);
  const yMax = d3.max(data, d => d.upper);
  
 // Escala o ejes
  const x = d3.scaleUtc()
  	.domain(xExtent)
  	.range([margin.left, width - margin.right]);
  const xAxis = d3.axisBottom()
  	.scale(x);
  svg.append('g')
  	.call(xAxis)
  	.attr('transform', 'translate(' +[0, height - margin.bottom]+ ')')
  
  const y = d3.scaleLinear()
  	.domain([yMax, 0])
  	.range([margin.top, height - margin.bottom]);
  const yAxis = d3.axisLeft()
  	.scale(y);
  svg.append('g')
  	.attr('transform', 'translate(' +[margin.left, 0]+ ')')
  	.call(yAxis);
  	

 // path
  const pathLine = d3.line()
  	.x(d => x(d.date))
  	.y(d => y(d[val]));
  
 //   const pathLine = d3.area()
 //   	.x(d => x(d.date))
 //   	.y0(d => y(0))
 //   	.y1(d => y(d.upper));
  
  const path = svg.append('path')  	
    path.transition()
  	.duration(3000)
  	.ease(d3.easeLinear)
    .attrTween("stroke-dasharray", function() {
      const length = this.getTotalLength();
      return d3.interpolate(`0,${length}`, `${length},${length}`);
    });
    
  	path.attr('fill', 'none')
  	.attr('stroke', 'steelblue')
  	.attr('stroke-width', 1.5)
  	.attr('stroke-miterlimit', 1)
  	.attr('d', pathLine(data))
 ;

 });

  </script>
 </body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<script>
	const width = 900
	const height = 400
	const margin = { bottom: 20, top: 20, left: 30, right: 20 };
	const val = 'close';

	const svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.style('padding', '20px');

	d3.csv('aapl-bollinger.csv', (err, data) => {
	data.forEach(item => {
	item.close = ++item.close;
	item.middle = ++item.middle;
	item.lower = ++item.lower;
	item.upper = ++item.upper;
	item.date = new Date(item.date);
	})

	// máximos y mínimos
	const xExtent = d3.extent(data, d => d.date);
	const yMax = d3.max(data, d => d.upper);

	// Escala o ejes
	const x = d3.scaleUtc()
	.domain(xExtent)
	.range([margin.left, width - margin.right]);
	const xAxis = d3.axisBottom()
	.scale(x);
	svg.append('g')
	.call(xAxis)
	.attr('transform', 'translate(' +[0, height - margin.bottom]+ ')')

	const y = d3.scaleLinear()
	.domain([yMax, 0])
	.range([margin.top, height - margin.bottom]);
	const yAxis = d3.axisLeft()
	.scale(y);
	svg.append('g')
	.attr('transform', 'translate(' +[margin.left, 0]+ ')')
	.call(yAxis);


	// path
	const pathLine = d3.line()
	.x(d => x(d.date))
	.y(d => y(d[val]));

	// const pathLine = d3.area()
	// .x(d => x(d.date))
	// .y0(d => y(0))
	// .y1(d => y(d.upper));

	const path = svg.append('path')
	path.transition()
	.duration(3000)
	.ease(d3.easeLinear)
	.attrTween("stroke-dasharray", function() {
	const length = this.getTotalLength();
	return d3.interpolate(`0,${length}`, `${length},${length}`);
	});

	path.attr('fill', 'none')
	.attr('stroke', 'steelblue')
	.attr('stroke-width', 1.5)
	.attr('stroke-miterlimit', 1)
	.attr('d', pathLine(data))
	;

	});

	</script>
	</body>