D3 Examples - dashboard

xxxxxxxxxx
 
<!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>
        <!--bar charts-->
        <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);
​
            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>
    </body>
</html>
    