D3 Examples - Scatter Plot with AAPL Stocks

Scatter Plot with AAPL Stocks
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.
xxxxxxxxxx
 
<!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;
​
      const g = svg.append('g')
          .attr('transform', `translate(${margin.left},${margin.top})`);
      const xAxisG = g.append('g')
          .attr('transform', `translate(0, ${innerHeight})`);
      const yAxisG = g.append('g');
​
      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>
​
    