diff --git a/src/App.svelte b/src/App.svelte
index 6bf5ae9..6a2a8d7 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -22,8 +22,8 @@
   {#if width < 600}
     <Catch content={"width < 600"} />
   {:else}
-    <SidePanel />
     {#await loadData() then data}
+      <SidePanel {data} />
       <Visualization {data} />
     {/await}
     <Tooltip />
diff --git a/src/SidePanel.svelte b/src/SidePanel.svelte
index 7ffb070..c517f90 100644
--- a/src/SidePanel.svelte
+++ b/src/SidePanel.svelte
@@ -1,6 +1,8 @@
 <script>
   import Legend from './components/Legend.svelte';
   import SelectJournal from './components/SelectJournal.svelte';
+
+  export let data = [];
 </script>
 
 <div class="side-panel">
@@ -15,7 +17,7 @@
   </p>
 
   <Legend />
-  <SelectJournal />
+  <SelectJournal {data} />
 </div>
 
 <style>
diff --git a/src/components/SelectJournal.svelte b/src/components/SelectJournal.svelte
index f3f0b66..af8e876 100644
--- a/src/components/SelectJournal.svelte
+++ b/src/components/SelectJournal.svelte
@@ -1,9 +1,28 @@
 <script>
+  import { descending, mean, groups } from 'd3-array';
+
   import Select from 'svelte-select';
-  import SelectItem from './components/SelectItem.svelte';
+  import SelectItem from './SelectItem.svelte';
+
+  import { selectedJournal } from '../stores/selections';
+
+  export let data = [];
+
+  const capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1);
+
+  const journals = groups(data, (d) => d.journal)
+    .map(([, values]) => {
+      const journal = values[0].journal;
+      const impactFactor = mean(values, (d) => d.citedBy);
+      return {
+        value: journal,
+        label: `${capitalize(journal)} (${Math.round(impactFactor)})`,
+        impactFactor
+      };
+    })
+    .sort((a, b) => descending(a.impactFactor, b.impactFactor));
 
-  import { journals } from './inputs/constants';
-  import { selectedJournal } from './stores/selections';
+  selectedJournal.set(journals[0].value);
 
   function handleSelect(event) {
     selectedJournal.set(event.detail.value);
diff --git a/src/inputs/constants.js b/src/inputs/constants.js
index 74928ce..e6bae49 100644
--- a/src/inputs/constants.js
+++ b/src/inputs/constants.js
@@ -2,8 +2,3 @@ export const dataPath = 'data/sources.csv';
 
 export const quantiles = [0, 0.9, 0.95, 0.99, 0.999];
 export const tickStep = 500;
-
-export const journals = [
-  {value: 'nature', label: 'Nature'},
-  {value: 'science', label: 'Science'},
-];
diff --git a/src/stores/selections.js b/src/stores/selections.js
index 28425f9..d1e37a9 100644
--- a/src/stores/selections.js
+++ b/src/stores/selections.js
@@ -1,8 +1,6 @@
 import { writable } from 'svelte/store';
 
-import { journals } from '../inputs/constants';
-
-export const selectedJournal = writable(journals[0].value);
+export const selectedJournal = writable();
 export const selectedStar = writable();
 
 export const activeQuantile = writable(1);