Metrics Graphics

by Scott Currell

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/metrics-graphics/2.15.6/metricsgraphics.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/metrics-graphics/2.15.6/metricsgraphics.min.css">
<div id="ufo-sightings"></div>

<p>Resources:</p>
<ul>
  <li><a href="https://metricsgraphicsjs.org/" target="_blank">metricsgraphicsjs.org</a></li>
  <li><a href="https://github.com/metricsgraphics/metrics-graphics" target="_blank">github.com/metricsgraphics/metrics-graphics</a></li>
  <li><a href="https://d3js.org/" target="_blank">d3js.org</a></li>
</ul>

JavaScript

var dataArr = [
  {
    "year": "1945",
    "sightings": 6
  },
  {
    "year": "1946",
    "sightings": 8
  },
  {
    "year": "1947",
    "sightings": 34
  },
  {
    "year": "1948",
    "sightings": 8
  },
  {
    "year": "1949",
    "sightings": 15
  },
  {
    "year": "1950",
    "sightings": 25
  },
  {
    "year": "1951",
    "sightings": 20
  },
  {
    "year": "1952",
    "sightings": 48
  },
  {
    "year": "1953",
    "sightings": 34
  },
  {
    "year": "1954",
    "sightings": 50
  },
  {
    "year": "1955",
    "sightings": 31
  },
  {
    "year": "1956",
    "sightings": 38
  },
  {
    "year": "1957",
    "sightings": 67
  },
  {
    "year": "1958",
    "sightings": 40
  },
  {
    "year": "1959",
    "sightings": 47
  },
  {
    "year": "1960",
    "sightings": 64
  },
  {
    "year": "1961",
    "sightings": 39
  },
  {
    "year": "1962",
    "sightings": 55
  },
  {
    "year": "1963",
    "sightings": 75
  },
  {
    "year": "1964",
    "sightings": 77
  },
  {
    "year": "1965",
    "sightings": 167
  },
  {
    "year": "1966",
    "sightings": 169
  },
  {
    "year": "1967",
    "sightings": 178
  },
  {
    "year": "1968",
    "sightings": 183
  },
  {
    "year": "1969",
    "sightings": 138
  },
  {
    "year": "1970",
    "sightings": 126
  },
  {
    "year": "1971",
    "sightings": 110
  },
  {
    "year": "1972",
    "sightings": 146
  },
  {
    "year": "1973",
    "sightings": 209
  },
  {
    "year": "1974",
    "sightings": 241
  },
  {
    "year": "1975",
    "sightings": 279
  },
  {
    "year": "1976",
    "sightings": 246
  },
  {
    "year": "1977",
    "sightings": 239
  },
  {
    "year": "1978",
    "sightings": 301
  },
  {
    "year": "1979",
    "sightings": 221
  },
  {
    "year": "1980",
    "sightings": 211
  },
  {
    "year": "1981",
    "sightings": 146
  },
  {
    "year": "1982",
    "sightings": 182
  },
  {
    "year": "1983",
    "sightings": 132
  },
  {
    "year": "1984",
    "sightings": 172
  },
  {
...