Standardize the design for the data vis

[mahakanakala]

Right now, the static data visualizations are made through Seaborn 🌊

All of the plots have different sizes and fonts. The toxin level graphs have relatively the same format:

For toxicity graphs:

• [x] fonts: Redaction, Playfair Display
• [x] colors: white, black, red (text-shadow)
• [ ] style:

For other plots (Z-score, etc)

• [ ] fonts: Redaction, Playfair Display
• [ ] colors: white, black, red (text-shadow)
• [ ] style:

[mahakanakala]

Updated the toxicity graph design:

Coolors Palette:

[mahakanakala]

The design must match the website.

The current Design of the Graph is like this:

Font: Redaction 50, Playfair Display

[mahakanakala]

Current graph creation is too tedious and repetitive. Should find a way to loop through the process in 1 cell instead of 3. Using dictionaries & lists will help solve that:

This is what it looks like currently:

View in Blocks 10, 11, 12

sns.set(rc={'axes.facecolor':'#F2E9E4', 'figure.facecolor':'#F2E9E4'})
ax = sns.barplot(x= low_df['Occurances'], 
                y=low_df['Toxin'], 
                data=low_df,
                color='#D5BDAF',
                )

ax.set_title('Low-hazard Toxins', fontdict=title_font, pad=40)

tick_spacing = 10
ax.xaxis.set_major_locator(ticker.MultipleLocator(tick_spacing))

sns.set(rc={'figure.figsize':(20,8)})              
ax.set_xlabel("Ocurrances in Products", fontdict=title_font, labelpad=40)
# ax.set_xticklabels(ax.get_xticklabels(), size =20)

ax.set_ylabel("Chemicals", fontdict= title_font, labelpad=40)
ax.set_yticklabels(ax.get_yticklabels(), size=25, fontdict=opt_font)
#plt.text(50, 1, 'allergens, harmful to the environment, cause irritation', fontdict = opt_font)

ax.bar_label(ax.containers[0], size = 35, padding= 5) # shows the number of exact occurances on each bar

sns.set(rc={'axes.facecolor':'#F2E9E4', 'figure.facecolor':'#F2E9E4'})

#styling the spines
for spine in ['bottom', 'left']:
    ax.spines[spine].set_color('0')
    ax.spines[spine].set_linewidth(2.5)

ax.grid(False)

for spine in ['top', 'right']:
    ax.spines[spine].set_visible(False)

ax.tick_params(axis='y', labelsize=30)
ax.tick_params(axis='x', labelsize=30, pad=30)

ax.grid(b=True, which='major', color='black', linewidth=0.2)

plt.savefig("../reports/figures/low_hazard_toxins.png", bbox_inches='tight')