D3 single stack bar

by fekkyDev s

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

CSS

*,html,body{
                                margin:0;
                                padding:0;
                }
                html,body{
                                height:100%;
                                width:100%;
                }

JavaScript

var data = [
                                {
                                "pop1":20,
                                "pop2":20,
                                "pop3":50,
                                "pop4":20
                                }
    
];

var data2=[
{
"pop1":20,
"count":[1,3,4]
},
{
"pop2":20,
"count":[1,3]
},
{
"pop3":50,
"count":[1,3,2]
},
{
"pop4":20,
"count":[1,4,3]
}

]


var margin = {top: 0, right: 0, bottom: 0, left: 0},
    width = 150 - margin.left - margin.right,
    height = 90 - margin.top - margin.bottom;
                n=4;
                m = data.length;
                console.log('data.length',m)
    var stack = d3.stack().keys(d3.keys(data[0])) .order(d3.stackOrderNone)
    .offset(d3.stackOffsetNone);
                data.map(function(d){
                                                console.log('map',d)
                })

                console.log('range',d3.range(n));
                console.log('keys',d3.keys(data[0]));
                console.log('stack(data)',stack(data));
                //console.log('before stack',stack)
//            var layers = stack(d3.range(n).map(function(d){
//                            console.log('inside stack',d)
//                            var a=[];
//                            for (var i=0;i<m ;++i )
//                            {
//                                            console.log('d----------------->',d);
//                                            console.log('i-->',i,'m-->',m);
//                                            a[i] ={x:i,y:data[i]['pop'+(d+1)]}
//                            }
//                            console.log('arry',a);
//                            return a;
//            }));
//console.log('layer',layers(data));

//var stack = d3.stack()
//    .keys(d3.range(n).map(function(d){
//                            var a=[];
//                            for (var i=0;i<m ;++i ){
//                                           ...