pie chart sizing

15 files changed, 141 insertions, 108 deletions

diff --git a/client/chart/constants.js b/client/chart/constants.js
index 295b9232..70375ba3 100644
--- a/client/chart/constants.js
+++ b/client/chart/constants.js
@@ -1,3 +1,5 @@
+/* various nice HSL gradients */
+
 export const rainbow = [
   '#9e0142',
   '#d53e4f',
@@ -28,6 +30,35 @@ export const colorblindSafeRainbow = [
   // '#888888',
 ]
 
+export const institutionColors = [
+  '#f2f293', // edu (yellow)
+  '#3264f6', // company (blue)
+  '#f30000', // gov/mil (red)
+]
+
+/* stuff for a 'countries' legend */
+
 export const topCountryCount = 10
 
 export const otherCountriesLabel = 'Other Countries'
+
+/* institution tuples, labels and templates */
+
+export const initialInstitutionLookup = {
+  'edu': 0,
+  'company': 0,
+  'gov': 0,
+}
+
+export const institutionOrder = {
+  'edu': 0,
+  'company': 1,
+  'gov': 2,
+}
+
+export const institutionLabels = {
+  'edu': 'Academic',
+  'company': 'Commercial',
+  'gov': 'Government / Military',
+  'mil': 'Government / Military',
+}
\ No newline at end of file
diff --git a/client/chart/countriesByYear.chart.js b/client/chart/countriesByYear.chart.js
index c846fd0f..4257748c 100644
--- a/client/chart/countriesByYear.chart.js
+++ b/client/chart/countriesByYear.chart.js
@@ -32,7 +32,6 @@ class CountriesByYearChart extends Component {
           years[year][country] += 1
         } else {
           years[year][country] = 1
-          countries[country] = true
         }
       })
     })
diff --git a/client/chart/pie.charts.js b/client/chart/pie.charts.js
index 998d6758..47f7756c 100644
--- a/client/chart/pie.charts.js
+++ b/client/chart/pie.charts.js
@@ -1,26 +1,27 @@
 import React, { Component } from 'react'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { toArray } from '../util'
+import { toArray, toTuples } from '../util'
 import C3Chart from 'react-c3js'
 import 'c3/c3.css'
 import './chart.css'
 
