https://pournaki.com/soe/

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
2<link rel="stylesheet" href="style.css">
3<title>DPG SOE Network</title>

4<script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/2.4.0/sigma.min.js" integrity="sha512-iiPEYww3QXZU5C795JnnINBRNgHqDnRHs9mA7aJoqx4pNE4u3CknCDGmePHFoHtKR/6C9aIcRFa+HJ6obtlteQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

4
5<link rel="icon" type="image/png" href="./img/favicon.png">

6<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

6

7<script src="src/graphology.min.js"></script>

7

8<script src="src/graphology-library.min.js"></script>

8
9<meta name="description" content="Semantic similarity network of the proceedings of the sociophysics track of the German Physical Society (DPG).">
10<!-- twitter stuff -->
11    <meta name="twitter:card" content="summary_large_image">
12    <meta name="twitter:site" content="@apournaki">
13    <meta name="twitter:creator" content="@apournaki">
14    <meta name="twitter:title" content="DPG SOE Network">
15    <meta name="twitter:description" content="Semantic similarity network of the proceedings of the sociophysics track of the German Physical Society (DPG).">
16    <meta name="twitter:image" content="https://pournaki.com/soe/img/social.png">       
17<meta property="og:image" content="https://pournaki.com/soe/img/socialsquare.png"/>     
18<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yaireo/[email protected]/dist/tagify.css" />

19<script src="https://cdn.jsdelivr.net/npm/@yaireo/[email protected]/dist/tagify.min.js"></script>

19

20<script async defer data-domain="pournaki.com" src="https://plausible.io/js/plausible.js"></script>

