d3js-v4-egghead/src/app.js

/* global d3, responsivefy */

// D3 convention: define margin as an object called margin with these props:
let margin = {
  top: 10,
  right: 20,
  bottom: 30,
  left: 30
};
let width = 400 - margin.left - margin.right;
let height = 600 - margin.top - margin.bottom;

let svg = d3.select(".chart")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .call(responsivefy)
  .append("g")
    .attr("transform", () => `translate(${margin.left},${margin.top})`);

d3.json("data/data.json", function (err, data) {
  const parseTime = d3.timeParse("%Y/%m/%d");

  // Normalize data.
  data.forEach(company => {
    company.values.forEach(d => {
      d.date = parseTime(d.date);
      // Ensure close is an integer.
      d.close = +d.close;
    });
  });

  let xScale = d3.scaleTime()
    .domain([
      d3.min(data, company => d3.min(company.values, d => d.date)),
      d3.max(data, company => d3.max(company.values, d => d.date))
    ])
    .range([0, width]);

  svg
    .append("g")
      .attr("transform", `translate(0, ${height})`)
    .call(d3.axisBottom(xScale).ticks(5));

  let yScale = d3.scaleLinear()
    .domain([
      d3.min(data, company => d3.min(company.values, d => d.close)),
      d3.max(data, company => d3.max(company.values, d => d.close))
    ])
    .range([height, 0]);
  svg
    .append("g")
    .call(d3.axisLeft(yScale));

  let area = d3.area()
    .x(d => xScale(d.date))
    .y0(yScale(yScale.domain()[0]))
    .y1(d => yScale(d.close))
    .curve(d3.curveCatmullRom.alpha(0.5))
  ;
  svg.selectAll(".area")
    .data(data)
    .enter()
    .append("path")
      .attr("class", "area")
      .attr("d", d => area(d.values))
      // i is the index, alternating 0 and 1 (AMZN orange, GOOG blue).
      .style("stroke", (d, i) => ["#FF9900", "#3369E8"][i])
      .style("stroke-width", 2)
      .style("fill",  (d, i) => ["#FF9900", "#3369E8"][i])
      .style('fill-opacity', 0.5);

});