dashboard

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Dashboard</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.3/d3.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
    </head>
    <style>
        .container {
            position: relative;

}
        .inner-container {
            position: absolute;
            border: 1px solid black;
            top: 5px;
            left: 5px;
            width: 400px;
            height: 450px;
            background-color: rgba(236, 240, 241, 0.8);
        }
        .inner-container p {
            margin: 2px;
            color: black;
            opacity: 1;
        }
        .axis path,
        .axis line {
            stroke: black;
        }
        .axis text {
            font-family: Optima, Futura, sans-serif;
            font-size: 12px;
            fill: black;
        }
        .axis {
            fill: none;
            stroke: #000;
        }
        #map_rect {
            fill: white;
            float: left;
        }
		#bar {
			margin-top: 5px;
		}
		#bar2 {
			margin-top: 5px;
		}
    </style>
    <body>
        <div class="container" id="map">
            <div class="inner-container">
                <div>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut aliquam metus. 
					Integer vitae dolor libero. Etiam vitae luctus diam. Nunc a porttitor justo, id fringilla 
					lacus. Maecenas a posuere arcu, quis tristique justo. Nulla hendrerit arcu eu magna 
					imperdiet bibendum. Pellentesque id sapien dignissim, gravida velit eu, luctus ipsum. 
					Nullam dui tellus, ullamcorper quis aliquam sit amet, malesuada in elit. Interdum et 
					malesuada fames ac ante ipsum primis in faucibus. Mauris id ornare mi, ut mollis turpis. 
					Proin nec est ligula. </p>
				</div>
                <div id='bar'></div>
            </div>
            <script src="map.js"></script>
            <script>map();</script>
        </div>
		<div id="bar2">
		</div>
        
        <script>
            var w = 350;
            var h = 150;
            var padding = 2;
            var dataset = [ 5, 10, 25, 19, 21, 15];

var barSVG = d3.select("#bar").append('svg')
                        .attr("width",w)
                        .attr("height",h);

barSVG.selectAll('rect')
                .data(dataset)
                .enter()
                .append('rect')
                .attr('x', function(d,i) { return i*(w/dataset.length); })
                .attr('y', function(d) { return h-(d*10); })
                .attr('width', function(d) { return w/dataset.length - padding; })
                .attr('height', function(d) { return d*10; })
                .attr('fill', function(d) {
                    return "rgb(0, 0, " + Math.round(d*10) + ")";
                });

barSVG.selectAll("text")
                .data(dataset)
                .enter()
                .append("text")
                .text(function(d) { return d; })
                .attr("x", function(d, i) { return i*(w/dataset.length) + (w/dataset.length-padding)/2;})
                .attr("y", function(d) { return h-(d*10) + 20; })
                .attr("font-family", "sans-serif")
                .attr("font-size", "12px")
                .attr("fill", "#FFFFFF")
                .attr("text-anchor", "middle");

</script>
		 <script>
            var w = 450;
            var h = 250;
            var padding = 2;
            var dataset = [ 5, 10, 25, 19, 21, 15];

var barSVG = d3.select("#bar2").append('svg')
                        .attr("width",w)
                        .attr("height",h);

</script>
    </body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.3/d3.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js