20
21<body>
22
23<div id="totalborder">
24
25<!-- <div class="main__item3" id="netbutton"> -->
26<!-- <svg onclick="togglenetwork()" height='100px' width='100px'  fill="#000000" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" x="0px" y="0px" viewBox="0 0 100 100"><g transform="translate(0,-952.36218)"><path style="text-indent:0;text-transform:none;direction:ltr;block-progression:tb;baseline-shift:baseline;color:#000000;enable-background:accumulate;" d="m 50,961.36217 c -8.8129,0 -16,7.1872 -16,16 0,4.7053 2.0613,8.943 5.3125,11.875 L 27.875,1012.1434 c -1.54,-0.4955 -3.1739,-0.7812 -4.875,-0.7812 -8.8129,0 -16,7.1873 -16,16 0,8.8128 7.1871,16 16,16 8.1402,0 14.8603,-6.119 15.8438,-14 l 22.3124,0 c 0.9835,7.881 7.7036,14 15.8438,14 8.8129,0 16,-7.1872 16,-16 0,-8.8127 -7.1871,-16 -16,-16 -1.7011,0 -3.335,0.2857 -4.875,0.7812 L 60.6875,989.23717 c 3.2512,-2.932 5.3125,-7.1697 5.3125,-11.875 0,-8.8128 -7.1871,-16 -16,-16 z m -7.375,30.1875 c 2.2082,1.1531 4.7193,1.8125 7.375,1.8125 2.6557,0 5.1668,-0.6594 7.375,-1.8125 l 11.1562,22.28133 c -3.9737,2.4958 -6.761,6.6712 -7.375,11.5312 l -22.3124,0 c -0.614,-4.86 -3.4013,-9.0354 -7.375,-11.5312 L 42.625,991.54967 z" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"></path></g></svg>     -->
27<!-- </div> -->
28
29<div id="topbuttons">
30<div class="switchbutton" id="switchbutton">
31    <a href="javascript:void(0)" onclick="togglenetwork()">Switch to author network</a>    
32</div>
33<div class="switchbutton" id="methodsbutton">
34<a href="javascript:void(0)" onclick="togglemethods()">Show methods</a>
35</div>
36</div>
37
38<div class="borders" id="titleborder">
39<div id="title">DPG SOE NETWORK</div>
40</div>
41
42<div class="borders" id="borderscontent">
43<!-- <div class= "subtitle" id="panel00">FIND ARTICLES</div> -->
44<div class = "content" id="content00">
45    
46<div id="taggo" style="margin-top:10px">
47<div class="description"> Search by keyword(s) in abstract</div>
48<input id="whatyousearch" type="text" name="input-custom-dropdown" class="tagclass" value="">
49</div>
50<div id="taggo_authors" style="margin-top:10px">
51<div class="description"> Search by author(s)</div>
52<input id="whatyousearch_author" type="text" name="input-custom-dropdown_author" class="tagclass" value="">
53</div>
54<div>
55    <div class="description" style="margin-top:10px" id="time_scale">Filter edges by year</div>
56    <div class="slidecontainer">
57        <input type="range" min="0" max="25" value="0" id="time_slider">
58    </div>
59    <div id=selectordiv>
60        <label for="windowsize">Window size:</label>
61            <select name="windowsize" id="windowsize">
62                <option value=0>0</option>
63                <option value=1>1</option>
64                <option value=2>2</option>
65                <option value=3>3</option>
66                <option value=4>4</option>
67                <option value=5>5</option>
68            </select>
69    </div>
70    <div id="current_time_filter" style="font-size:9pt"></div>                      
71</div>
72
73<div id="div_authorsize">
74    <div id="mainselection" class="element">
75    <div class="description">Node size</div>
76    <select id = "nodesize">
77        <option value = "degree" style="font-weight: bold">Degree</option>                
78        <option value = "betweenness_centrality" style="font-weight: bold">Betweenness centrality</option>
79        <option value = "pagerank" style="font-weight: bold">Pagerank</option>
80    </select>
81    </div>
82</div>
83
84<div id="thalegend" class="borders_small">
85    <div class= "subsubtitle" id="panel06">FILTER NODES BY TOPIC</div>
86    <div class = "content" id="content06">
87    <ul style="list-style-type: none;" id="legendtext">
88<li style="color: #006400" class="legend-element"><a class="fieldlinks" id="Econophysics" href="javascript:void(0)" onclick="highfield(0)">Econophysics</a></li>
89<li style="color: #00008b" class="legend-element"><a class="fieldlinks" id="Complex Networks" href="javascript:void(0)" onclick="highfield(1)">Complex Networks</a></li>
90<li style="color: #b03060" class="legend-element"><a class="fieldlinks" id="Opinion Dynamics" href="javascript:void(0)" onclick="highfield(2)">Opinion Dynamics</a></li>
91<li style="color: #ff0000" class="legend-element"><a class="fieldlinks" id="Traffic Flow" href="javascript:void(0)" onclick="highfield(3)">Traffic Flow</a></li>
92<li style="color: #ffd700" class="legend-element"><a class="fieldlinks" id="Game Theory" href="javascript:void(0)" onclick="highfield(4)">Game Theory</a></li>
93<li style="color: #00ff00" class="legend-element"><a class="fieldlinks" id="Power Grids" href="javascript:void(0)" onclick="highfield(5)">Power Grids</a></li>
94<li style="color: #00ffff" class="legend-element"><a class="fieldlinks" id="Synchronization" href="javascript:void(0)" onclick="highfield(6)">Synchronization</a></li>
95<li style="color: #ff69b4" class="legend-element"><a class="fieldlinks" id="Urban Systems" href="javascript:void(0)" onclick="highfield(7)">Urban Systems</a></li>
96<li style="color: #6495ed" class="legend-element"><a class="fieldlinks" id="Scientometrics" href="javascript:void(0)" onclick="highfield(8)">Scientometrics</a></li>
97<li style="color: #f4a460" class="legend-element"><a class="fieldlinks" id="Epidemiology" href="javascript:void(0)" onclick="highfield(9)">Epidemiology</a></li>
98    </ul>
99</div>
100</div>
101
102<div id="article_description" class="borders_small">
103    <div class= "subsubtitle" id="panel08">ABSTRACT</div>
104    <div class = "content" id="content08">
105    <div id="abstract_metadata">
106        Click on a node to see the abstract.
107    </div>
108    </div>
109</div>
110
111<div id="author_description" class="borders_small">
112    <div class= "subsubtitle" id="panel09">AUTHOR</div>
113    <div class = "content" id="content09">
114    <div id="author_metadata">
115        Click on a node to see the author's submissions.
116    </div>
117    </div>
118</div>
119</div>
120<div class = "content" id="methodscontent">
121    <p style="margin-top:5px">METHODS</p>
122    <div class="methodstext">
123    <h6>Data</h6>
124    <p>
125    All submitted abstracts from 2002 to 2023 were scraped from <a href="https://skm23.dpg-tagungen.de/programm/verhandlungen">the DPG SKM website</a>.
126    </p>
127    <h6>Abstract network</h6>
128    <p>
129    Every node is an abstract and a link is drawn between two abstracts if they are semantically similar. To achieve this, the abstracts were pre-processed (stop-word removal, lemmatization) and transformed to <a href="https://en.wikipedia.org/wiki/Tf%E2%80%93idf">tf-idf</a> vectors. Then, the pairwise cosine similarity between all vectors was computed, which yields an adjacency matrix of a weighted, undirected graph. To sparsen this graph, we remove all edges below a threshold such that no node is isolated. We then find clusters of densely connected nodes using <a href="https://en.wikipedia.org/wiki/Modularity_(networks)">modularity optimization</a>

