simple legend component

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title> 
    <script type='text/javascript' src="https://d3js.org/d3.v3.min.js"></script>
    <script type='text/javascript' src="util.js"></script>
    <script type='text/javascript' src="legend.js"></script>
    <link rel="stylesheet" type="text/css" href="./style.css">
    <style>
        div{
            position: absolute;
            top: 30px;
        }
        #container1{
            left: 0px;
        }
        #container2{
            left: 100px;
        }
        #container3{
            left: 200px;
        }
    </style>
</head>
<body>

var continuouslegend = micropolar.legend()
        .config({
            data: [1, 10],
            colors: ['red', 'yellow', 'limegreen'],
            containerSelector: '#container1'
        });
    continuouslegend();

var discreteLegend = micropolar.legend()
        .config({
            data: ['a', 'b', 'c'],
            colors: ['red', 'yellow', 'limegreen'],
            containerSelector: '#container2'
        });
    discreteLegend();

var symbolLegend = micropolar.legend()
            .config({
                data: ['a', 'b', 'c'],
                colors: 'black',
                symbols: ['square', 'line', 'cross'],
                containerSelector: '#container3'
            });
    symbolLegend();

</script>

</body>
</html>

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

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