diff options
Diffstat (limited to 'client/chart')
| -rw-r--r-- | client/chart/constants.js | 64 | ||||
| -rw-r--r-- | client/chart/countriesByYear.chart.js (renamed from client/chart/chart.container.js) | 39 | ||||
| -rw-r--r-- | client/chart/index.js | 6 | ||||
| -rw-r--r-- | client/chart/pie.charts.js | 151 |
4 files changed, 222 insertions, 38 deletions
diff --git a/client/chart/constants.js b/client/chart/constants.js new file mode 100644 index 00000000..70375ba3 --- /dev/null +++ b/client/chart/constants.js @@ -0,0 +1,64 @@ +/* various nice HSL gradients */ + +export const rainbow = [ + '#9e0142', + '#d53e4f', + '#f46d43', + '#fdae61', + '#fee08b', + '#ffffbf', + '#e6f598', + '#abdda4', + '#66c2a5', + '#3288bd', + '#5e4fa2', + // '#888888', +] + +export const colorblindSafeRainbow = [ + '#a50026', + '#d73027', + '#f46d43', + '#fdae61', + '#fee090', + '#ffffbf', + '#e0f3f8', + '#abd9e9', + '#74add1', + '#4575b4', + '#313695', + // '#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/chart.container.js b/client/chart/countriesByYear.chart.js index aa80100e..4257748c 100644 --- a/client/chart/chart.container.js +++ b/client/chart/countriesByYear.chart.js @@ -6,41 +6,9 @@ import C3Chart from 'react-c3js' import 'c3/c3.css' import './chart.css' -const rainbow = [ - '#9e0142', - '#d53e4f', - '#f46d43', - '#fdae61', - '#fee08b', - '#ffffbf', - '#e6f598', - '#abdda4', - '#66c2a5', - '#3288bd', - '#5e4fa2', - // '#888888', -] +import { rainbow, colorblindSafeRainbow, topCountryCount, otherCountriesLabel } from './constants' -const colorblindSafeRainbow = [ - '#a50026', - '#d73027', - '#f46d43', - '#fdae61', - '#fee090', - '#ffffbf', - '#e0f3f8', - '#abd9e9', - '#74add1', - '#4575b4', - '#313695', - // '#888888', -] - -const topCountryCount = 10 - -const otherCountriesLabel = 'Other Countries' - -class ChartContainer extends Component { +class CountriesByYearChart extends Component { render() { const { payload } = this.props const { paper, citations } = payload.data @@ -64,7 +32,6 @@ class ChartContainer extends Component { years[year][country] += 1 } else { years[year][country] = 1 - countries[country] = true } }) }) @@ -196,4 +163,4 @@ class ChartContainer extends Component { } } -export default ChartContainer +export default CountriesByYearChart diff --git a/client/chart/index.js b/client/chart/index.js index e9d3322d..27650020 100644 --- a/client/chart/index.js +++ b/client/chart/index.js @@ -1,5 +1,7 @@ -import Container from './chart.container' +import CountriesByYear from './countriesByYear.chart' +import PieCharts from './pie.charts' export { - Container, + CountriesByYear, + PieCharts, } diff --git a/client/chart/pie.charts.js b/client/chart/pie.charts.js new file mode 100644 index 00000000..af790be7 --- /dev/null +++ b/client/chart/pie.charts.js @@ -0,0 +1,151 @@ +import React, { Component } from 'react' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' +import { toArray, toTuples } from '../util' +import C3Chart from 'react-c3js' +import 'c3/c3.css' +import './chart.css' + +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 countries = {} + const institutionTypes = { ...initialInstitutionLookup } + citations.forEach(citation => { + citation.addresses.forEach(address => { + const { country } = address + if (!country) return + if (!(country in countries)) { + countries[country] = 1 + } else { + countries[country] += 1 + } + 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 + } + }) + }) + + const countryTuples = toTuples(countries).sort((a,b) => b[1] - a[1]) + let countryRows = countryTuples.slice(0, 9) + + const otherCountryCount = countryTuples.slice(9).reduce((a,b) => (a + b[1]), 0) + if (otherCountryCount > 0) { + countryRows.push([ + otherCountriesLabel, + otherCountryCount, + ]) + } + // console.log(countryTuples, otherCountryCount, countryRows) + + 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'> + <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' + }} + tooltip={{ + contents: function (d, defaultTitleFormat, defaultValueFormat, color) { + const countriesByYearLookup = years[yearList[d[0].x]] + let countriesByYear = Object.keys(countriesByYearLookup).map(country => [country, countriesByYearLookup[country]]).sort((a,b) => b[1] - a[1]) + let topCountriesForThisYear = countriesByYear.slice(0, topCountryCount) + let bottomTotal = countriesByYear.slice(topCountryCount).reduce((a,b) => (a + b[1]), 0) + // console.log(topCountriesForThisYear) + topCountriesForThisYear.push([otherCountriesLabel, bottomTotal]) + const tableRows = topCountriesForThisYear.filter(pair => !!pair[1]).map(([country, total]) => { + let colorIndex = topCountries.indexOf(country) + if (colorIndex < 0) colorIndex = colorPattern.length - 1 + const color = colorPattern[ colorIndex ] + return [ + "<tr>", + "<td>", + "<span style='background-color:" + color + "' class='swatch'></span>", + country, + "</td>", + "<td>", + total, + "</td>", + "</tr>", + ].join('') + }) + return [ + "<table class='c3-tooltip'>", + ...tableRows, + "</table>", + ].join('') + } + }} +*/ + +export default PieCharts |