129. These clusters roughly correspond to the topic clusters in the corpus, which we then hand-label based on their highest scoring words with respect to the mean tf-idf score of the cluster.</p>
130    <h6>Author network</h6>
131    <p>Every node is an author, a link is drawn between two authors for every abstract they submitted together.</p>
132    </div>
133</div>
134</div>
135
136
137<!-- <div class="borders">
138    <div class= "subtitle" id="panel04">METHODS</div>
139        <div class = "content" id="content04">
140            Here I write some stuff now.
141        </div>
142    
143</div> -->
144
145<!-- <div class="borders">
146<div class= "subtitle" id="panel04">METHODS</div>
147<div class = "content" id="content04">
148    <p style="font-size: 10pt; margin-top: 0">
149    Every node in the network is a preprint, and a link is drawn between preprints based on the semantic similarity of their abstracts. 
150    </p>    
151    <h6>Data acquisition</h6>
152    <p style="font-size: 10pt;margin-top:0">
153        The underlying dataset is based on a <a class="nlink" target="_blank" href="https://connect.medrxiv.org/relate/content/181">curated list of COVID-19 related preprints</a> from <a class="nlink" target="_blank" href="https://www.medrxiv.org/">medRxiv</a> and <a class="nlink" target="_blank" href="https://www.biorxiv.org/">bioRxiv</a>.
154    </p>
155    <h6>Text preprocessing</h5>
156    <p style="font-size: 10pt;margin-top:0">
157        Before creating the network based on abstract similarity, the text is preprocessed using <a class="nlink" target="_blank" href="https://spacy.io/">spaCy</a>. English stopwords and punctuation are removed, as well as often occurring trivial words like "covid". Then, the abstracts are <a class="nlink" target="_blank" href="https://en.wikipedia.org/wiki/Lemmatisation">lemmatized</a>. Lemmas that are neither (proper) nouns, adjectives nor verbs are removed from the analysis.
158    </p>
159    <h6>Network creation</h5>
160    <p style="font-size: 10pt;margin-top:0">
161        Every node is an article. Links are drawn between nodes according to the following rule: </p>
162        <p style="font-size: 10pt; margin-bottom: 8px;padding-left: 10px">
163            Let 𝑀<sub>𝑖,𝑗</sub> be be the number of common lemmata between nodes 𝑖 and 𝑗. <br>
164            A link is created between 𝑖 and 𝑗 if 𝑀<sub>𝑖,𝑗</sub> > 𝑡<sub>𝑙</sub>.
165        </p>
166
167    <p style="font-size: 10pt;margin-top:0">
168        𝑡<sub>𝑙</sub> is defined as 16 exploratively. <br>
169        The network is layed out using a force-directed algorithm (nodes that share links are closer to each other) with the <a class="nlink" target="_blank" href="https://github.com/vasturiano/force-graph">force-graph</a> library.
170    </p>
171</div>
172</div>
173<div class= "subtitle" id="panel05">ABOUT</div>
174<div class = "content" id="content05">
175    <p style="font-size: 10pt;margin-top:0">
176        This project is made by members of the <a class="nlink" target="_blank" href="https://odycceus.eu">Odycceus project</a> at the Max Planck Institute for Mathematics in the Sciences, Leipzig with the help of <a class="nlink" target="_blank" href="https://www.researchgate.net/profile/Alexander_Dejaco">Alexander Dejaco</a>. <br><br>
177        
178        Please contact the developer <a class="nlink" target="_blank" href="https://pournaki.com">Armin Pournaki</a> if you have ideas for improvements and/or found bugs:
179        pournaki[at]mis.mpg.de
180    </p>
181</div>
182</div> -->
183<div id="footer">
184    <div style="color: var(--color_text); font-size: 8pt; margin-top: 15px; margin-bottom:5px" id="updatetime"></div> 
185    Made by <a href="https://pournaki.com">A.Pournaki</a> with <a href="https://www.sigmajs.org/">sigmaJS</a></div></div>
186
187</div>
188
189<div id='sigma-container-abstracts'></div>
190<div id='sigma-container-authors'></div>
191

