Built with blockbuilder.org
xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style></head><svg id="barData"></svg><body> <script> var width = 250;var height = 300;var svg = d3.select('svg#barData').attr('width',width).attr('height',height);var frontBars = svg.append('g').classed('frontBar',true);var backBars =svg.append('g').classed('backBar',true);var data = [ 41,25,25,40,50,66,41,25,25,40,50,66,41,25,25,40,50,66,41,25,25,40,50,66]; var barHeight = 100; var yscale = d3.scaleLinear().domain([0,d3.max(data)]).range([barHeight,0]);var barWidth = width / data.length-1;backBars.selectAll('rect.backRect') .data(data) .enter() .append('rect') .classed('backRect',true) .style('fill',"rgb(174, 199, 232)") .attr('ry',5).attr('rx',3) .attr('width', barWidth) .attr('height',barHeight) .attr('x', (d,i) => barWidth*i) .attr('y',0) .attr('stroke','#fff') .attr('stroke-width','2').attr('fill-opacity', '0.5');frontBars.selectAll('rect.frontRect') .data(data) .enter() .append('rect') .classed('frontRect',true) .style('fill',"rgb(31, 119, 180") .attr('width', barWidth) .attr('height',(d) => barHeight-yscale(d)) .attr('x', (d,i) => barWidth*i ) .attr('y',d => yscale(d)) .attr('stroke','#fff') .attr('stroke-width','2'); </script></body> https://d3js.org/d3.v4.min.js