JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://d3js.org/d3.v3.min.js"></script>
<!DOCTYPE html>
<body>
<form id="form1" role="form" onSubmit="return false;">
    <div class=form-group">
        <label for="alarm_count_input" >Alarm count</label><br>
        <input id="alarm_count_input" class="form-control" type="number" placeholder="Alarm count" min="0" max="999999" step="1" />
    </div>
</form>
</body>

CSS

body {
    font: 12px sans-serif;
}

form#form1{
    width:100px;
    display:block;
    position: absolute;
    top:10px;
    right:10px;
}

label{
    font-size:12pt;
}

.axis path,
.axis line {
    fill: none;
    stroke: #000;
    stroke-width: 2px;
    shape-rendering: crispEdges;
}

.axis {
    font-size:12pt;
}

.line {
    fill: none;
    stroke: steelblue;
	stroke-width: 2.5px;
	stroke-dasharray: 0;
}

circle{
    fill:RoyalBlue;
    opacity:0.6;
    stroke: steelblue;
	stroke-width: 2;
	fill: #FFF;
}

.grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
}

JavaScript

$(function(){

function sumOfArray( array ) { // returns sum of schedule integers
	var count = 0;
	for(var i=0, n=array.length; i < n; i++) 
	{ 
	  count += array[i]; 
	}
	return count;
}

function getRatio( val, array ) {  // returns ratio ( < 1) of all alarms that @val will contribute
	return val / sumOfArray(array);
}

function getRatioForHour( hour, array ) { // returns ratio ( < 1) of all alarms that @array[hour] will contribute
	return array[hour] / sumOfArray(array);
}

//return array [hour in which max occur,max alarm count in one hour] 
//for @alarm_cnt and @array
function getMaxAlarmCountForHourInArray( alarm_cnt, array ) {	
	var max = [0,0];
	for(var i = 0, n=array.length; i< n; i++)
	{
		var temp_max = getRatioForHour(i, array) * alarm_cnt;
		if( temp_max > max[1]) {
			max = [i,temp_max];
		}
	}
    return max;
}

function createDataForD3( alarm_cnt, array) {
	var data = [];
	for(var i = 0, n=array.length; i< n; i++)
	{
		data.push({	"hour": i, 
					"alarms": getRatioForHour(i, array) * alarm_cnt
					});
	}
	return data;
}

var schedule = [1, 1, 1, 1, 4, 1, 1, 3, 2, 3, 4, 1, 1, 1, 1, 1, 6, 1, 1, 1, 1, 1, 1, 1];
var alarm_count = 1000;

//$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 0.85 * document.width - margin.left - margin.right,
    height = 0.9 * document.height - margin.top - margin.bottom;

var x_extent = [-0.5, 23.5];
var y_extent = [0, Math.round(
                    getMaxAlarmCountForHourInArray(alarm_count, schedule)[1] * 1.2 ) ];

var x_scale = d3.scale.linear()
    .range([0, width])
    .domain(x_extent);
	
var y_scale = d3.scale.linear()
	.range([ height, 0])
	.domain(y_extent);
	
    
var data = createDataForD3( alarm_count , schedule);
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

var xAxis = d3.svg.axis()
    .scale(x_scale)
    .orient("bottom")
    .ticks(24);

var yAxis = d3.svg.axis()
    .scale(y_scale)
    .orient("left");

var line = d3.svg.line()
   ...