Scatter Plot with AAPL Stocks

Part of the video course: D3.js in Motion.

This scatter plot shows scatter plot with time axis of volume of AAPL stock from Aug 13, 2012 to Aug 11, 2017 for every trading day. The data was collected from S&P 500 Stock Data of Kaggle and Yahoo Finance.

forked from curran's block: Scatter Plot with Time Axis

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <title>Temperature Visualization</title>
    <style>
      body {
        margin: 24px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #675f60;
      }
      .tick text {
        fill: #6d6863;
        font-size: 13pt;
        font-family: sans-serif;
      }
      .axis-label {
        fill: #635F5D;
        font-size: 23pt;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <svg width="878" height="497"></svg>
    <script>
      const xValue = d => d.Date;
      const xLabel = 'Date';
      const yValue = d => d.Volume;
      const yLabel = 'Volume';
      const margin = { left: 153, right: 25, top: 8, bottom: 155 };

const svg = d3.select('svg');
      const width = svg.attr('width');
      const height = svg.attr('height');
      const innerWidth = width - margin.left - margin.right;
      const innerHeight = height - margin.top - margin.bottom;

xAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', innerWidth / 2)
          .attr('y', 61)
          .text(xLabel);

yAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', -innerHeight / 2)
          .attr('y', -120)
          .attr('transform', `rotate(-90)`)
          .style('text-anchor', 'middle')
          .text(yLabel);

const xScale = d3.scaleTime();
      const yScale = d3.scaleLinear();

const xAxis = d3.axisBottom()
        .scale(xScale)
        .tickPadding(16)
        .tickSize(-innerHeight);

const yAxis = d3.axisLeft()
        .scale(yScale)
        .ticks(5)
        .tickPadding(11)
        .tickSize(-innerWidth);

const row = d => {
        d.Date = new Date(d.Date);
        d.Volume = +d.Volume;
        return d;
      };

d3.csv('AAPL_data.csv', row, data => {
        xScale
          .domain(d3.extent(data, xValue))
          .range([0, innerWidth])
          .nice();

yScale
          .domain(d3.extent(data, yValue))
          .range([innerHeight, 0])
          .nice();

g.selectAll('circle').data(data)
          .enter().append('circle')
            .attr('cx', d => xScale(xValue(d)))
            .attr('cy', d => yScale(yValue(d)))
            .attr('fill-opacity', 0.5501184)
            .attr('r', 3);

xAxisG.call(xAxis);
        yAxisG.call(yAxis);
      });
    </script>
  </body>
</html>

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