6.9 area chart | multiple

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>

<link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;1,100;1,300&display=swap" rel="stylesheet">

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

<p id="h1">AREA CHART | MULTIPLE</p>
<div id="link"> by
<a href="https://slides.com/sandravizmad">SANDRA</a> | <a href="https://data.oecd.org/agroutput/meat-consumption.htm">DATA </a></div>

<div id="vis"></div>

<style>

/*Defining text stylings*/

#h1 {
  font-size:30px;
  margin:30px 0px 0px 20px;
  color:#f5fa91;
  font-family:'Montserrat Alternates', sans-serif;
  font-weight:300;
}

#link {
	font-family:'Montserrat Alternates', sans-serif;
  font-weight:200;
  font-size:10px;
	margin:5px 0px 0px 22px;
  color:white;
}

a:link, a:visited, a:active {
	text-decoration: none;
  color:white;
  border-bottom:1.5px dotted white;
}

body {
  background-color:#011227;
}

/*Defining chart stylings*/

.line {
  fill:none;
  stroke:#f5fa91;
  stroke-width:0px;
  stroke-dasharray:2;
}

.area {
  fill:#85f6fa;
  opacity:1;
}

.label {
  font-family:'Montserrat Alternates', sans-serif;
  font-size:11px;
  font-variant: small-caps slashed-zero;
  fill:black;
  opacity:1;
}

</style>
</head>

//Margin conventions
var m = {top:400, right:20, bottom:50, left:20}
    w = 0,
    h = 0;

//Container
var svg = d3.select("body")
	  .append("svg")
    .attr("width", w + m.left + m.right)
    .attr("height", h + m.top + m.bottom)
    .append("g")
		.attr("transform", `translate(${m.left}, ${m.top})`);

//Margin conventions for the small multiple container
var m_s = {top:5, right:10, bottom:5, left:10}
    w_s = 150 - m_s.left - m_s.right,
    h_s = 150 - m_s.top - m.bottom;

//Data format
var parseDate = d3.time.format("%b %Y").parse;

//X scale
var x = d3.time.scale()
    .range([0, w_s]);

//Y scale
var y = d3.scale.linear()
    .range([h_s, 0]);

//Area generator
var area = d3.svg.area()
    .x(d => x(d.date))
    .y0(h_s)
    .y1(d => y(d.price));

//Line generator
var line = d3.svg.line()
		.interpolate("linear")
    .x(d => x(d.date))
    .y(d => y(d.price));

//Data loading
d3.csv(
  "https://gist.githubusercontent.com/sandravizz/71f51aaa005e04b3f2c7ba446178ae2f/raw/7d1a1f9f3ea6117703dbd61c9ca8d3f000ab4add/brand%2520data",
  type,
  data => {

//Nest data by symbol
  var symbols = d3.nest()
      .key(d => d.symbol)
      .entries(data);

//Data check
  console.log(symbols);

//Max price per symbol
  symbols.forEach(s => {s.maxPrice = d3.max(s.values, d => d.price);});

//Min and Max date across symbols
  x.domain([d3.min(symbols,s => s.values[0].date),
            d3.max(symbols,s => s.values[s.values.length - 1].date)]);

//Small multiple container
  var s_svg = d3.select("body")
  		.selectAll("svg")
      .data(symbols)
      .enter()
  		.append("svg")
      .attr("width", w_s + m_s.left + m_s.right)
      .attr("height",h_s + m_s.top + m.bottom)
      .append("g")
  		.attr("transform",`translate(${m_s.left}, ${m_s.top})`);

//Draw the area: domain per container
  s_svg.append("path")
      .attr("class", "area")
      .attr("d",d => {y.domain([0, d.maxPrice]); return area(d.values);});

//Draw the line: domain per container
  s_svg.append("path")
      .attr("class", "line")
      .attr("d",d => {y.domain([0, d.maxPrice]); return line(d.values);});

//Lable
  s_svg.append("text")
      .attr("x", w_s - 4)
      .attr("y", h_s - 4)
  	  .attr("class", 'label')
      .style("text-anchor", "end")
      .text(d => d.key);});

//Data format
  function type(d) {
    d.price = +d.price;
    d.date = parseDate(d.date);
    return d;
}

</script>
</body>
</html>

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