D3 chart plugin template

A template example to write simple chart plugins on top of D3. It is a base for discussion, so your are much welcome to modify it and comment it. The requirements are discussed on the wiki.

This implementation provides: div or svg parent, variants (bars or stacked bars), position, relative position (after or under another chart of the same svg parent), margins, gap between bars (in %), transition duration, separated data and labels (to discuss), uses axis component (to complete), chart size taken from the parent and will resize with it, all items accessible from CSS for styling, most options optional, automatic redraw on setting change and zero argument returns the value.

In this example, the first bar chart data updates periodically and a mouse click changes chart type.

<head>
    <title></title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
 <style type="text/css">
        body{
            margin: 0;
        }
        #viz1{
            width: 400px;
            height: 400px;
            position: absolute;
            left: 0;
            border: solid silver 1px;
        }
        .panel{
            fill: aliceblue;
        }
        #group1 .mark{
            fill: skyblue;
            stroke: steelblue;
        }
        #group2 .mark{
            fill: orange;
            stroke: orangered;
        }
        #group3 .mark{
            fill: yellowgreen;
            stroke: olivedrab;
        }
        #group4 .mark{
            fill: pink;
            stroke: orchid;
        }
        .domain{
            display: none;
         }
        .axis line {
          stroke: silver;
        }
    </style>
</head>
<body>
    <div id="viz1"></div>
    <script type="text/javascript" src="chart_template.js"></script>
    <script type="text/javascript">
 var barchart1 = d3.bio.barchart()
    .parent("#viz1")
    .margin([10, 10, 20, 10])
    .gap(30)
    .size([200, 200])
    .data([1, 2, 5]);
    
var barchart2 = d3.bio.barchart()
    .parent(barchart1.parent())
    .margin([10, 10, 20, 10])
    .gap(30)
    .size(barchart1.size())
    .position("after", barchart1)
    .data([10, 4, 6]);
    
var barchart3 = d3.bio.barchart()
    .parent(barchart1.parent())
    .margin([10, 10, 20, 10])
    .gap(30)
    .size(barchart1.size())
    .position("under", barchart1)
    .data([15, 25, 12]);
    
var barchart4 = d3.bio.barchart()
    .parent(barchart1.parent())
    .margin([10, 10, 20, 10])
    .gap(30)
    .size(barchart3.size())
    .position("after", barchart3)
    .data([1, 40, 15]);

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

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