muratabur/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A bar chart with value and color transitions. Could be used for status monitors (ie. CPU/Memory/Disk usage).

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

svg {
  border: 1px solid;
}

text {
  fill: #3f3f3f;
  font-size: 100px;
  font-weight: 600;
  font-family: Helvetica;
  margin-top: 100px;
}

</style>
<body>
<!-- D3 Simple Bar Chart 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;
var scale_factor = 0.75;

// 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 bar = svg.selectAll("rect")             // select non-existent "rects"
             .data(value)                   // take every element of list data
             .enter()                       // and enter a...
             .append("rect")                // a "rect"
             .attr("x", 0)                  // with x = 0
             .attr("y", height - value)     // and y = 0
             .attr("width", width)          // with width = w
             .attr("height", value)         // and height data

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

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

      label.transition().text(100*newval/height + "%")
      					.attr("y", height - newval*scale_factor)
   }, 750);

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

	svg {
	border: 1px solid;
	}

	text {
	fill: #3f3f3f;
	font-size: 100px;
	font-weight: 600;
	font-family: Helvetica;
	margin-top: 100px;
	}

	</style>
	<body>
	<!-- D3 Simple Bar Chart 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;
	var scale_factor = 0.75;

	// 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 bar = svg.selectAll("rect") // select non-existent "rects"
	.data(value) // take every element of list data
	.enter() // and enter a...
	.append("rect") // a "rect"
	.attr("x", 0) // with x = 0
	.attr("y", height - value) // and y = 0
	.attr("width", width) // with width = w
	.attr("height", value) // and height data

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

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

	label.transition().text(100*newval/height + "%")
	.attr("y", height - newval*scale_factor)
	}, 750);

	</script>