Add matplotlib theme for creating graphs for newsposts and wiki articles

meta/osu-matplotlib-theme/README.md

@@ -0,0 +1,113 @@
+<!-- This Markdown file was autogenerated from README.ipynb using the generate_readme.sh script. DO NOT MODIFY THIS FILE DIRECTLY. -->
+
+# `osu-matplotlib-theme`
+
+This directory contains theme files to be used with the Python plotting library [matplotlib](https://matplotlib.org/). The themes are adapted to visually match the style of published article pages on the [osu! website](https://osu.ppy.sh/home).
+
+The files here are mostly intended to be used by developers of star rating and performance points algorithms used in osu! who may wish to better convey technical changes in the aforementioned algorithms using graphs inlined into development articles.
+
+Additionally, a second theme is also provided, which matches the appearance of the osu! wiki, allowing creation of graphs for wiki articles with matplotlib.
+
+Theme files contained within are based on graphs previously embedded in articles describing changes to star rating/performance points algorithms:
+
+* [Performance Points Updates (Jan 2021)](https://osu.ppy.sh/home/news/2021-01-14-performance-points-updates)
+* [Performance Points & Star Rating Updates (Jul 2021)](https://osu.ppy.sh/home/news/2021-07-27-performance-points-star-rating-updates)
+* [Performance Points & Star Rating Updates (Nov 2021)](https://osu.ppy.sh/home/news/2021-11-09-performance-points-star-rating-updates)
+
+The repository contains the following main files:
+
+* `.mplstyle` files: matplotlib [style sheets](https://matplotlib.org/stable/tutorials/introductory/customizing.html) that apply most of boilerplate styling you may need. The following variants are included:
+    - `osu-news.mplstyle` is intended to be used for graphs on newsposts,
+    - `osu-wiki.mplstyle` is intended to be used for graphs on wiki articles.
+
+* `osu_cmap.py`: a python script declaring a matplotlib discrete [colour map](https://matplotlib.org/stable/tutorials/colors/colormaps.html) that you can use to colour data series with.
+
+Both files intend to match the osu! website design language.
+
+To use these themes, you will obviously need to install matplotlib. Data manipulation packages such as [numpy](https://numpy.org/) or [pandas](https://pandas.pydata.org/) may also come in handy:
+
+
+```python
+import matplotlib.pyplot as plt
+import numpy as np
+import pandas as pd
+```
+
+Additionally, the theme uses the [Inter](https://rsms.me/inter/) font for displaying textual content. Please make sure you have a system-wide installation of the font in question, or otherwise graphs may not look as intended.
+
+## Usage examples
+
+### Simple X-Y line plot
+
+
+```python
+# generate some fake data to plot
+xs = np.linspace(0, 4 * np.pi, 1000)
+ys = xs * np.sin(xs)
+zs = np.sqrt(xs) * np.cos(xs)
+
+# import and use the colormap
+from osu_cmap import OSU_CMAP
+plt.rcParams["axes.prop_cycle"] = plt.cycler("color", OSU_CMAP.colors)
+
+# use the theme
+# note that this is being used in a `with` block to provide temporary styling
+# (https://matplotlib.org/stable/tutorials/introductory/customizing.html#temporary-styling)
+with plt.style.context('./osu-news.mplstyle'):
+    plt.plot(xs, ys)
+    plt.plot(xs, zs)
+
+    plt.title('Example plot')
+    plt.xlabel('X axis')
+    plt.ylabel('Y axis')
+    plt.legend(['Series 1', 'Series 2'])
+
+    plt.show()
+```
+
+
+
+![png](README_files/README_6_0.png)
+
+
+
+### Bar plot with more complications
+
+
+```python
+# generate some fake data to plot
+xs = range(10)
+category_count = 7
+
+# import and use the colormap
+from osu_cmap import OSU_CMAP
+plt.rcParams["axes.prop_cycle"] = plt.cycler("color", OSU_CMAP.colors)
+
+# use the theme
+# note that this is being used in a `with` block to provide temporary styling
+# (https://matplotlib.org/stable/tutorials/introductory/customizing.html#temporary-styling)
+with plt.style.context('./osu-wiki.mplstyle'):
+    bottom = np.zeros(10)
+
+    # plot some fake data
+    for i in range(category_count):
+        ys = np.random.rand(len(xs))
+        plt.bar(xs, ys, bottom=bottom, zorder=i+2)
+        bottom += ys
+
+    plt.title('Example plot')
+    plt.xlabel('X axis')
+    plt.ylabel('Y axis')
+    # even though the style does most of the job, sometimes stuff needs to be jiggled to work
+    # (in this case we're putting the legend outside of the plot)
+    plt.legend([f'Series {i+1}' for i in range(category_count)],
+               bbox_to_anchor=(1.03, 1),
+               loc='upper left')
+
+    plt.show()
+```
+
+
+
+![png](README_files/README_8_0.png)
+

meta/osu-matplotlib-theme/generate_readme.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+# This script generates a Markdown file from the README.ipynb Jupyter notebook.
+# Normally, the hope is that the Jupyter notebook would be enough, since GitHub can render it,
+# but as it turns out, it doesn't render if it's used as a README in a directory,
+# but will render if _and only if_ the individual file is opened
+# (see: https://github.com/github/markup/issues/929)
+# Hence, we make do with what we have and we convert to markdown for readers' convenience.
+#
+# This script requires jupyter to be installed on your machine.
+
+set -e
+
+jupyter nbconvert --execute --to markdown README.ipynb
+printf '%s\n\n%s' "<!-- This Markdown file was autogenerated from README.ipynb using the generate_readme.sh script. DO NOT MODIFY THIS FILE DIRECTLY. -->" "$(cat README.md)" > README.md

meta/osu-matplotlib-theme/osu-news.mplstyle

@@ -0,0 +1,67 @@
+# osu! matplotlib theme
+# News variant
+
+#-------------------------------------------------------------------------------
+# Font
+#-------------------------------------------------------------------------------
+
+font.family: Inter
+font.size: 16
+
+#-------------------------------------------------------------------------------
+# Figure
+#-------------------------------------------------------------------------------
+
+figure.facecolor: 24222a
+figure.figsize: 10, 6
+
+figure.constrained_layout.use: True
+
+#-------------------------------------------------------------------------------
+# Axes
+#-------------------------------------------------------------------------------
+
+axes.facecolor: 24222a
+
+axes.titlecolor: white
+axes.titlesize: 24
+axes.titlepad: 20
+
+axes.labelcolor: white
+axes.labelpad: 10
+
+axes.edgecolor: white
+axes.spines.bottom: True
+axes.spines.left: True
+axes.spines.right: False
+axes.spines.top: False
+
+axes.grid: True
+
+#-------------------------------------------------------------------------------
+# X ticks
+#-------------------------------------------------------------------------------
+
+xtick.color: white
+xtick.labelcolor: white
+
+#-------------------------------------------------------------------------------
+# Y ticks
+#-------------------------------------------------------------------------------
+
+ytick.color: white
+ytick.labelcolor: white
+
+#-------------------------------------------------------------------------------
+# Grid
+#-------------------------------------------------------------------------------
+
+grid.color: 3d3946
+
+#-------------------------------------------------------------------------------
+# Legend
+#-------------------------------------------------------------------------------
+
+legend.facecolor: 3d3946
+legend.edgecolor: 3d3946
+legend.labelcolor: white

meta/osu-matplotlib-theme/osu-wiki.mplstyle

@@ -0,0 +1,67 @@
+# osu! matplotlib theme
+# Wiki variant
+
+#-------------------------------------------------------------------------------
+# Font
+#-------------------------------------------------------------------------------
+
+font.family: Inter
+font.size: 16
+
+#-------------------------------------------------------------------------------
+# Figure
+#-------------------------------------------------------------------------------
+
+figure.facecolor: 2a2822
+figure.figsize: 10, 6
+
+figure.constrained_layout.use: True
+
+#-------------------------------------------------------------------------------
+# Axes
+#-------------------------------------------------------------------------------
+
+axes.facecolor: 2a2822
+
+axes.titlecolor: white
+axes.titlesize: 24
+axes.titlepad: 20
+
+axes.labelcolor: white
+axes.labelpad: 10
+
+axes.edgecolor: white
+axes.spines.bottom: True
+axes.spines.left: True
+axes.spines.right: False
+axes.spines.top: False
+
+axes.grid: True
+
+#-------------------------------------------------------------------------------
+# X ticks
+#-------------------------------------------------------------------------------
+
+xtick.color: white
+xtick.labelcolor: white
+
+#-------------------------------------------------------------------------------
+# Y ticks
+#-------------------------------------------------------------------------------
+
+ytick.color: white
+ytick.labelcolor: white
+
+#-------------------------------------------------------------------------------
+# Grid
+#-------------------------------------------------------------------------------
+
+grid.color: 38362e
+
+#-------------------------------------------------------------------------------
+# Legend
+#-------------------------------------------------------------------------------
+
+legend.facecolor: 38362e
+legend.edgecolor: 38362e
+legend.labelcolor: white

meta/osu-matplotlib-theme/osu_cmap.py

@@ -0,0 +1,18 @@
+import matplotlib.pyplot as plt
+import numpy as np
+from matplotlib.colors import ListedColormap
+
+
+COLORS = \
+[
+    [255, 102, 171],
+    [140, 102, 255],
+    [102, 204, 255],
+    [102, 255, 115],
+    [178, 255, 102],
+    [255, 217, 102],
+    [255, 102, 102]
+]
+
+
+OSU_CMAP = ListedColormap(np.array(COLORS) / 255)