2016 CFPB Complaints with Zoom

This is a scatter plot of number of complaints by product the CFPB recieved in 2016. The x-axis is month, the y-axis is the complaint count, and the color of the point is the product that the complaint was about. The user can zoom in on the points to see the overlapping points better.

This data is from part of the Data.gov: Consumer Complaint Database. The data shown in the plot is only 2016.

This scatter plot was forked from curran's block: Scatter Plot with Ordinal Axis and Responding to Resize

forked from emilyw15's block: 2017 MTA Average Ridership

<!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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
    <title>2017 Average Commuter Ridership in Maryland</title>
    <style>
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #C0C0BB;
      }
      .tick text, .legendCells text {
        fill: #8E8883;
        font-size: 12pt;
        font-family: sans-serif;
      }
      .axis-label, .legend-label {
        fill: #635F5D;
        font-size: 15pt;
        font-family: sans-serif;
      }
      #chart {
        position: fixed;
        left:0px;
        right:0px;
        top:0px;
        bottom:0px;
      }
    </style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <div id = "chart"></div>
    <script>

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

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

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

yScale
          .domain(d3.extent(data, yValue))
          .range([innerHeight, 0])
          .nice(yTicks);
        
        var circles = datag.selectAll('circle').data(data)
        
        circles
        	.enter()
          	.append('circle')
        		.attr('fill-opacity', 0.6)
        .merge(circles)
        	.attr('cx', d => xScale(xValue(d)))
          .attr('cy', d => yScale(yValue(d)))
          .attr('fill', d => colorScale(colorValue(d)))
        	.attr('r', 8);

xAxisG.call(xAxis);
        yAxisG.call(yAxis);
        colorLegendG.call(colorLegend)
          .selectAll('.cell text')
            .attr('dy', '0.1em');
      });
      }
      
      redraw();
      window.addEventListener("resize",redraw);

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

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

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js