From 74741a25434045ba04e87a1049476e7a14c62ae6 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sat, 30 Mar 2019 14:05:18 +0100 Subject: pie chart sizing --- client/chart/constants.js | 31 ++++++ client/chart/countriesByYear.chart.js | 1 - client/chart/pie.charts.js | 177 +++++++++++++++------------------- 3 files changed, 111 insertions(+), 98 deletions(-) (limited to 'client/chart') 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 (
- + value, + } + }} + size={{ + height: 336, + }} + /> +
+
+ value, + } + }} + size={{ + height: 316, + }} + /> +
+ + ) + } +} + +/* 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('') } }} - /> - - ) - } -} +*/ export default PieCharts -- cgit v1.2.3-70-g09d2