muratabur/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Variation on the status monitor bar chart with a pulsating ball. I prefer to have the ball outgrow the svg but you can set "r" to max-out at svg height/width to keep full ball even at 100%.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

svg {
  border: 1px solid;
}

text {
  fill: white;
  font-size: 100px;
  font-weight: 600;
  font-family: Helvetica;
}

</style>
<body>
<!-- D3 pulsating ball with transition for monitoring server status/CPU usage -->
<svg width="960" height="500" id="chart"></svg>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

<script type="text/javascript">

var width = 960;
var height = 500;

// our "random" status value
var value = [Math.round(Math.random()*height)];
    console.log(value);

//Create SVG element
var svg = d3.select("#chart")               // select DOM svg with id "chart"

var ball = svg.selectAll("circle")             // select non-existent "rects"
             .data(value)                   // take every element of list data
             .enter()
             .append("circle")
             .attr("cx", width/2)
             .attr("cy", height/2 )
             .attr("r", value)


// label
var label = svg.append("text")
              .text(100*value/height + "%")
              .attr("x", width/2 - 100)
              .attr("y", height/2 + 50);

// create transition to a new value/color
setInterval(function () {
  var newval = [Math.round(Math.random()*height)];                           // new random number for transition
  var ballcolor = "rgb("+ 255*newval/height +", 0, 100)"                         // new color for transition
      ball.transition().attr("y", height - newval)
                      .attr("r", newval )    // transition the bar
                      .attr("fill", ballcolor);

  //var labelcolor = "rgb("+ 255*newval/height+255 +","+ 255*newval/height+255 +","+ 255*newval/height+255 +" )";
    label.transition().text(100*newval/height + "%");   		// transition label

   }, 750);

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	svg {
	border: 1px solid;
	}

	text {
	fill: white;
	font-size: 100px;
	font-weight: 600;
	font-family: Helvetica;
	}

	</style>
	<body>
	<!-- D3 pulsating ball with transition for monitoring server status/CPU usage -->
	<svg width="960" height="500" id="chart"></svg>
	</body>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

	<script type="text/javascript">

	var width = 960;
	var height = 500;

	// our "random" status value
	var value = [Math.round(Math.random()*height)];
	console.log(value);

	//Create SVG element
	var svg = d3.select("#chart") // select DOM svg with id "chart"

	var ball = svg.selectAll("circle") // select non-existent "rects"
	.data(value) // take every element of list data
	.enter()
	.append("circle")
	.attr("cx", width/2)
	.attr("cy", height/2 )
	.attr("r", value)


	// label
	var label = svg.append("text")
	.text(100*value/height + "%")
	.attr("x", width/2 - 100)
	.attr("y", height/2 + 50);

	// create transition to a new value/color
	setInterval(function () {
	var newval = [Math.round(Math.random()*height)]; // new random number for transition
	var ballcolor = "rgb("+ 255*newval/height +", 0, 100)" // new color for transition
	ball.transition().attr("y", height - newval)
	.attr("r", newval ) // transition the bar
	.attr("fill", ballcolor);

	//var labelcolor = "rgb("+ 255newval/height+255 +","+ 255newval/height+255 +","+ 255*newval/height+255 +" )";
	label.transition().text(100*newval/height + "%"); // transition label

	}, 750);

	</script>