app.py

import pandas as pd
import altair as alt
import panel as pn

df_density = pd.read_csv('bomb_risk_density.csv', dtype={'prefix': str})
alt.data_transformers.disable_max_rows()

# Enable Panel extensions
pn.extension(design='bootstrap')
pn.extension('vega')
template = pn.template.BootstrapTemplate(
    title='Nan-Hsin Lin | SI649 Scientific Viz Project',
)

# Define a function to create and return a plot
def create_plot(bomb_1, bomb_2):

    bomb_1 = int(not bomb_1)
    bomb_2 = int(not bomb_2)

    selection = alt.selection_single(encodings=['color'], empty='none', value=3)
    opacityCondition = alt.condition(selection, alt.value(1), alt.value(0.3))
    range_ = ['#009FB7', '#FED766', '#FE4A49']

    plot = alt.Chart(df_density).transform_filter(
        (alt.datum.prefix == '-1') | (alt.datum.prefix == str(bomb_1)) | (alt.datum.prefix == str(bomb_1) + str(bomb_2))
    ).mark_bar(opacity=0.5).encode(
        x=alt.X('Boxes:Q', 
                bin=alt.Bin(maxbins=10), 
                title='Number of boxes opened',
                axis=alt.Axis(ticks=False,
                            labelFontSize=11,
                            labelColor='#AAA7AD',
                            titleFontSize=12, 
                            titleColor='#AAA7AD',
                            domain=False)),
        y=alt.Y('Density:Q', 
                stack=None, 
                scale=alt.Scale(domain=[0, 1]), 
                axis=alt.Axis(format='.0%', 
                            ticks=False, 
                            tickCount=5,
                            labelFontSize=11,
                            labelColor='#AAA7AD',
                            titleFontSize=12, 
                            titleColor='#AAA7AD',
                            domain=False,
                            grid=False)),
        color=alt.Color('Round:N', 
                        scale=alt.Scale(domain=[1, 2, 3], range=range_)),
        row=alt.Row('Subject:N', 
                    header=alt.Header(title=None, orient='top', labelFontSize=16),
                    sort='descending'),
        tooltip=['Subject:N', 'Round:N', 'Boxes:Q', alt.Tooltip('Density:Q', format='.0%')]
    ).properties(width=400, height=150
    ).configure_view(strokeWidth=3, stroke='lightgrey'
    ).configure_legend(
        titleFontSize=12, 
        titleColor='#AAA7AD',
        titleAnchor='middle',
        titlePadding=8,
        labelFontSize=12,
        labelColor='#AAA7AD',
        labelFontWeight='bold',
        symbolOffset=20,
        orient='none',
        direction='horizontal',
        legendX=120,
        legendY=-90,
        symbolSize=200
    ).add_selection(selection).encode(
        opacity=opacityCondition
    )

    return plot

# Create widgets
switch_1 = pn.widgets.Switch(name='Bomb in Round 1', value=True)
switch_2 = pn.widgets.Switch(name='Bomb in Round 2', value=True)

plot_widgets = pn.bind(create_plot, switch_1, switch_2)

# Combine everything in a Panel Column to create an app
maincol = pn.Column()
maincol.append(pn.Row(pn.layout.HSpacer(),
                      "### A Turing test of whether AI chatbots are behaviorally similar to humans", 
                      pn.layout.HSpacer()))
maincol.append(pn.Row(pn.Spacer(width=100)))
maincol.append(pn.Row(pn.layout.HSpacer(),
                      "#### Bomb Risk Game: Human vs. ChatGPT-4 vs. ChatGPT-3", 
                      pn.layout.HSpacer()))
maincol.append(pn.Row(pn.layout.HSpacer(), 
                      "Bomb in Round 1", switch_1,
                      pn.Spacer(width=50),
                      "Bomb in Round 2", switch_2, 
                      pn.layout.HSpacer()))
maincol.append(pn.Row(pn.layout.HSpacer(), 
                      plot_widgets,
                      pn.layout.HSpacer()))
maincol.append(pn.Row(pn.layout.HSpacer(),
                      "**Fig 5.** ChatGPT-4 and ChatGPT-3 act as if they have particular risk preferences. Both have the same mode as human distribution in the first round or when experiencing favorable outcomes in the Bomb Risk Game. When experiencing negative outcomes, ChatGPT-4 remains consistent and risk-neutral, while ChatGPT-3 acts as if it becomes more risk-averse.",
                      pn.layout.HSpacer()))
template.main.append(maincol)

# set the app to be servable
template.servable(title="SI649 Scientific Viz Project")