miniblin/.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>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0;background-color:#152512; }
    svg {
      width: 100%;
      height: 100%;
    }
  </style>
</head>


<body>

 <svg>

 </svg>

 <script>
    // Feel free to change or delete any of the code you see in this editor!

   var  index=0
   var data =[
       	[5,2,3,6,12],
      	[7,1,4,6,12],
      	[4,5,3,7,14]
      ]
   var height=150;
   var colors = d3.scaleOrdinal()
  .range(["#387898","#c79b18","#c79b18","#50863b","#50863b"])

    var outlineColors = d3.scaleOrdinal()
  .range(["#b4d3e3","#d2c488","#d2c488","#b2d6a7","#b2d6a7"])

   var svg= d3.select('svg');
   var background = svg.append('g')
   var foreground =svg.append('g')


   var distanceBetween = 180

     var linePositions = [
        	[0,1,2,3],
        	[1,4],
       		[2,4],
       		[4,1],
       		[3,1],
       		[4,0]

     ]


  function updateGraph(data){

    var line = d3.line()
      	.x((d,i) =>(d* distanceBetween) +50)
				.y( (d,i)=>height + d*60)
      	.curve(d3.curveStepBefore)

      linePositions.forEach(function(element){

       background.append('path')
      .attr('d', line(element))
      .attr('fill', 'none')
      .attr('stroke', 'limegreen')
   		.style("stroke-dasharray", ("2, 2"))
      .attr("marker-start", "url(#arrow2)")
      .attr("marker-end", "url(#arrow)");
      })


   svg.append("defs").append("marker")
    .attr("id", "arrow")
    .attr("viewBox", "0 -5 10 10")
    .attr("refX",100)
    .attr("refY", 0)
    .attr("markerWidth", 8)
    .attr("markerHeight", 8)
    .attr("orient", "auto")
  	.append("svg:path")
    .attr("d", "M0,-5L10,0L0,5")
  	.attr("fill", "limegreen")
  	.attr('stroke','#b2d6a7')

   svg.append("defs").append("marker")
    .attr("id", "arrow2")
    .attr("viewBox", "0 -5 10 10")
    .attr("refX",-60)
    .attr("refY", 0)
    .attr("markerWidth", 8)
    .attr("markerHeight", 8)
    .attr("orient", "auto")
  	.append("svg:path")
    .attr("d", "M0,-5L10,0L0,5")
  	.attr("fill", "limegreen")
  	.attr('stroke','#b2d6a7')


       var headers =svg.selectAll('text')
    		.data(data, d=>d)

       headers.exit().remove()

       var headersEnter =headers.enter().append('text')

       var headers = headersEnter.merge(headers)
       	.attr('x', (d,i) =>(i* distanceBetween) +50)
    		.attr('y', (d,i)=>height/1.65 + i*60 )
   			.text(d=>d+' Cases')
   			.attr('fill', '#fff')
   			.style("font-family","roboto")
       .attr("text-anchor", "middle")

   	var circles =svg.selectAll('circle')
    .data(data)

   	circles.exit().remove()

   	var circlesEnter =circles.enter().append('circle')

   	var t = d3.transition()
   	.duration(1000)

   	circles = circlesEnter.merge(circles)
   	.attr('cx', (d,i) =>(i* distanceBetween) +50)
    .attr('cy', (d,i)=>height + i*60)
    .attr('stroke-width', 3)
   	.transition(t)
   	.attr('r', d=>d*5)
    .attr('fill', (d,i)=>colors(i))
    .attr('stroke',(d,i)=>outlineColors(i))


   }
   updateGraph(data[0])
   setInterval(() => {
     index += 1;
      updateGraph(data[index % 3]);

    }, 3000);


  </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;background-color:#152512; }
	svg {
	width: 100%;
	height: 100%;
	}
	</style>
	</head>


	<body>

	<svg>

	</svg>

	<script>
	// Feel free to change or delete any of the code you see in this editor!

	var index=0
	var data =[
	[5,2,3,6,12],
	[7,1,4,6,12],
	[4,5,3,7,14]
	]
	var height=150;
	var colors = d3.scaleOrdinal()
	.range(["#387898","#c79b18","#c79b18","#50863b","#50863b"])

	var outlineColors = d3.scaleOrdinal()
	.range(["#b4d3e3","#d2c488","#d2c488","#b2d6a7","#b2d6a7"])

	var svg= d3.select('svg');
	var background = svg.append('g')
	var foreground =svg.append('g')


	var distanceBetween = 180

	var linePositions = [
	[0,1,2,3],
	[1,4],
	[2,4],
	[4,1],
	[3,1],
	[4,0]

	]



	function updateGraph(data){

	var line = d3.line()
	.x((d,i) =>(d* distanceBetween) +50)
	.y( (d,i)=>height + d*60)
	.curve(d3.curveStepBefore)

	linePositions.forEach(function(element){

	background.append('path')
	.attr('d', line(element))
	.attr('fill', 'none')
	.attr('stroke', 'limegreen')
	.style("stroke-dasharray", ("2, 2"))
	.attr("marker-start", "url(#arrow2)")
	.attr("marker-end", "url(#arrow)");
	})



	svg.append("defs").append("marker")
	.attr("id", "arrow")
	.attr("viewBox", "0 -5 10 10")
	.attr("refX",100)
	.attr("refY", 0)
	.attr("markerWidth", 8)
	.attr("markerHeight", 8)
	.attr("orient", "auto")
	.append("svg:path")
	.attr("d", "M0,-5L10,0L0,5")
	.attr("fill", "limegreen")
	.attr('stroke','#b2d6a7')

	svg.append("defs").append("marker")
	.attr("id", "arrow2")
	.attr("viewBox", "0 -5 10 10")
	.attr("refX",-60)
	.attr("refY", 0)
	.attr("markerWidth", 8)
	.attr("markerHeight", 8)
	.attr("orient", "auto")
	.append("svg:path")
	.attr("d", "M0,-5L10,0L0,5")
	.attr("fill", "limegreen")
	.attr('stroke','#b2d6a7')





	var headers =svg.selectAll('text')
	.data(data, d=>d)

	headers.exit().remove()

	var headersEnter =headers.enter().append('text')

	var headers = headersEnter.merge(headers)
	.attr('x', (d,i) =>(i* distanceBetween) +50)
	.attr('y', (d,i)=>height/1.65 + i*60 )
	.text(d=>d+' Cases')
	.attr('fill', '#fff')
	.style("font-family","roboto")
	.attr("text-anchor", "middle")

	var circles =svg.selectAll('circle')
	.data(data)

	circles.exit().remove()

	var circlesEnter =circles.enter().append('circle')

	var t = d3.transition()
	.duration(1000)

	circles = circlesEnter.merge(circles)
	.attr('cx', (d,i) =>(i* distanceBetween) +50)
	.attr('cy', (d,i)=>height + i*60)
	.attr('stroke-width', 3)
	.transition(t)
	.attr('r', d=>d*5)
	.attr('fill', (d,i)=>colors(i))
	.attr('stroke',(d,i)=>outlineColors(i))




	}
	updateGraph(data[0])
	setInterval(() => {
	index += 1;
	updateGraph(data[index % 3]);

	}, 3000);



	</script>
	</body>