D3 Examples - Small Multiples Area Chart

xxxxxxxxxx
 
<!DOCTYPE html>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
​
var smallMultipleSize = [220, 150];
  
var margin = {top: 30, right: 10, bottom: 30, left: 40},
    width = +smallMultipleSize[0] - margin.left - margin.right,
    height = +smallMultipleSize[1] - margin.top - margin.bottom;
​
// parse day, abbreviated month name, year without century
var parseTime = d3.timeParse("%d-%b-%y");
​
var x = d3.scaleTime()
    .rangeRound([0, width]);
​
var y = d3.scaleLinear()
    .rangeRound([height, 0]);
​
// areas are defined by two bounding lines - here the x value is the same for both
// the y values, y0 and y1 differ
// see https://github.com/d3/d3-shape#areas for API reference
var area = d3.area()
    .x(function(d) { return x(d.Date); })
    .y1(function(d) { return y(d.Close); })
// the bottom coordinate of the area will always be zero
    .y0(y(0));
​
// Add a line to give only the top of the area a stroke
var line = d3.line()
        .x(function(d) { return x(d.Date); })
        .y(function(d) { return y(d.Close); });
​
var stocks = [
  {name: "amzn", file: "amzn.csv", colour: "#ff9900"},
  {name: "aapl", file: "aapl.csv", colour: "#999999"},
  {name: "adbe", file: "adbe.csv", colour: "#ff0000"},
  {name: "fb", file: "fb.csv", colour: "#3b5998"},
  {name: "googl", file: "googl.csv", colour: "#008744"},
  {name: "ibm", file: "ibm.csv", colour: "#006699"},
  {name: "msft", file: "msft.csv", colour: "#00a1f1"},
  {name: "orcl", file: "orcl.csv", colour: "#f80000"},
  {name: "twtr", file: "twtr.csv", colour: "#4099ff"}
];
  
// set up queue for all stocks
var queue = d3.queue();
  
for (var s in stocks) {
  queue.defer(d3.csv, stocks[s].file)
}
  
queue.awaitAll(ready);
​
  
function ready(error, results) {  
  for (var s in stocks) {
    drawChart(stocks[s].name, results[s])
  }
}
  
function drawChart(name, results) {
    var data = results.map(function(d) {
        d.Date = parseTime(d.Date);
      d.Close = +d.Close;
      return d;
    });
  
    x.domain(d3.extent(data, function(d) { return d.Date; }));
    y.domain([0, d3.max(data, function(d) { return d.Close; })]);
​
    var svg = d3.select("body").append("svg")
      .attr("width", smallMultipleSize[0])
      .attr("height", smallMultipleSize[1])
      .append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
    svg.append("path")
        .datum(data)
        .attr("fill", function() {
            for (var i in stocks) {
            if (stocks[i].name === name) {
              return stocks[i].colour;
            }
          }
         })
        .attr("d", area);
​
    // add line to top of area
    svg.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "black")
      .attr("d", line)
​
    // add line to the right of the area
    svg.append("line")
      .attr("x1", x.range()[1])
      .attr("y1", 0)
      .attr("x2", x.range()[1])
      .attr("y2", y.range()[0])
      .attr("fill", "none")
      .attr("stroke", "black")
​
    svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x).ticks(3))
​
    svg.append("g")
        .call(d3.axisLeft(y).tickSizeOuter(0).ticks(2))
      .append("text")
                      .attr("fill", "#000")
                      .attr("y", 6)
                      .attr("x", 0)
                      .attr("dx", "0.71em")
                      .attr("text-anchor", "start")
                      .text("Price ($)");
​
                    // Add a small label for the symbol name.
                  svg.append("text")
                      .attr("x", width -6)
                      .attr("y", height -6)
                      .style("text-anchor", "end")
                      .style("font-family", "sans-serif")
                      .style("font-size", "12")
                      .text(name.toUpperCase());
              }
​
</script>
​
    