-import { rainbow, colorblindSafeRainbow, topCountryCount, otherCountriesLabel } from './constants'
+import {
+  rainbow, colorblindSafeRainbow,
+  topCountryCount, otherCountriesLabel,
+  institutionOrder, institutionLabels, institutionColors,
+  initialInstitutionLookup,
+} from './constants'
 
 class PieCharts extends Component {
   render() {
     const { payload } = this.props
     const { paper, citations } = payload.data
     if (!citations.length) return null
-    const years = {}
     const countries = {}
+    const institutionTypes = { ...initialInstitutionLookup }
     citations.forEach(citation => {
-      let { year, addresses } = citation
-      if (!year || !parseInt(year)) return
-      year = parseInt(year)
-      years[year] = years[year] || {}
-      addresses.forEach(address => {
+      citation.addresses.forEach(address => {
         const { country } = address
         if (!country) return
         if (!(country in countries)) {
@@ -28,105 +29,91 @@ class PieCharts extends Component {
         } else {
           countries[country] += 1
         }
-        if (country in years[year]) {
-          years[year][country] += 1
-        } else {
-          years[year][country] = 1
-          countries[country] = true
+        switch (address.type) {
+          case 'company':
+          case 'edu':
+          case 'gov':
+            institutionTypes[address.type] += 1
+            break
+          case 'mil':
+            institutionTypes['gov'] += 1
+            break
+          default:
+            console.log('weird institution type', address)
+            break
         }
       })
     })
-    let yearList = Object.keys(years).map(year => parseInt(year)).sort()
-    for (let i = yearList[0]; i < yearList[-1]; i++) {
-      if (!(i in years)) {
-        years[i] = {}
-      }
-    }
-    yearList = Object.keys(years).map(year => parseInt(year)).sort()
-
-    Object.keys(countries).forEach(country => {
-      yearList.forEach(year => {
-        if (!(country in years[year])) years[year][country] = 0
-      })
-    })
-
-    // figure out the top N countries in the dataset
-    const countriesByCount = Object.keys(countries).sort((a,b) => countries[b] - countries[a])
-    // console.log(countriesByCount)
-    let topCountries = countriesByCount.slice(0, topCountryCount)
-    let otherCountries = countriesByCount.slice(topCountryCount)
 
-    let citationCountsByYear =
-      [ ['x'].concat(yearList.map(year => String(year))) ]
-        .concat(
-        topCountries
-          .map(country =>
-            [country]
-            .concat(
-              yearList
-              .map(year => years[year][country])
-            )
-          )
-        )
+    const countryTuples = toTuples(countries).sort((a,b) => b[1] - a[1])
+    let countryRows = countryTuples.slice(0, 9)
 
-    citationCountsByYear.push(
-      [otherCountriesLabel].concat(
-        yearList.map(year => otherCountries.reduce((a,b) => (a + years[year][b]), 0))
-      )
-    )
-
-    let maxCitationsInAYear = 0
-    let currentSum = 0
-    // for each year...
-    for (let j = 1; j < citationCountsByYear[0].length; j++) {
-      // for each country
-      currentSum = 0
-      for (let i = 1; i < citationCountsByYear.length; i++) {
-        currentSum += citationCountsByYear[i][j]
-      }
-      maxCitationsInAYear = Math.max(currentSum, maxCitationsInAYear)
+    const otherCountryCount = countryTuples.slice(9).reduce((a,b) => (a + b[1]), 0)
+    if (otherCountryCount > 0) {
+      countryRows.push([
+        otherCountriesLabel,
+        otherCountryCount,
+      ])
     }
+    console.log(countryTuples, otherCountryCount, countryRows)
 
-    let ticks = []
-    for (let i = 0; i < maxCitationsInAYear; i += 50) {
-      ticks.push(i)
-    }
-    if (ticks[ticks.length - 1] < maxCitationsInAYear) {
-      ticks.push('')
-    }
+    const institutionRows = toTuples(institutionTypes)
+      .map(a => [institutionOrder[a[0]], a])
+      .sort((a,b) => a[0] - b[0])
+      .map(a => a[1])
+      .map(a => [institutionLabels[a[0]], a[1]])
 
     const colorPattern = rainbow
 
     return (
       <div className='chart'>
-        <C3Chart
-          data={{
-            x: 'x',
-            columns: citationCountsByYear,
-            type: 'bar',
-            groups: [ topCountries.concat(otherCountriesLabel) ],
-          }}
-          axis={{
-            x: {
-              type: 'category' // this needed to load string x value
-            },
-            y: {
-              show: false,
-            },
-            y2: {
-              tick: {
-                values: ticks,
-              },
-              default: [ 0, maxCitationsInAYear * 286 / 261 ],
-              show: true,
-            }
-          }}
+        <div>
+          <C3Chart
+            data={{
+              columns: countryRows,
+              type: 'pie',
+            }}
+            color={{
+              pattern: rainbow,
+            }}
+            tooltip={{
+              format: {
+                value: value => value,
+              }
+            }}
+            size={{
+              height: 336,
+            }}
+          />
+        </div>
+        <div>
+          <C3Chart
+            data={{
+              columns: institutionRows,
+              type: 'pie',
+            }}
+            color={{
+              pattern: institutionColors,
+            }}
+            tooltip={{
+              format: {
+                value: value => value,
+              }
+            }}
+            size={{
+              height: 316,
+            }}
+          />
+        </div>
+      </div>
+    )
+  }
+}
+
+/*
           legend={{
             position: 'right'
           }}
-          color={{
-            pattern: colorPattern
-          }}
           tooltip={{
             contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
               const countriesByYearLookup = years[yearList[d[0].x]]
@@ -158,10 +145,6 @@ class PieCharts extends Component {
               ].join('')
             }
           }}
-        />
-      </div>
-    )
-  }
-}
+*/
 
 export default PieCharts
diff --git a/client/util/index.js b/client/util/index.js
index 0792e24e..87d32ebb 100644
--- a/client/util/index.js
+++ b/client/util/index.js
@@ -9,6 +9,7 @@ export const isFirefox = typeof InstallTrigger !== 'undefined'
 
 export const toArray = a => Array.prototype.slice.apply(a)
 export const choice = a => a[Math.floor(Math.random() * a.length)]
+export const toTuples = o => Object.keys(o).map(key => [key, o[key]])
 
 const htmlClassList = document.body.parentNode.classList
 htmlClassList.add(isDesktop ? 'desktop' : 'mobile')
diff --git a/site/assets/css/applets.css b/site/assets/css/applets.css
index cbd9f825..02775641 100644
--- a/site/assets/css/applets.css
+++ b/site/assets/css/applets.css
@@ -206,3 +206,24 @@
 .analysisContainer .results div img {
   max-width: 100%;
 }
+
+/* chart */
+
+.piechart .chart {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: flex-start;
+}
+.piechart .chart > div {
+  width: 50%;
+}
+.piechart .chart .c3-chart-arc text {
+  fill: #fff;
+}
+.piechart .chart .c3-chart-arc.c3-target-Academic text {
+  fill: #333;
+}
+.piechart .c3 path, .piechart .c3 line {
+  stroke: rgba(64,64,64,0.3);
+}
\ No newline at end of file
diff --git a/site/content/pages/test/chart.md b/site/content/pages/test/chart.md
index e29410a7..34c7d30c 100644
--- a/site/content/pages/test/chart.md
+++ b/site/content/pages/test/chart.md
@@ -15,5 +15,5 @@ authors: Megapixels
 ### [&larr; Back to test index](/test/)
 
 ```
-chart lfw
+chart duke_mtmc
 ```
diff --git a/site/content/pages/test/citations.md b/site/content/pages/test/citations.md
index 48ab99b1..f5fc9df2 100644
--- a/site/content/pages/test/citations.md
+++ b/site/content/pages/test/citations.md
@@ -15,5 +15,5 @@ authors: Megapixels
 ### [&larr; Back to test index](/test/)
 
 ```
-citations lfw
+citations duke_mtmc
 ```
diff --git a/site/content/pages/test/map.md b/site/content/pages/test/map.md
index fc5e2847..3490d3df 100644
--- a/site/content/pages/test/map.md
+++ b/site/content/pages/test/map.md
@@ -15,5 +15,5 @@ authors: Megapixels
 ### [&larr; Back to test index](/test/)
 
 ```
-map lfw
+map duke_mtmc
 ```
diff --git a/site/content/pages/test/pie_chart.md b/site/content/pages/test/pie_chart.md
index f3d0250a..ba4a8c3d 100644
--- a/site/content/pages/test/pie_chart.md
+++ b/site/content/pages/test/pie_chart.md
@@ -15,5 +15,5 @@ authors: Megapixels
 ### [&larr; Back to test index](/test/)
 
 ```
-piechart lfw
+piechart duke_mtmc
 ```
diff --git a/site/public/index.html b/site/public/index.html
index 62f78978..11ff7279 100644
--- a/site/public/index.html
+++ b/site/public/index.html
@@ -19,7 +19,6 @@
     </a>
     <div class='links splash'>
       <a href="/datasets/" class='aboutLink'>DATASETS</a>
-      <a href="/research/" class='aboutLink'>RESEARCH</a>
       <a href="/about/" class='aboutLink'>ABOUT</a>
     </div>
   </header>
diff --git a/site/public/test/chart/index.html b/site/public/test/chart/index.html
index fd3d690e..93e12b3c 100644
--- a/site/public/test/chart/index.html
+++ b/site/public/test/chart/index.html
@@ -28,7 +28,7 @@
     
   <section><h1>Chart</h1>
 <h3><a href="/test/">&larr; Back to test index</a></h3>
-</section><section class='applet_container'><div class='applet' data-payload='{"command": "chart lfw"}'></div></section>
+</section><section class='applet_container'><div class='applet' data-payload='{"command": "chart duke_mtmc"}'></div></section>
 
   </div>
   <footer>
diff --git a/site/public/test/citations/index.html b/site/public/test/citations/index.html
index 3dafd81e..70b3fe55 100644
--- a/site/public/test/citations/index.html
+++ b/site/public/test/citations/index.html
@@ -28,7 +28,7 @@
     
   <section><h1>Citations</h1>
 <h3><a href="/test/">&larr; Back to test index</a></h3>
-</section><section class='applet_container'><div class='applet' data-payload='{"command": "citations lfw"}'></div></section>
+</section><section class='applet_container'><div class='applet' data-payload='{"command": "citations duke_mtmc"}'></div></section>
 
   </div>
   <footer>
diff --git a/site/public/test/map/index.html b/site/public/test/map/index.html
index fd5a186d..4f4e7093 100644
--- a/site/public/test/map/index.html
+++ b/site/public/test/map/index.html
@@ -28,7 +28,7 @@
     
   <section><h1>Map test</h1>
 <h3><a href="/test/">&larr; Back to test index</a></h3>
-</section><section class='applet_container'><div class='applet' data-payload='{"command": "map lfw"}'></div></section>
+</section><section class='applet_container'><div class='applet' data-payload='{"command": "map duke_mtmc"}'></div></section>
 
   </div>
   <footer>
diff --git a/site/public/test/pie_chart/index.html b/site/public/test/pie_chart/index.html
index 2ef15a9c..7dd159a3 100644
--- a/site/public/test/pie_chart/index.html
+++ b/site/public/test/pie_chart/index.html
@@ -28,7 +28,7 @@
     
   <section><h1>Pie Chart</h1>
 <h3><a href="/test/">&larr; Back to test index</a></h3>
-</section><section class='applet_container'><div class='applet' data-payload='{"command": "piechart lfw"}'></div></section>
+</section><section class='applet_container'><div class='applet' data-payload='{"command": "piechart duke_mtmc"}'></div></section>
 
   </div>
   <footer>
diff --git a/site/templates/home.html b/site/templates/home.html
index 62f78978..11ff7279 100644
--- a/site/templates/home.html
+++ b/site/templates/home.html
@@ -19,7 +19,6 @@
     </a>
     <div class='links splash'>
       <a href="/datasets/" class='aboutLink'>DATASETS</a>
-      <a href="/research/" class='aboutLink'>RESEARCH</a>
       <a href="/about/" class='aboutLink'>ABOUT</a>
     </div>
   </header>