From 438cde0ab82cf9fdbdcbb45e0ad8e43efc3525bb Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sun, 31 Mar 2019 17:40:44 +0200 Subject: hide pdf --- client/chart/pie.charts.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'client/chart') diff --git a/client/chart/pie.charts.js b/client/chart/pie.charts.js index 6e579537..84e85c3a 100644 --- a/client/chart/pie.charts.js +++ b/client/chart/pie.charts.js @@ -17,6 +17,7 @@ class PieCharts extends Component { render() { const { payload } = this.props const { paper, citations } = payload.data + console.log(this.props) if (!citations.length) return null const countries = {} @@ -83,9 +84,10 @@ class PieCharts extends Component { } }} size={{ - height: 336, + height: countryRows.length < 4 ? 316 : 336, }} /> + {paper.name}{' dataset citations by country'}
+ {paper.name}{' dataset citations by organization type'}
) -- cgit v1.2.3-70-g09d2 From 5366253cc74b6df84cd0923220d288dc7385e111 Mon Sep 17 00:00:00 2001 From: adamhrv Date: Sun, 31 Mar 2019 18:55:38 +0200 Subject: change gov/mil to mil/gov --- client/chart/constants.js | 4 ++-- site/includes/citations.html | 3 +-- site/includes/map.html | 6 +++--- site/includes/piechart.html | 7 ------- todo.md | 34 +++++++++++++--------------------- 5 files changed, 19 insertions(+), 35 deletions(-) (limited to 'client/chart') diff --git a/client/chart/constants.js b/client/chart/constants.js index 70375ba3..b916cbd2 100644 --- a/client/chart/constants.js +++ b/client/chart/constants.js @@ -59,6 +59,6 @@ export const institutionOrder = { export const institutionLabels = { 'edu': 'Academic', 'company': 'Commercial', - 'gov': 'Government / Military', - 'mil': 'Government / Military', + 'gov': 'Military / Government', + 'mil': 'Military / Government', } \ No newline at end of file diff --git a/site/includes/citations.html b/site/includes/citations.html index 058a1834..f15c5148 100644 --- a/site/includes/citations.html +++ b/site/includes/citations.html @@ -2,8 +2,7 @@

Citations

- Citations were collected from Semantic Scholar, a website which aggregates - and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train and/or test machine learning algorithms. + Citations were collected from Semantic Scholar, a website which aggregates and indexes research papers. The citations were geocoded using names of institutions found in the PDF front matter, or as listed on other resources. These papers have been manually verified to show that researchers downloaded and used the dataset to train and/or test machine learning algorithms.

Add [button/link] to download CSV. Add search input field to filter. Expand number of rows to 10. Reduce URL text to show only the domain (ie https://arxiv.org/pdf/123456 --> arxiv.org) diff --git a/site/includes/map.html b/site/includes/map.html index 74771768..867ada4c 100644 --- a/site/includes/map.html +++ b/site/includes/map.html @@ -18,15 +18,15 @@ -

+
  • Academic
    • -
  • Industry
    • -
  • Government / Military
    • +
  • Commercial
    • +
  • Military / Government
  • Citation data is collected using SemanticScholar.org then dataset usage verified and geolocated.
diff --git a/site/includes/piechart.html b/site/includes/piechart.html index e739bb28..94c8aae7 100644 --- a/site/includes/piechart.html +++ b/site/includes/piechart.html @@ -1,10 +1,3 @@ -
-

- These pie charts show overall totals based on country and institution type. -

- -
-
diff --git a/todo.md b/todo.md index d6f76c85..c2941ff0 100644 --- a/todo.md +++ b/todo.md @@ -1,43 +1,35 @@ # TODO -## Paper Review - -- build and deploy paper verification tool to publicly (but password protected) URL -- add field for name (no site registration needed) -- user can maually add their name, so it can be used for double-verification, accountability -- top priority datasets will probably be: DukeMTMC, UCCS, MegaFace, Brainwash, HRT Transgender, IJB-C, VGG Face 2, MS Celeb, Pipa, - ## Splash - AH: work on CTA overlay design -- AH: render one head from each activate dataset +- AH: render heads from IJB-C, and MS Celeb +- AH: create psuedo-ranomized list of names from combined datasets for word/name cloud - JL: add "Name \n Dataset Name" below head? and make linkable to dataset? - change animation to be only colored vertices <---> colored landmarks - add scripted slow-slow-zoom out effect ## Datasets Index -- AH: add more datasets -- AH: finalize intro text +- AH: add dataset analysis for MS Celeb, Duke, UCCS, IJB-C, Brainwash, HRT Transgender +- AH: increase sizes of dataset thumbnails +- AH: add license information to each dataset page ## Datasets -- AH: Try creating another google doc to manually review each citation and send to FT to maybe help with review +Higher priority: + - AH: finalize text for map include, beta disclaimer - JL: add download (button) and search option for CSV? or link to github - JL: remove pointer rollover on tabulators - JL: change PDF url to only show domain (ie https:/arxiv.org/12345/ --> arxiv.org) -- JL: check footnotes (it shows an 'a' next to the numbers on bottom. is this right?) -- JL: Add 'sticky' title appear in header zone when scrolling down page (like NYT) -- JL: add total number of citations next to country "China (1,234)" -- JL: possible to add country with most citations in the "Who Used Dataset" paragraph? -- JL: time permitting, add C3 Pie Graph include: - - one pie graph for citations by country - - one pie graph for citations by sector (academic, commericial, military) -- Integrate verified citations and show only verified citations -- JL/AH: integrate new sidebar JSON or CSV data (AH, working on this...) -- NB: skipping synthetic faces for now +- JL/AH: integrate new sidebar JSON or CSV data (AH, working on this...) to show dataset statistics + +Lower priority: + +- JL: Add 'sticky' title with Dataset appear in header zone when scrolling down page (like NYT) + ## About - AH: update bio images -- cgit v1.2.3-70-g09d2 From 5fd122dfdada96d4857fa48d2f7d1df8f787fcd5 Mon Sep 17 00:00:00 2001 From: adamhrv Date: Mon, 1 Apr 2019 12:51:19 +0200 Subject: caption --- client/chart/countriesByYear.chart.js | 1 + 1 file changed, 1 insertion(+) (limited to 'client/chart') diff --git a/client/chart/countriesByYear.chart.js b/client/chart/countriesByYear.chart.js index 4257748c..2284f774 100644 --- a/client/chart/countriesByYear.chart.js +++ b/client/chart/countriesByYear.chart.js @@ -158,6 +158,7 @@ class CountriesByYearChart extends Component { } }} /> +
{paper.name}{' dataset citations by country per year'}
) } -- cgit v1.2.3-70-g09d2 From 892f2e928c05126b48c2dc8b669b31235be62f9b Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 2 Apr 2019 15:52:46 +0200 Subject: touch up chart --- client/chart/countriesByYear.chart.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'client/chart') diff --git a/client/chart/countriesByYear.chart.js b/client/chart/countriesByYear.chart.js index 2284f774..78ab4434 100644 --- a/client/chart/countriesByYear.chart.js +++ b/client/chart/countriesByYear.chart.js @@ -68,11 +68,13 @@ class CountriesByYearChart extends Component { ) ) - citationCountsByYear.push( - [otherCountriesLabel].concat( - yearList.map(year => otherCountries.reduce((a,b) => (a + years[year][b]), 0)) + if (otherCountries.length) { + citationCountsByYear.push( + [otherCountriesLabel].concat( + yearList.map(year => otherCountries.reduce((a,b) => (a + years[year][b]), 0)) + ) ) - ) + } let maxCitationsInAYear = 0 let currentSum = 0 -- cgit v1.2.3-70-g09d2 From f58d41731fc07d94d594d5582aef203564f990ec Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 2 Apr 2019 20:35:50 +0200 Subject: modal image gallery --- client/chart/countriesByYear.chart.js | 2 +- client/index.js | 9 ++++ client/modalImage/index.js | 7 +++ client/modalImage/modal.css | 69 +++++++++++++++++++++++++ client/modalImage/modalImage.container.js | 85 +++++++++++++++++++++++++++++++ 5 files changed, 171 insertions(+), 1 deletion(-) create mode 100644 client/modalImage/index.js create mode 100644 client/modalImage/modal.css create mode 100644 client/modalImage/modalImage.container.js (limited to 'client/chart') diff --git a/client/chart/countriesByYear.chart.js b/client/chart/countriesByYear.chart.js index 78ab4434..df7a4530 100644 --- a/client/chart/countriesByYear.chart.js +++ b/client/chart/countriesByYear.chart.js @@ -160,7 +160,7 @@ class CountriesByYearChart extends Component { } }} /> -
{paper.name}{' dataset citations by country per year'}
+
{paper.name}{' dataset citations per country per year. We verified ' + citations.length + ' papers that used the dataset.'}
) } diff --git a/client/index.js b/client/index.js index c09aece7..10ed8563 100644 --- a/client/index.js +++ b/client/index.js @@ -8,6 +8,7 @@ import { toArray } from './util' import Applet from './applet' import { store } from './store' import appendMap from './map' +import { ModalImage } from './modalImage' function appendReactApplet(el, payload) { ReactDOM.render( @@ -19,6 +20,13 @@ function appendReactApplet(el, payload) { ) } +function appendModalImage() { + const el = document.createElement('div') + document.body.appendChild(el) + ReactDOM.render(, el) + console.log(el) +} + function fetchDataset(payload) { if (payload.command === 'face_analysis') return new Promise(resolve => resolve()) if (payload.dataset === 'info') return new Promise(resolve => resolve()) @@ -143,6 +151,7 @@ function main() { }) runApplets() buildWaypoints() + appendModalImage() } main() diff --git a/client/modalImage/index.js b/client/modalImage/index.js new file mode 100644 index 00000000..ebb3bb72 --- /dev/null +++ b/client/modalImage/index.js @@ -0,0 +1,7 @@ +import ModalImage from './modalImage.container.js' + +import './modal.css' + +export { + ModalImage +} \ No newline at end of file diff --git a/client/modalImage/modal.css b/client/modalImage/modal.css new file mode 100644 index 00000000..d9180125 --- /dev/null +++ b/client/modalImage/modal.css @@ -0,0 +1,69 @@ +.modal { + position: fixed; + top: 0; left: 0; width: 100%; height: 100%; + background: rgba(0,0,0,0.8); + color: white; + display: flex; + justify-content: center; + align-items: center; + opacity: 0; + pointer-events: none; + z-index: -9999999; + transition: opacity 0.2s cubic-bezier(0,0,1,1); +} +.modal.visible { + opacity: 1; + pointer-events: auto; + z-index: 999999999; +} +.modal .inner { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.modal img { + max-width: 80vw; + max-height: 80vh; +} +.modal .caption { + display: block; + text-align: center; +} +.modal .prev { + position: absolute; + top: 0; left: 0; + width: 10%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + color: white; + font-size: 40px; + cursor: pointer; +} +.modal .next { + position: absolute; + top: 0; right: 0; + width: 10%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + color: white; + font-size: 40px; + cursor: pointer; +} +.modal .close { + position: absolute; + top: 0; right: 0; + width: 10vw; height: 10vw; + display: flex; + justify-content: center; + align-items: center; + color: white; + font-size: 40px; + cursor: pointer; +} \ No newline at end of file diff --git a/client/modalImage/modalImage.container.js b/client/modalImage/modalImage.container.js new file mode 100644 index 00000000..a637deb6 --- /dev/null +++ b/client/modalImage/modalImage.container.js @@ -0,0 +1,85 @@ +import React, { Component } from 'react' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' +import { ReactTabulator } from 'react-tabulator' + +import { toArray, toTuples, domainFromUrl } from '../util' +import { Loader } from '../common' + +import csv from 'parse-csv' + +class ModalImage extends Component { + state = { + visible: true, + images: [], + index: 0, + } + + componentDidMount() { + const images = toArray(document.querySelectorAll('.image img')) + // console.log(images) + images.forEach((img, i) => { + img.addEventListener('click', () => this.loadImage(i)) + }) + this.setState({ images }) + document.body.addEventListener('keydown', e => { + if (document.activeElement && document.activeElement !== document.body) { + return null + } + // console.log(e.keyCode) + switch (e.keyCode) { + case 37: // left + this.prev() + break + case 39: // right + this.next() + break + default: + break + } + }) + } + + loadImage(index) { + this.setState({ visible: true, index }) + } + + prev() { + const { index, images } = this.state + this.setState({ index: (images.length + index - 1) % images.length }) + } + + next() { + const { index, images } = this.state + this.setState({ index: (index + 1) % images.length }) + } + + close() { + this.setState({ visible: false }) + } + + render() { + const { images, index, visible } = this.state + if (!images.length) return null + const img = images[index] + let caption = null + const sib = img.nextSibling + if (sib && sib.classList.contains('caption')) { + caption = sib.innerText + } + return ( +
+
+
+ + {caption &&
{caption}
} +
+
+
this.prev()}className='prev'>{'<'}
+
this.next()} className='next'>{'>'}
+
this.close()} className='close'>{'x'}
+
+ ) + } +} +export default ModalImage -- cgit v1.2.3-70-g09d2