LeoMartinDev/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
  <style>

  </style>
</head>

<body>
  <style>
	.axis {
		font-family: sans-serif;
		fill: #d35400;
		font-size: 12px;
	}
	.line {
		fill: none;
		stroke: #f1c40f;
		stroke-width: 3px;
	}
	.smoothline {
		fill: none;
		stroke: #e74c3c;
		stroke-width: 3px;
	}
	.area {
		fill: #e74c3c;
		opacity: 0.5;
	}
	.circle {
		stroke: #e74c3c;
		stroke-width: 3px;
		fill: #FFF;
	}
	.grid {
		stroke: #DDD;
		stroke-width: 1px;
		fill: none;
	}
    .container {
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
</style>
  <div class"container">
    <svg id="chart" width="960" height="500"
    viewBox="0 0 960 500"
    preserveAspectRatio="xMidYMid meet"></svg>
  </div>

  <script>
    let i = 0;
		const getPoint = () => {
      i = i + 1;
      return {
        x: Date.now() + (i * 1000 * 60),
        y: _.random(1, 100),
    	};
    };

		let data = _.range(1).map(() => getPoint());

    var width = 500;
    var height = 500;


    var chart = d3.select("#chart");

    const ONE_HOUR = 1000 * 60 * 60;
    var x = d3.scaleTime()
      .domain([_.last(data).x - ONE_HOUR, _.last(data).x])
      .range([0, width]);
    var x_axis = d3.axisBottom().scale(x);
    var y = d3.scaleLinear().domain([0, 100]).range([100, 0]);
    // -----------------------------------
    var line = d3.line()
					    .x(function(d){ return x(d.x); })
					    .y(function(d){ return y(d.y); });
    var smoothLine = d3.line().curve(d3.curveCardinal)
					    .x(function(d){ return x(d.x); })
					    .y(function(d){ return y(d.y); });
    var lineArea = d3.area()
					    .x(function(d){ return x(d.x); })
					    .y0(y(0))
					    .y1(function(d){ return y(d.y); })
					    .curve(d3.curveCardinal);

    var path = chart.append('path')
    var areaPath = chart.append('path');
    let axisX = chart.append('g')
    	.attr('class', 'x axis')
    	.attr('transform', `translate(0, ${105})`)

    const drawAxisX = () => axisX.call(x_axis);
    //drawAxisX();
    path.datum(data)
      .attr('class', 'smoothline')
      .attr('d', smoothLine);

    setInterval(() => {
      data.push(getPoint());
      path.datum(data)
        .attr('class', 'smoothline')
        .attr('d', smoothLine);
      //drawAxisX();
      data = _.takeRightWhile(data, ({ x }) => Date.now() - x  < ONE_HOUR)
      x.domain([_.last(data).x - ONE_HOUR, _.last(data).x]);
      // data = _.takeRight(data, 20);
    }, 600);


  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
	<style>

	</style>
	</head>

	<body>
	<style>
	.axis {
	font-family: sans-serif;
	fill: #d35400;
	font-size: 12px;
	}
	.line {
	fill: none;
	stroke: #f1c40f;
	stroke-width: 3px;
	}
	.smoothline {
	fill: none;
	stroke: #e74c3c;
	stroke-width: 3px;
	}
	.area {
	fill: #e74c3c;
	opacity: 0.5;
	}
	.circle {
	stroke: #e74c3c;
	stroke-width: 3px;
	fill: #FFF;
	}
	.grid {
	stroke: #DDD;
	stroke-width: 1px;
	fill: none;
	}
	.container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	}
	</style>
	<div class"container">
	<svg id="chart" width="960" height="500"
	viewBox="0 0 960 500"
	preserveAspectRatio="xMidYMid meet"></svg>
	</div>

	<script>
	let i = 0;
	const getPoint = () => {
	i = i + 1;
	return {
	x: Date.now() + (i * 1000 * 60),
	y: _.random(1, 100),
	};
	};

	let data = _.range(1).map(() => getPoint());

	var width = 500;
	var height = 500;


	var chart = d3.select("#chart");

	const ONE_HOUR = 1000 * 60 * 60;
	var x = d3.scaleTime()
	.domain([_.last(data).x - ONE_HOUR, _.last(data).x])
	.range([0, width]);
	var x_axis = d3.axisBottom().scale(x);
	var y = d3.scaleLinear().domain([0, 100]).range([100, 0]);
	// -----------------------------------
	var line = d3.line()
	.x(function(d){ return x(d.x); })
	.y(function(d){ return y(d.y); });
	var smoothLine = d3.line().curve(d3.curveCardinal)
	.x(function(d){ return x(d.x); })
	.y(function(d){ return y(d.y); });
	var lineArea = d3.area()
	.x(function(d){ return x(d.x); })
	.y0(y(0))
	.y1(function(d){ return y(d.y); })
	.curve(d3.curveCardinal);

	var path = chart.append('path')
	var areaPath = chart.append('path');
	let axisX = chart.append('g')
	.attr('class', 'x axis')
	.attr('transform', `translate(0, ${105})`)

	const drawAxisX = () => axisX.call(x_axis);
	//drawAxisX();
	path.datum(data)
	.attr('class', 'smoothline')
	.attr('d', smoothLine);

	setInterval(() => {
	data.push(getPoint());
	path.datum(data)
	.attr('class', 'smoothline')
	.attr('d', smoothLine);
	//drawAxisX();
	data = _.takeRightWhile(data, ({ x }) => Date.now() - x < ONE_HOUR)
	x.domain([_.last(data).x - ONE_HOUR, _.last(data).x]);
	// data = _.takeRight(data, 20);
	}, 600);



	</script>
	</body>