diff options
| -rw-r--r-- | client/applet.js | 4 | ||||
| -rw-r--r-- | client/chart/index.js | 2 | ||||
| -rw-r--r-- | client/chart/pie.charts.js | 14 | ||||
| -rw-r--r-- | client/chart/singlePie.chart.js | 99 | ||||
| -rw-r--r-- | client/index.js | 2 | ||||
| -rw-r--r-- | client/table/file.table.js | 2 | ||||
| -rw-r--r-- | site/assets/css/applets.css | 5 | ||||
| -rw-r--r-- | site/content/pages/research/munich_security_conference/assets/country_counts.csv | 9 | ||||
| -rw-r--r-- | site/content/pages/research/munich_security_conference/index.md | 7 |
9 files changed, 131 insertions, 13 deletions
diff --git a/client/applet.js b/client/applet.js index ebc0e3fc..5cfa6e3e 100644 --- a/client/applet.js +++ b/client/applet.js @@ -5,7 +5,7 @@ import React, { Component } from 'react' // import { Container as NameSearchContainer } from './nameSearch' import { Container as DatasetListContainer } from './datasetList' import { CitationsTable, FileTable } from './table' -import { CountriesByYear, PieCharts } from './chart' +import { CountriesByYear, PieCharts, SinglePieChart } from './chart' export default class Applet extends Component { render() { @@ -23,6 +23,8 @@ export default class Applet extends Component { return <CountriesByYear {...this.props} /> case 'piechart': return <PieCharts {...this.props} /> + case 'single_pie_chart': + return <SinglePieChart {...this.props} /> case 'citations': return <CitationsTable {...this.props} /> case 'load_file': diff --git a/client/chart/index.js b/client/chart/index.js index 27650020..690b4975 100644 --- a/client/chart/index.js +++ b/client/chart/index.js @@ -1,7 +1,9 @@ import CountriesByYear from './countriesByYear.chart' import PieCharts from './pie.charts' +import SinglePieChart from './singlePie.chart' export { CountriesByYear, PieCharts, + SinglePieChart, } diff --git a/client/chart/pie.charts.js b/client/chart/pie.charts.js index 939e9262..a73c953e 100644 --- a/client/chart/pie.charts.js +++ b/client/chart/pie.charts.js @@ -1,8 +1,6 @@ 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 { toTuples } from '../util' import 'c3/c3.css' import './chart.css' @@ -38,7 +36,7 @@ class PieCharts extends Component { institutionTypes[address.type] += 1 break case 'mil': - institutionTypes['gov'] += 1 + institutionTypes.gov += 1 break default: console.log('weird institution type', address) @@ -47,10 +45,10 @@ class PieCharts extends Component { }) }) - const countryTuples = toTuples(countries).sort((a,b) => b[1] - a[1]) + const countryTuples = toTuples(countries).sort((a, b) => b[1] - a[1]) let countryRows = countryTuples.slice(0, 10) - const otherCountryCount = countryTuples.slice(10).reduce((a,b) => (a + b[1]), 0) + const otherCountryCount = countryTuples.slice(10).reduce((a, b) => (a + b[1]), 0) if (otherCountryCount > 0) { countryRows.push([ otherCountriesLabel, @@ -61,12 +59,10 @@ class PieCharts extends Component { const institutionRows = toTuples(institutionTypes) .map(a => [institutionOrder[a[0]], a]) - .sort((a,b) => a[0] - b[0]) + .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> diff --git a/client/chart/singlePie.chart.js b/client/chart/singlePie.chart.js new file mode 100644 index 00000000..fcff3214 --- /dev/null +++ b/client/chart/singlePie.chart.js @@ -0,0 +1,99 @@ +import React, { Component } from 'react' +import csv from 'parse-csv' +import C3Chart from 'react-c3js' + +import { toTuples } from '../util' + +import 'c3/c3.css' +import './chart.css' + +import { + rainbow, otherCountriesLabel, + institutionOrder, institutionLabels, + initialInstitutionLookup, +} from './constants' + +class SinglePieChart extends Component { + state = { + keys: [], + data: [], + fields: {}, + } + + componentDidMount() { + const { payload } = this.props + console.log(payload) + console.log(payload.fields) + const fields = {} + payload.fields.forEach(field => { + const [k, v] = field.split(': ') + fields[k] = v + }) + + fetch(payload.url, { mode: 'cors' }) + .then(r => r.text()) + .then(text => { + try { + const keys = text.split('\n')[0].split(',').map(s => s.trim().replace(/"/, '')) + const data = csv.toJSON(text, { headers: { included: true } }) + this.setState({ keys, data, fields }) + } catch (e) { + console.error("error making json:", payload.url) + console.error(e) + } + }) + } + + render() { + const { payload } = this.props + const { keys, data, fields } = this.state + console.log(keys, data) + const [labelField, numberField] = keys + if (!data.length) return null + + const rowsToDisplay = parseInt(fields.Top, 10) + + const rows = data.map(row => { + const label = row[labelField] + const number = parseFloat(row[numberField]) + return [label, number] + }).sort((a, b) => b[1] - a[1]) + + console.log(rows) + + let chartRows = rows.slice(0, rowsToDisplay) + let otherCount = rows.slice(rowsToDisplay).reduce((a, b) => { return a + b[1] }, 0) + if (otherCount > 0) { + chartRows.push([fields.OtherLabel, otherCount]) + } + + console.log(rowsToDisplay, chartRows) + + return ( + <div className='chart'> + <div> + <C3Chart + data={{ + columns: chartRows, + type: 'pie', + }} + color={{ + pattern: rainbow, + }} + tooltip={{ + format: { + value: value => value, + } + }} + size={{ + height: chartRows.length < 4 ? 316 : 336, + }} + /> + <span className='chartCaption'>{fields.Caption}</span> + </div> + </div> + ) + } +} + +export default SinglePieChart diff --git a/client/index.js b/client/index.js index e0f7d270..835d859c 100644 --- a/client/index.js +++ b/client/index.js @@ -73,7 +73,7 @@ function runApplets() { let opt = null payload.cmd = cmd payload.partz = cmdPartz - if (payload.cmd === 'load_file') { + if (payload.cmd === 'load_file' || payload.cmd === 'single_pie_chart') { payload.url = 'https://nyc3.digitaloceanspaces.com/megapixels/v1' + cmdPartz.shift() return [el, payload] } diff --git a/client/table/file.table.js b/client/table/file.table.js index db53243a..ff6c0af6 100644 --- a/client/table/file.table.js +++ b/client/table/file.table.js @@ -14,7 +14,7 @@ class FileTable extends Component { data: [], columns: [], } - + componentDidMount() { const { payload } = this.props console.log(payload.url) diff --git a/site/assets/css/applets.css b/site/assets/css/applets.css index ef9f09e2..91808896 100644 --- a/site/assets/css/applets.css +++ b/site/assets/css/applets.css @@ -216,6 +216,9 @@ /* chart */ +.chart { + text-align: center; +} .piechart .chart { display: flex; flex-direction: row; @@ -238,7 +241,7 @@ .piechart .c3 path, .piechart .c3 line { stroke: rgba(64,64,64,0.3); } -.piechart .chartCaption { +.chartCaption { color: #888; font-size: 12px; font-family: 'Roboto', sans-serif; diff --git a/site/content/pages/research/munich_security_conference/assets/country_counts.csv b/site/content/pages/research/munich_security_conference/assets/country_counts.csv new file mode 100644 index 00000000..b2e9dcc8 --- /dev/null +++ b/site/content/pages/research/munich_security_conference/assets/country_counts.csv @@ -0,0 +1,9 @@ +country,images +Ecuador,2 +Finland,2 +France,52 +United Kingdom,995 +Italy,521 +Norway,2 +Sweden,1 +United States,6866
\ No newline at end of file diff --git a/site/content/pages/research/munich_security_conference/index.md b/site/content/pages/research/munich_security_conference/index.md index 7c923676..1ff3994c 100644 --- a/site/content/pages/research/munich_security_conference/index.md +++ b/site/content/pages/research/munich_security_conference/index.md @@ -28,6 +28,13 @@ Intro paragraph. [ add montage of extracted faces here] +``` +single_pie_chart /site/research/munich_security_conference/assets/country_counts.csv +Caption: Embassy images found in datasets, by country +Top: 4 +OtherLabel: Other Countries +``` +   |