index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>MIT Histogram</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.plot.ly/plotly-2.12.1.min.js"></script>
  </head>
  <body>
    <div id="plot"></div>
    <script>
      let dates = [];
      let dateCounts = [];
      fetch("/dates.json")
        .then((response) => response.json())
        .then((data) => {
          data.entries.forEach((date) => {
            dates.push(date.key);
            dateCounts.push(date.count);
          });
        })
        .then(() => {
          var myPlotDiv = document.getElementById("plot");
          let chartData = [
            {
              x: dates,
              y: dateCounts,
              type: "bar",
              marker: {
                color: "black",
              },
            },
          ];
          let layout = {
            title: "MIT object dates",
            xaxis: {
              title: "Date",
            },
            yaxis: {
              title: "Frequency",
            },
          };
          Plotly.newPlot(myPlotDiv, chartData, layout);
          myPlotDiv.on("plotly_relayout", function (e) {
            console.log(e);
          });
        });
    </script>
  </body>
</html>