low barrel

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="Layout.js"></script>
<script src="d3-financial-components.js"></script>
<script src="tooltip.js"></script>
<link href="d3-financial-components.css" rel="stylesheet"/>
<style>
body {
	font: 16px sans-serif;
}
.main-row>td {
	height: 240px;
}
.volume-row>td {
	height: 160px;
	padding-bottom: 20px;
}
.navigator-row>td {
	height: 80px;
}
.chart {
	width: 640px;
}
svg {
	width: 100%;
	height: 100%;
}
span {
	display:block;
	transform: rotate(90deg);
}

rect.background {
    fill: none;
    stroke: #C0C0C0;
}
.gridlines line {
    stroke: #C0C0C0;
    stroke-width: 0.5px;
}
.candlestick.up rect {
    fill: #fff;
}
.candlestick.down rect {
    fill: #7CB5EC;
}
rect.extent {
    fill: rgba(128, 179, 236, 0.3);
    stroke: #C0C0C0;
    stroke-width: 1px;
}
.line {
    stroke: rgba(128, 179, 236, 1);
    stroke-width: 1px;
}
.area {
    fill: rgba(128, 179, 236, 0.05);
}
.crosshairs .vertical {
    stroke: #C0C0C0;
    stroke-width: 1px;
}
.crosshairs .horizontal {
    display: none;
}
.crosshairs .info {
    font: 10px sans-serif;
}
.crosshairs .info rect {
    fill: rgba(249, 249, 249, 0.85);
    stroke: rgba(124, 181, 236, 1);
    stroke-width: 1px;
}

</style>

<table id="low-barrel">
	<tr class="main-row">
		<td class="chart">
			<svg class="main"></svg>
		</td>
		<td>
			<span>OHLC</span>
		</td>
	</tr>
	<tr class="volume-row">
		<td class="chart">
			<svg class="volume"></svg>
		</td>
		<td>
			<span>Volume</span>
		</td>
	</tr>
	<tr class="navigator-row">
		<td class="chart">
			<svg class="navigator"></svg>
		</td>
		<td></td>
	</tr>
</table>
<script src="low-barrel.js"></script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js