Layered area chart with shadows

by William Dickerson

HTML

<body>
<div id="vis" style="width:50vw;height:95vh;position:absolute;"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
</body>

JavaScript

const dates = [
  '6/1', '6/2', '6/3', '6/4', '6/5', '6/6', '6/7',
  '6/8', '6/9', '6/10', '6/11', '6/12', '6/13', '6/14'
];
const desserts = [
  80, 76, 74, 75, 73, 64, 58,
  42, 43, 52, 55, 57, 61, 64
]
const scones = [
  21, 20, 17, 18, 15, 19, 21,
  22, 19, 19, 22, 24, 28, 30
]

const margin = { top: 30, bottom: 30, left: 30, right: 30 };
const width = 400;
const height = 400;

// Append an svg and g element
const visBg = d3.select("#vis")
  .append("svg")
  .style('position','absolute')
  .style('-webkit-filter','drop-shadow(1px -2px 2px gray)')
  .style('filter','none')
  .attr("width","100%")
  .attr("height","100%")
  .attr("viewBox","0 0 " + 
    (width + margin.left + margin.right) + " " + 
    (height + margin.top + margin.bottom))
  .append('g')
  .attr('transform','translate(' + margin.left + ', ' + margin.top + ')');
  
const visFg = d3.select("#vis")
  .append("svg")
  .style('position','absolute')
  .style('-webkit-filter','drop-shadow(1px -3px 3px gray)')
  .style('filter','none')
  .attr("width","100%")
  .attr("height","100%")
  .attr("viewBox","0 0 " + 
    (width + margin.left + margin.right) + " " + 
    (height + margin.top + margin.bottom))
  .append('g')
  .attr('transform','translate(' + margin.left + ', ' + margin.top + ')');
  
const visAxes = d3.select("#vis")
  .append("svg")
  .style('position','absolute')
  .attr("width","100%")
  .attr("height","100%")
  .attr("viewBox","0 0 " + 
    (width + margin.left + margin.right) + " " + 
    (height + margin.top + margin.bottom))
  .append('g')
  .attr('transform','translate(' + margin.left + ', ' + margin.top + ')');

// Set up the scales
const x = d3.scalePoint()
  .domain(dates)
  .range([0, width]);
const y = d3.scaleLinear()
  .domain([0, 85])
  .range([height, 0]);

// Describe the shapes to be drawn
const area = d3.area()
  .x(function(d, i) { return x(dates[i]); })
  .y0(height)
  .y1(function(d) { return y(d); });

// Draw desserts 
visBg.append("path")
  .datum(desserts)
 ...