diff options
Diffstat (limited to 'client/chart/pie.charts.js')
| -rw-r--r-- | client/chart/pie.charts.js | 177 |
1 files changed, 80 insertions, 97 deletions
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 |