diff options
| -rw-r--r-- | client/applet.js | 6 | ||||
| -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 | 150 | ||||
| -rw-r--r-- | client/util/index.js | 1 | ||||
| -rw-r--r-- | scraper/client/paper/paper.css | 3 | ||||
| -rw-r--r-- | site/assets/css/applets.css | 21 | ||||
| -rw-r--r-- | site/content/pages/test/chart.md | 2 | ||||
| -rw-r--r-- | site/content/pages/test/citations.md | 2 | ||||
| -rw-r--r-- | site/content/pages/test/index.md | 1 | ||||
| -rw-r--r-- | site/content/pages/test/map.md | 2 | ||||
| -rw-r--r-- | site/content/pages/test/pie_chart.md | 19 | ||||
| -rw-r--r-- | site/public/index.html | 1 | ||||
| -rw-r--r-- | site/public/test/chart/index.html | 2 | ||||
| -rw-r--r-- | site/public/test/citations/index.html | 2 | ||||
| -rw-r--r-- | site/public/test/index.html | 1 | ||||
| -rw-r--r-- | site/public/test/map/index.html | 2 | ||||
| -rw-r--r-- | site/public/test/pie_chart/index.html | 51 | ||||
| -rw-r--r-- | site/templates/home.html | 1 | ||||
| -rw-r--r-- | todo.md | 17 |
21 files changed, 344 insertions, 49 deletions
diff --git a/client/applet.js b/client/applet.js index cd73925c..21e1e4fa 100644 --- a/client/applet.js +++ b/client/applet.js @@ -4,7 +4,7 @@ import { Container as FaceSearchContainer } from './faceSearch' import { Container as FaceAnalysisContainer } from './faceAnalysis' import { Container as NameSearchContainer } from './nameSearch' import { Container as DatasetListContainer } from './datasetList' -import { Container as ChartContainer } from './chart' +import { CountriesByYear, PieCharts } from './chart' export default class Applet extends Component { render() { @@ -19,7 +19,9 @@ export default class Applet extends Component { case 'dataset_list': return <DatasetListContainer {...this.props} /> case 'chart': - return <ChartContainer {...this.props} /> + return <CountriesByYear {...this.props} /> + case 'piechart': + return <PieCharts {...this.props} /> default: return <pre style={{ color: '#0f0' }}>{'Megapixels'}</pre> } 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..47f7756c --- /dev/null +++ b/client/chart/pie.charts.js @@ -0,0 +1,150 @@ +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 diff --git a/client/util/index.js b/client/util/index.js index 0792e24e..87d32ebb 100644 --- a/client/util/index.js +++ b/client/util/index.js @@ -9,6 +9,7 @@ export const isFirefox = typeof InstallTrigger !== 'undefined' export const toArray = a => Array.prototype.slice.apply(a) export const choice = a => a[Math.floor(Math.random() * a.length)] +export const toTuples = o => Object.keys(o).map(key => [key, o[key]]) const htmlClassList = document.body.parentNode.classList htmlClassList.add(isDesktop ? 'desktop' : 'mobile') diff --git a/scraper/client/paper/paper.css b/scraper/client/paper/paper.css index 302eceb0..9bb684ff 100644 --- a/scraper/client/paper/paper.css +++ b/scraper/client/paper/paper.css @@ -24,7 +24,8 @@ .citations li { list-style-type: none; margin: 0; - padding-bottom: 20px; + padding: 20px; + margin-bottom: 30px; border:1px solid #ccc; } .citations h3{ diff --git a/site/assets/css/applets.css b/site/assets/css/applets.css index cbd9f825..02775641 100644 --- a/site/assets/css/applets.css +++ b/site/assets/css/applets.css @@ -206,3 +206,24 @@ .analysisContainer .results div img { max-width: 100%; } + +/* chart */ + +.piechart .chart { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: flex-start; +} +.piechart .chart > div { + width: 50%; +} +.piechart .chart .c3-chart-arc text { + fill: #fff; +} +.piechart .chart .c3-chart-arc.c3-target-Academic text { + fill: #333; +} +.piechart .c3 path, .piechart .c3 line { + stroke: rgba(64,64,64,0.3); +}
\ No newline at end of file diff --git a/site/content/pages/test/chart.md b/site/content/pages/test/chart.md index e29410a7..34c7d30c 100644 --- a/site/content/pages/test/chart.md +++ b/site/content/pages/test/chart.md @@ -15,5 +15,5 @@ authors: Megapixels ### [← Back to test index](/test/) ``` -chart lfw +chart duke_mtmc ``` diff --git a/site/content/pages/test/citations.md b/site/content/pages/test/citations.md index 48ab99b1..f5fc9df2 100644 --- a/site/content/pages/test/citations.md +++ b/site/content/pages/test/citations.md @@ -15,5 +15,5 @@ authors: Megapixels ### [← Back to test index](/test/) ``` -citations lfw +citations duke_mtmc ``` diff --git a/site/content/pages/test/index.md b/site/content/pages/test/index.md index 7d77c3d4..da9db049 100644 --- a/site/content/pages/test/index.md +++ b/site/content/pages/test/index.md @@ -20,4 +20,5 @@ authors: Megapixels - [Face search](/test/face_search/index.html) - [Name search](/test/name_search/index.html) - [Chart](/test/chart/index.html) +- [Pie Chart](/test/pie_chart/index.html) - [Modal image gallery](/test/gallery/index.html) diff --git a/site/content/pages/test/map.md b/site/content/pages/test/map.md index fc5e2847..3490d3df 100644 --- a/site/content/pages/test/map.md +++ b/site/content/pages/test/map.md @@ -15,5 +15,5 @@ authors: Megapixels ### [← Back to test index](/test/) ``` -map lfw +map duke_mtmc ``` diff --git a/site/content/pages/test/pie_chart.md b/site/content/pages/test/pie_chart.md new file mode 100644 index 00000000..ba4a8c3d --- /dev/null +++ b/site/content/pages/test/pie_chart.md @@ -0,0 +1,19 @@ +------------ + +status: published +title: Pie Chart +desc: Pie Chart Test +slug: pie-chart-test +published: 2018-12-04 +updated: 2018-12-04 +authors: Megapixels + +------------ + +# Pie Chart + +### [← Back to test index](/test/) + +``` +piechart duke_mtmc +``` diff --git a/site/public/index.html b/site/public/index.html index 62f78978..11ff7279 100644 --- a/site/public/index.html +++ b/site/public/index.html @@ -19,7 +19,6 @@ </a> <div class='links splash'> <a href="/datasets/" class='aboutLink'>DATASETS</a> - <a href="/research/" class='aboutLink'>RESEARCH</a> <a href="/about/" class='aboutLink'>ABOUT</a> </div> </header> diff --git a/site/public/test/chart/index.html b/site/public/test/chart/index.html index fd3d690e..93e12b3c 100644 --- a/site/public/test/chart/index.html +++ b/site/public/test/chart/index.html @@ -28,7 +28,7 @@ <section><h1>Chart</h1> <h3><a href="/test/">← Back to test index</a></h3> -</section><section class='applet_container'><div class='applet' data-payload='{"command": "chart lfw"}'></div></section> +</section><section class='applet_container'><div class='applet' data-payload='{"command": "chart duke_mtmc"}'></div></section> </div> <footer> diff --git a/site/public/test/citations/index.html b/site/public/test/citations/index.html index 3dafd81e..70b3fe55 100644 --- a/site/public/test/citations/index.html +++ b/site/public/test/citations/index.html @@ -28,7 +28,7 @@ <section><h1>Citations</h1> <h3><a href="/test/">← Back to test index</a></h3> -</section><section class='applet_container'><div class='applet' data-payload='{"command": "citations lfw"}'></div></section> +</section><section class='applet_container'><div class='applet' data-payload='{"command": "citations duke_mtmc"}'></div></section> </div> <footer> diff --git a/site/public/test/index.html b/site/public/test/index.html index 8a4ec3fb..0fc839d0 100644 --- a/site/public/test/index.html +++ b/site/public/test/index.html @@ -36,6 +36,7 @@ <li><a href="/test/face_search/index.html">Face search</a></li> <li><a href="/test/name_search/index.html">Name search</a></li> <li><a href="/test/chart/index.html">Chart</a></li> +<li><a href="/test/pie_chart/index.html">Pie Chart</a></li> <li><a href="/test/gallery/index.html">Modal image gallery</a></li> </ul> </section> diff --git a/site/public/test/map/index.html b/site/public/test/map/index.html index fd5a186d..4f4e7093 100644 --- a/site/public/test/map/index.html +++ b/site/public/test/map/index.html @@ -28,7 +28,7 @@ <section><h1>Map test</h1> <h3><a href="/test/">← Back to test index</a></h3> -</section><section class='applet_container'><div class='applet' data-payload='{"command": "map lfw"}'></div></section> +</section><section class='applet_container'><div class='applet' data-payload='{"command": "map duke_mtmc"}'></div></section> </div> <footer> diff --git a/site/public/test/pie_chart/index.html b/site/public/test/pie_chart/index.html new file mode 100644 index 00000000..7dd159a3 --- /dev/null +++ b/site/public/test/pie_chart/index.html @@ -0,0 +1,51 @@ +<!doctype html> +<html> +<head> + <title>MegaPixels</title> + <meta charset="utf-8" /> + <meta name="author" content="Megapixels" /> + <meta name="description" content="Pie Chart Test" /> + <meta name="referrer" content="no-referrer" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> + <link rel='stylesheet' href='/assets/css/fonts.css' /> + <link rel='stylesheet' href='/assets/css/tabulator.css' /> + <link rel='stylesheet' href='/assets/css/css.css' /> + <link rel='stylesheet' href='/assets/css/leaflet.css' /> + <link rel='stylesheet' href='/assets/css/applets.css' /> +</head> +<body> + <header> + <a class='slogan' href="/"> + <div class='logo'></div> + <div class='site_name'>MegaPixels</div> + </a> + <div class='links'> + <a href="/datasets/">Datasets</a> + <a href="/about/">About</a> + </div> + </header> + <div class="content content-"> + + <section><h1>Pie Chart</h1> +<h3><a href="/test/">← Back to test index</a></h3> +</section><section class='applet_container'><div class='applet' data-payload='{"command": "piechart duke_mtmc"}'></div></section> + + </div> + <footer> + <div> + <a href="/">MegaPixels.cc</a> + <a href="/about/disclaimer/">Disclaimer</a> + <a href="/about/terms/">Terms of Use</a> + <a href="/about/privacy/">Privacy</a> + <a href="/about/">About</a> + <a href="/about/team/">Team</a> + </div> + <div> + MegaPixels ©2017-19 Adam R. Harvey / + <a href="https://ahprojects.com">ahprojects.com</a> + </div> + </footer> +</body> + +<script src="/assets/js/dist/index.js"></script> +</html>
\ No newline at end of file diff --git a/site/templates/home.html b/site/templates/home.html index 62f78978..11ff7279 100644 --- a/site/templates/home.html +++ b/site/templates/home.html @@ -19,7 +19,6 @@ </a> <div class='links splash'> <a href="/datasets/" class='aboutLink'>DATASETS</a> - <a href="/research/" class='aboutLink'>RESEARCH</a> <a href="/about/" class='aboutLink'>ABOUT</a> </div> </header> @@ -13,6 +13,7 @@ - AH: render one head from each activate dataset - 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 @@ -50,6 +51,22 @@ - on hold until closer to FT launch date +## Verifications for FT Launch: + +(but need to add additional S2 Queries) + +- [x] Brainwash +- [x] Duke MTMC +- [x] UCCS +- [ ] IJB-C (and IJB-A/B?) +- [ ] MSCeleb +- [ ] HRT Transgender + +Questions: + +- same S2 IDs conflict when appearing in multiple papers (maybe need to combine dataset key column with S2 id for GET/PUT?) +- <https://verify.megapixels.cc/paper/msceleb/verify/e83fb7d5510f777048abb2015456e60b1d5eaa65> appears in both msceleb and uccs <https://verify.megapixels.cc/paper/uccs/verify/e83fb7d5510f777048abb2015456e60b1d5eaa65> + ## Datasets for FT Launch: |