192<script type="text/javascript">
193    var current_displayed_graph = "graph_abstracts"
194    var current_displayed_sidebar = "nav"
195    document.getElementById("sigma-container-authors").style.display = "none";
196
197    function togglenetwork(){
198        if (current_displayed_graph == "graph_abstracts")
199            {   document.getElementById("sigma-container-abstracts").style.display = "none";
200                document.getElementById("sigma-container-authors").style.display = "block";
201                document.getElementById("article_description").style.display = "none";
202                document.getElementById("taggo").style.display = "none";
203                document.getElementById("thalegend").style.display = "none";
204                document.getElementById("div_authorsize").style.display = "block";
205                document.getElementById("author_description").style.display = "block";
206                document.getElementById("switchbutton").innerHTML='<a href="javascript:void(0)" onclick="togglenetwork()">Switch to abstract network</a>'
207                current_displayed_graph = "graph_authors"
208                renderer_authors.refresh()
209            }
210        else
211        {
212                document.getElementById("sigma-container-abstracts").style.display = "block";
213                document.getElementById("sigma-container-authors").style.display = "none";
214                document.getElementById("article_description").style.display = "block";    
215                document.getElementById("author_description").style.display = "none";                
216                document.getElementById("taggo").style.display = "block"; 
217                document.getElementById("thalegend").style.display = "block";           
218                document.getElementById("div_authorsize").style.display = "none";      
219                document.getElementById("switchbutton").innerHTML='<a href="javascript:void(0)" onclick="togglenetwork()">Switch to author network</a>'                         
220                current_displayed_graph = "graph_abstracts"            
221                renderer.refresh()
222        }
223    }
224
225    function togglemethods(){
226        if (current_displayed_sidebar == "nav")
227            {
228                document.getElementById("content00").style.display = "none";
229                document.getElementById("methodscontent").style.display = "block";
230                current_displayed_sidebar = "methods"
231                document.getElementById("methodsbutton").innerHTML='<a href="javascript:void(0)" onclick="togglemethods()">Hide methods</a>'
232            }
233        else{
234                document.getElementById("content00").style.display = "block";
235                document.getElementById("methodscontent").style.display = "none";
236                current_displayed_sidebar = "nav"
237                document.getElementById("methodsbutton").innerHTML='<a href="javascript:void(0)" onclick="togglemethods()">Show methods</a>'                
238        }
239
240    }
241
242
243</script>

243
244

245<script src="src/constants.js"></script>

245

246<script src="src/graph.js"></script>

246

247<script src="src/graph_authors.js"></script>

247

248<script src="src/searcher.js"></script>

248

249<script src="src/timefilter.js"></script>

249

250<script src="src/highfields.js"></script>

250

251<script src="src/nodesizer.js"></script>

251
252</body>
253