D3 Examples - US major city crime data in 40 years

US major city crime data in 40 years
This dataset is about more than 40 years of data on the four major crimes the FBI classifies as violent — homicide, rape, robbery and assault — in 68 police jurisdictions with populations of 250,000 or greater.
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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
    <title>Basic Scatter Plot</title>
    <style>
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #C0C0BB;
      }
      .tick text, .legendCells text {
        fill: #000000;
        font-size: 10pt;
        font-family: sans-serif;
      }
      .axis-label, .legend-label {
        fill: #b9b7b5;
        font-size: 15pt;
        font-family: sans-serif;
      }
      .subtitle {
        font-size: 16pt;
        font-family: 'Open Sans', sans-serif;
        alignment-baseline: middle;
        fill: #470000;
    }
    </style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>
      
      const parseTime = d3.timeParse("%Y");
      
      const xValue = d => d.report_year;
      const xLabel = 'Report Year';
      const yValue = d => d.violent_crimes;
      const yLabel = 'Violent Crimes';
      
      const zValue = d => d.population;
      
      //const colorValue = d => d.Entity;
      
      const colorLabel = 'Countries';
      const margin = { left: 120, right: 300, top: 20, bottom: 120 };
​
      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+50})`);
      const xAxisG = g.append('g')
          .attr('transform', `translate(0, ${innerHeight})`);
      const yAxisG = g.append('g');
      const colorLegendG = g.append('g')
          .attr('transform', `translate(${innerWidth + 60}, 150)`);
​
       g.append('text')
        .attr('class', 'subtitle')
        .attr('x', -50)
        .attr('y', margin.top-60)
            .style('font-weight', 'bold')
        .text('Percentage of Electricity Produced From Nuclear Sources Per Year');
      
      xAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', innerWidth / 2)
          .attr('y', 50)
          .text(xLabel);
​
      yAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', -innerHeight / 2)
          .attr('y', -60)
          .attr('transform', `rotate(-90)`)
          .style('text-anchor', 'middle')
          .text(yLabel);
​
      colorLegendG.append('text')
          .attr('class', 'legend-label')
          .attr('x', -30)
          .attr('y', -40)
          .text(colorLabel);
​
      const xScale = d3.scaleTime();
      const yScale = d3.scaleLinear();
      const colorScale = d3.scaleOrdinal()
        .range(d3.schemeCategory10);
​
     const xAxis = d3.axisBottom()
        .scale(xScale)
        .ticks(8)
        .tickPadding(10)
        .tickSize(5);
​
​
      const yAxis = d3.axisLeft()
        .scale(yScale)
        .ticks(6)
        .tickPadding(15)
        .tickSize(-innerWidth)
        .tickFormat(d3.format("d"));
​
      const colorLegend = d3.legendColor()
        .scale(colorScale)
        .shape('circle');
​
​
      d3.csv('crimereport.csv', data => {
        
      
        var temp_data = data
                
        temp_data = data.filter(function(d) {
          return d.agency_jurisdiction == "United States" })
        
        xScale
          .domain(d3.extent(temp_data, d=>parseTime(d.report_year)))
          .range([0, innerWidth])
          .nice();
​
        yScale
          .domain([0,4000000])
          .range([innerHeight, 0])
          .nice();
        
        g.selectAll('circle').data(temp_data)
          .enter().append('circle')
            .attr('cx', d => xScale(parseTime(xValue(d))))
            .attr('cy', d => yScale(yValue(d)))
            .attr('fill', "red")
            .attr('fill-opacity', 0.6)
            .attr('r', 5);
            //.attr('r', d => (zValue(d)-1000000)/500000);
​
        xAxisG.call(xAxis);
        yAxisG.call(yAxis);
        
   
      });
    </script>
  </body>
</html>
​
    