Climate Vulnerability and CO2

import pandas as pd
import plotnine as gg

from ninejs import interactive, save, css, show


data_url = "https://raw.githubusercontent.com/holtzy/the-python-graph-gallery/master/static/data/data-CO2.csv"
data = pd.read_csv(data_url).rename(
    columns={
        " ": "vulnerability",
        " .1": "readiness",
        "Name": "country",
        "CO2 per Capita": "co2_per_capita",
        "Color": "color",
    }
)

data["tooltip"] = [
    f"""
    <div class="tooltip-card">
        <div class="tooltip-header">
            <span class="tooltip-country">{country}</span>
        </div>

        <div class="tooltip-grid">
            <div class="tooltip-label">Vulnerability</div>
            <div class="tooltip-value">{vulnerability:.2f}</div>

            <div class="tooltip-label">Readiness</div>
            <div class="tooltip-value">{readiness:.2f}</div>

            <div class="tooltip-label">CO₂ / capita</div>
            <div class="tooltip-value">{co2:.1f} t</div>
        </div>
    </div>
    """
    for country, vulnerability, readiness, co2 in zip(
        data["country"],
        data["vulnerability"],
        data["readiness"],
        data["co2_per_capita"],
    )
]

text_color = "#252525"

plot = (
    gg.ggplot(data, gg.aes(x="vulnerability", y="readiness", tooltip="tooltip"))
    + gg.geom_point(
        gg.aes(size="co2_per_capita", color="color"),
        shape="s",
        alpha=0.4,
        show_legend=False,
    )
    + gg.scale_color_identity()
    + gg.scale_size_area(max_size=17)
    + gg.scale_x_continuous(limits=(0.22, 0.70), expand=(0, 0))
    + gg.scale_y_continuous(limits=(0.04, 1.02), expand=(0, 0))
    + gg.coord_cartesian(expand=False)
    + gg.theme_void(base_size=8)
    + gg.theme(figure_size=(6, 6), plot_margin=0.03)
)

fig = plot.draw()
ax = fig.axes[0]

ax.vlines(0.43,0.12,0.84,color="#a8a8a8",linestyle="--",linewidth=1.0,alpha=0.65,zorder=1)
ax.hlines(0.41,0.24,0.68,color="#a8a8a8",linestyle="--",linewidth=1.0,alpha=0.65,zorder=1)

ax.text(
    0.245,
    0.98,
    "The countries with the highest vulnerability to climate change\nhave the lowest CO2 emissions",
    fontsize=10,
    fontweight="bold",
    ha="left",
    va="top",
    color=text_color,
)
ax.text(
    0.245,
    0.91,
    "All countries sorted by their vulnerability and readiness to climate change. The size\nshows the CO2 emission per person in that country.",
    fontsize=8,
    ha="left",
    va="top",
    color=text_color,
)
ax.text(
    0.245,
    0.065,
    (
        "Data: Notre Dame Global Adaptation Initiative and Global Carbon Project "
        "| Original: Datawrapper"
    ),
    fontsize=7.3,
    ha="left",
    va="bottom",
    color=text_color,
)

fig.text(0.11, 0.45, "High readiness", color="silver", size=6)
fig.text(0.11, 0.31, "Low readiness", color="silver", size=6)

fig.text(0.41, 0.13, "Low vulnerability", color="silver", size=6, ha="right")
fig.text(0.47, 0.13, "High vulnerability", color="silver", size=6, ha="left")

arrowprops = dict(arrowstyle="->", color="silver", lw=0.4)

ax.annotate("", xy=(0.25, 0.32), xytext=(0.25, 0.37), arrowprops=arrowprops)
ax.annotate("", xy=(0.25, 0.5), xytext=(0.25, 0.45), arrowprops=arrowprops)

ax.annotate("", xy=(0.38, 0.12), xytext=(0.41, 0.12), arrowprops=arrowprops)
ax.annotate("", xy=(0.48, 0.12), xytext=(0.45, 0.12), arrowprops=arrowprops)

(
    interactive(plot, hover_nearest=True)
    + css(from_file="docs/examples/climate-vulnerability-co2.css")
    + save("docs/iframes/climate-vulnerability-co2.html")
)