alan-turing-institute / netts

Toolbox for creating networks capturing semantic content of speech transcripts.
https://alan-turing-institute.github.io/netts/
GNU General Public License v3.0
8 stars 1 forks source link

Logo for docs page? #78

Open OscartGiles opened 3 years ago

OscartGiles commented 3 years ago

Do we want a logo?

Iain-S commented 3 years ago

If we did, we could construct one from networkx with the help of pyvis.network:

from pyvis.network import Network
import networkx as nx
nx_graph = nx.MultiDiGraph()

# https://www.color-hex.com/color-palette/115864
nx_graph.add_node(1, size=30, color='#ffd966', borderWidth=3, label="Networks", shape="circle")
nx_graph.add_node(2, size=10, color='#ffd966', borderWidth=2, label=" ")
nx_graph.add_node(3, size=10, color='#ffd966', borderWidth=2, label=" ")
nx_graph.add_node(4, size=15, color='#ffd966', borderWidth=2, label=" ")
nx_graph.add_edge(1, 2, width=2)
nx_graph.add_edge(1, 3, width=2)
nx_graph.add_edge(1, 4, width=2)

nx_graph.add_node(5, size=25, color='#f6b26b', borderWidth=3, label=" ")
nx_graph.add_node(6, size=10, color='#f6b26b', borderWidth=2, label=" ")
nx_graph.add_node(7, size=15, color='#f6b26b', borderWidth=2, label=" ")
nx_graph.add_edge(5, 6, width=2)
nx_graph.add_edge(5, 7, width=2)

nx_graph.add_node(8, size=25, color='#c90076', borderWidth=3, label="Transcribed", shape="circle")
nx_graph.add_node(9, size=15, color='#c90076', borderWidth=2, label=" ")
nx_graph.add_edge(8, 9, width=2)

nx_graph.add_node(10, size=30, color='#76a5af', borderWidth=3, label="Speech", shape="circle")
nx_graph.add_node(11, size=15, color='#76a5af', borderWidth=2, label=" ")
nx_graph.add_node(12, size=10, color='#76a5af', borderWidth=2, label=" ")
nx_graph.add_node(13, size=15, color='#76a5af', borderWidth=2, label=" ")
nx_graph.add_node(14, size=10, color='#76a5af', borderWidth=2, label=" ")
nx_graph.add_edge(10, 11, width=2)
nx_graph.add_edge(10, 12, width=2)
nx_graph.add_edge(10, 13, width=2)
nx_graph.add_edge(10, 14, width=2)

nx_graph.add_edge(1, 5, width=3)
nx_graph.add_edge(5, 8, width=3, label="of", font="20px arial")
nx_graph.add_edge(10, 8, width=3)

nt = Network('500px', '500px', notebook=True)
nt.from_nx(nx_graph)
nt.toggle_physics(False)
nt.show('nx.html')

Can be manipulated into something that looks a bit like a capital N. With a bit more polish, we could make a favicon version too.

netts logo v1 netts logo v2
carobellum commented 3 years ago

Created a preliminary logo and added the logo as a favicon and logo in this folder: docs/docs/img/favicon_io/

This is the first draft of the logo: netts_logo_v1

Will make the edges thicker and a bit more visible.

Setting the logo as the website logo works, but overriding the favicon from the theme does not seem to work. This seems to be a known issue for MkDocs and it's unclear to me whether the patch has been released yet or how to patch this: https://github.com/mkdocs/mkdocs/pull/1672

carobellum commented 3 years ago

Updated version apple-touch-icon

Iain-S commented 3 years ago

I like this version with the thicker edges. It makes the N stand out much better.

OscartGiles commented 3 years ago

@carobellum - Happy for me to copy this last into the docs?

carobellum commented 3 years ago

@OscartGiles This should already be in the docs, on the update-docs-2 branch!

OscartGiles commented 3 years ago

Ah yes! Awesome