popepedia/index.html

---
title: "Popepedia"
description: "Information about the edit frequency of the new Pope's Wikipedia page"
hideAside: true
---
{% extends "_layouts/base.html" %}
{% block head %}
<script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js" integrity="sha256-v0oiNSTkC3fDBL7GfhIiz1UfFIgM9Cxp3ARlWOEcB7E=" crossorigin="anonymous"></script>
{% endblock %}

{% block main %}
<h1>Popepedia</h1>
<p>Here are some stats about the <a href="https://en.wikipedia.org/wiki/Pope_Leo_XIV">new Pope's wikipedia page</a> and how often it's being edited. The 2 edits prior to the announcement included for a little context. Data last updated at <span id="updatedAt"></span>.</p>
<p>Since announcement:</p>
<ul>
    <li>Total edits: <span id="totalEdits"></span></li>
    <li>Total volume: <span id="totalVolume"></span></li>
</ul>
<center><div id="editchart" style="width: 80%;height: 500px;"></div></center>
<center><div id="volumechart" style="width: 80%;height: 500px;"></div></center>

<script type="text/javascript">
    setTimeout(window.location.reload, 1000 * 60)

    window
      .fetch(new Request("data.json"))
      .then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
    
        return response.json();
      })
      .then((response) => {
        var data = response.data
        document.getElementById("updatedAt").innerText = response.updated_at
        document.getElementById("totalEdits").innerText = response.total_edits
        document.getElementById("totalVolume").innerText = response.total_bytes_changed + " characters"
        
        // Initialize the echarts instance based on the prepared dom
        var myChart = echarts.init(document.getElementById('editchart'));
    
        // Specify the configuration items and data for the chart
        var option = {
          title: {
            text: 'Edits over time'
          },
          tooltip: {
              trigger: 'axis',
            },
            dataset: {
              source: data,
              dimensions: ['timestamp', "edits", "avg_edits", "running_edits", 'vol', 'avg_vol', "running_vol"],
            },
            xAxis: { type: 'time' },
            yAxis: {name: 'Edit count', nameLocation: 'center', nameGap: 45},
            series: [
                // {
                //     name: 'Raw edit count',
                //     yAxisIndex: 0,
                //     type: 'line',
                //     encode: {
                //       x: 'timestamp',
                //       y: 'edits'
                //     }
                // },
                {
                    name: 'Average edit count',
                    yAxisIndex: 0,
                    type: 'line',
                    encode: {
                      x: 'timestamp',
                      y: "avg_edits"
                    }
                },
                {
                    name: 'Running edit count (hundreds)',
                    yAxisIndex: 0,
                    type: 'line',
                    encode: {
                      x: 'timestamp',
                      y: "running_edits"
                    }
                }
            ]
        };
    
        // Display the chart using the configuration items and data just specified.
        myChart.setOption(option);
        
        myChart = echarts.init(document.getElementById('volumechart'));
    
        // Specify the configuration items and data for the chart
        option = {
          title: {
            text: 'Volume over time'
          },
          tooltip: {
              trigger: 'axis',
            },
            dataset: {
              source: data,
              dimensions: ['timestamp', "edits", "avg_edits", "running_edits", 'vol', 'avg_vol', "running_vol"],
            },
            xAxis: { type: 'time' },
            yAxis: {name: 'Volume (characters)', nameLocation: 'center', nameGap: 60},
            series: [
                // {
                //     name: 'Raw edit volume',
                //     yAxisIndex: 1,
                //     type: 'line',
                //     encode: {
                //       x: 'timestamp',
                //       y: 'vol'
                //     }
                // },
                {
                    name: 'Average edit volume (characters)',
                    type: 'line',
                    encode: {
                      x: 'timestamp',
                      y: 'avg_vol'
                    }
                },
                {
                    name: 'Running edit volume (hundreds of characters)',
                    type: 'line',
                    encode: {
                      x: 'timestamp',
                      y: "running_vol"
                    }
                },
            ]
        };
    
        // Display the chart using the configuration items and data just specified.
        myChart.setOption(option);
      });
  </script>
{% endblock %}