From 9280b2ad356b7f0cda38f9e14eb91b89f076e9c1 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 2 Apr 2019 15:50:01 +0200 Subject: clamp citations height. add waypoint --- client/index.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) (limited to 'client/index.js') diff --git a/client/index.js b/client/index.js index 5e36d341..c09aece7 100644 --- a/client/index.js +++ b/client/index.js @@ -2,6 +2,7 @@ import React from 'react' import ReactDOM from 'react-dom' import { AppContainer } from 'react-hot-loader' import { Provider } from 'react-redux' +import 'waypoints/lib/noframework.waypoints.min.js'; import { toArray } from './util' import Applet from './applet' @@ -112,6 +113,24 @@ function runApplets() { } } +function buildWaypoints() { + const element = document.querySelector('.content section:nth-child(2)') + if (element) { + var waypoint = new Waypoint({ + element, + handler: function(direction) { + if (direction === 'down') { + document.body.classList.add('scrolled') + } else { + document.body.classList.remove('scrolled') + } + // console.log(direction) + // console.log('Scrolled to waypoint!') + } + }) + } +} + function main() { const paras = document.querySelectorAll('section p') // if (paras.length) { @@ -123,6 +142,7 @@ function main() { } }) runApplets() + buildWaypoints() } main() -- 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/index.js') 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 From 24e4f4af71f1e146f33688822ac3e4242339faa4 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 3 Apr 2019 15:18:04 +0200 Subject: data --- client/index.js | 1 - site/content/pages/datasets/market_1501/index.md | 4 ++++ site/public/datasets/market_1501/index.html | 15 +++++++++++++++ 3 files changed, 19 insertions(+), 1 deletion(-) (limited to 'client/index.js') diff --git a/client/index.js b/client/index.js index 10ed8563..c003a8b3 100644 --- a/client/index.js +++ b/client/index.js @@ -24,7 +24,6 @@ function appendModalImage() { const el = document.createElement('div') document.body.appendChild(el) ReactDOM.render(, el) - console.log(el) } function fetchDataset(payload) { diff --git a/site/content/pages/datasets/market_1501/index.md b/site/content/pages/datasets/market_1501/index.md index 8d253c79..f11f170e 100644 --- a/site/content/pages/datasets/market_1501/index.md +++ b/site/content/pages/datasets/market_1501/index.md @@ -27,6 +27,10 @@ authors: Adam Harvey {% include 'map.html' %} +{% include 'chart.html' %} + +{% include 'piechart.html' %} + {% include 'supplementary_header.html' %} {% include 'citations.html' %} diff --git a/site/public/datasets/market_1501/index.html b/site/public/datasets/market_1501/index.html index 1ffd7e6c..3281a9ae 100644 --- a/site/public/datasets/market_1501/index.html +++ b/site/public/datasets/market_1501/index.html @@ -83,6 +83,21 @@

-->
+

Who used Market 1501?

+ +

+ This bar chart presents a ranking of the top countries where dataset citations originated. Mouse over individual columns to see yearly totals. These charts show at most the top 10 countries. +

+ +
+ +
+ +
+
+
+
-- cgit v1.2.3-70-g09d2