From 84d87d9609a0bf5dfa5be1c956b4e6f6f4096c00 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sat, 30 Mar 2019 16:51:22 +0100 Subject: update mapppppp --- client/map/index.js | 65 +++++++++++++++++++++++++++++++++-------------------- 1 file changed, 41 insertions(+), 24 deletions(-) diff --git a/client/map/index.js b/client/map/index.js index b35ffddb..a1c728d9 100644 --- a/client/map/index.js +++ b/client/map/index.js @@ -37,25 +37,31 @@ const redDot = L.icon({ popupAnchor: [0, -5] // point from which the popup should open relative to the iconAnchor }) -function addMarker(map, latlng, title, addresses, year, pdf) { +function addMarker(map, latlng, citations) { const marker = L.marker(latlng, { icon: redDot }).addTo(map) - let message = [ - "", title, "", - ] - if (pdf && pdf.length) { - message.unshift("") - message.push("") - } + let message = citations.map(citation => { + const { title, addresses, year, pdf, doi } = citation + let rec = [ + "", title, "", + ] + if (pdf && pdf.length) { + rec.unshift("") + rec.push("") + } + else if (doi && doi.length) { + rec.unshift("") + rec.push("") + } + const addressString = addresses.map(addr => addr.name).join('
') + rec.push("
") + rec.push(addressString) + if (year) { + rec.push(" (" + year + ")") + } + return rec.join("") + }) - const addressString = addresses.map(addr => addr.name).join('
') - message = message.concat([ - "
", - addressString, - ]) - if (year) { - message.push(" (" + year + ")") - } - marker.bindPopup(message.join('')) + marker.bindPopup(message.join('

')) return marker } @@ -73,7 +79,7 @@ function addArc(map, src, dest, arcStyle) { export default function append(el, payload) { const { data } = payload if (!data) return - let { paper, addresses, citations } = data + let { paper, citations } = data let source = [0, 0] let map = L.map(el).setView([25, 0], 2) @@ -87,30 +93,41 @@ export default function append(el, payload) { accessToken: 'pk.eyJ1IjoiZmFuc2FsY3kiLCJhIjoiY2pvN3I1czJwMHF5NDNrbWRoMWpteHlrdCJ9.kMpM5syQUhVjKkn1iVx9fg' }).addTo(map) - if (addresses && addresses.length) { - source = [address[0].lat, address[0].lng].map(n => (parseFloat(n) || 0)) + if (paper.addresses && paper.addresses.length) { + source = [paper.addresses[0].lat, paper.addresses[0].lng].map(n => (parseFloat(n) || 0)) } else { console.error("No address found for root paper") // console.log(data) } // group papers by address + let citationsByAddress = {} citations.forEach(citation => { - console.log(citation) if (!citation.addresses) { console.log(citation) return } - const citationAddress = citation.addresses[0] + citation.addresses.forEach(address => { + if (!(address.name in citationsByAddress)) { + citationsByAddress[address.name] = { address, citations: []} + } + citationsByAddress[address.name].citations.push(citation) + }) + }) + + Object.keys(citationsByAddress).map(name => { + const { citations: citationList, address: citationAddress } = citationsByAddress[name] + console.log(name, citationsByAddress[name]) + // console.log(citation) const latlng = [citationAddress.lat, citationAddress.lng].map(n => parseFloat(n)) if (Number.isNaN(latlng[0]) || Number.isNaN(latlng[1])) return - addMarker(map, latlng, citation.title, citation.addresses, citation.year, citation.pdf) + addMarker(map, latlng, citationList) addArc(map, source, latlng, arcStyles[citationAddress.type]) }) console.log(paper) - const rootMarker = addMarker(map, source, paper.title, addresses, paper.year) + const rootMarker = addMarker(map, source, [paper]) rootMarker.openPopup() // a transparent div to cover the map, so normal scroll events will not be eaten by leaflet -- cgit v1.2.3-70-g09d2 From 9d1915af786379446ac7465215b6f3679f270e19 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sat, 30 Mar 2019 18:50:32 +0100 Subject: map scroll --- client/map/index.js | 18 ++++++++++++++---- site/assets/css/applets.css | 4 ++++ 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/client/map/index.js b/client/map/index.js index a1c728d9..9ca43867 100644 --- a/client/map/index.js +++ b/client/map/index.js @@ -52,12 +52,12 @@ function addMarker(map, latlng, citations) { rec.unshift("") rec.push("") } - const addressString = addresses.map(addr => addr.name).join('
') - rec.push("
") - rec.push(addressString) if (year) { rec.push(" (" + year + ")") } + const addressString = addresses.map(addr => addr.name).join('
') + rec.push("
") + rec.push(addressString) return rec.join("") }) @@ -107,6 +107,7 @@ export default function append(el, payload) { console.log(citation) return } + console.log(citation) citation.addresses.forEach(address => { if (!(address.name in citationsByAddress)) { citationsByAddress[address.name] = { address, citations: []} @@ -122,7 +123,16 @@ export default function append(el, payload) { const latlng = [citationAddress.lat, citationAddress.lng].map(n => parseFloat(n)) if (Number.isNaN(latlng[0]) || Number.isNaN(latlng[1])) return addMarker(map, latlng, citationList) - addArc(map, source, latlng, arcStyles[citationAddress.type]) + const style = { ...arcStyles[citationAddress.type] } + let weight = Math.min(citationList.length, 5) + let opacity = 0.5 + Math.min(citationList.length / 5, 0.5) + if (citationAddress.type !== 'edu') { + weight += 1 + opacity = 1 + } + style.weight = String(weight) + style.opacity = opacity + addArc(map, source, latlng, style) }) console.log(paper) diff --git a/site/assets/css/applets.css b/site/assets/css/applets.css index e5c427b2..10c0e786 100644 --- a/site/assets/css/applets.css +++ b/site/assets/css/applets.css @@ -168,6 +168,10 @@ .desktop .map_cover:hover { opacity: 1; } +.leaflet-popup-content-wrapper { + max-height: 230px; + overflow-y: auto; +} .leaflet-popup-content a { color: #0078A8; border-bottom: 1px solid rgba(0, 128, 160, 0.4); -- cgit v1.2.3-70-g09d2 From 45bf844c0891098232b2a7ff5458cd2de32acbdf Mon Sep 17 00:00:00 2001 From: adamhrv Date: Sun, 31 Mar 2019 15:58:20 +0200 Subject: update about --- site/content/pages/about/credits.md | 48 ----------------------------- site/content/pages/about/faq.md | 28 +++++++++++++++++ site/content/pages/about/index.md | 60 +++++++++++++++++++++++-------------- 3 files changed, 65 insertions(+), 71 deletions(-) delete mode 100644 site/content/pages/about/credits.md create mode 100644 site/content/pages/about/faq.md diff --git a/site/content/pages/about/credits.md b/site/content/pages/about/credits.md deleted file mode 100644 index bc2283fd..00000000 --- a/site/content/pages/about/credits.md +++ /dev/null @@ -1,48 +0,0 @@ ------------- - -status: published -title: MegaPixels Press and News -desc: MegaPixels Press and News -slug: press -cssclass: about -published: 2018-12-04 -updated: 2018-12-04 -authors: Adam Harvey - ------------- - -# Credits - - - - -#### Team - -- Research and image analysis: Adam Harvey -- Development and visualizations: Jules LaPlace -- Produced in Partnership with Mozilla -- Contributing researchers: Berit Gilma, Mathana Stender - -#### Code - -<<<<<<< HEAD -- This site uses D3.js, C3.js, and ThreeJS for visualizations. -- Data aggregation uses Pandas and PDFMiner.Six. -======= -- This site uses D3 and C2 for visuzations -- Add more here ->>>>>>> 26646e6adf3833f6282e9515c14ad61e485440c0 - -#### Data - -- link to github -- how it was gathered \ No newline at end of file diff --git a/site/content/pages/about/faq.md b/site/content/pages/about/faq.md new file mode 100644 index 00000000..cec53813 --- /dev/null +++ b/site/content/pages/about/faq.md @@ -0,0 +1,28 @@ +------------ + +status: published +title: MegaPixels Press and News +desc: MegaPixels Press and News +slug: press +cssclass: about +published: 2018-12-04 +updated: 2018-12-04 +authors: Adam Harvey + +------------ + +# FAQs + + + + +[ page under development ] diff --git a/site/content/pages/about/index.md b/site/content/pages/about/index.md index 4fec0777..c2d67f16 100644 --- a/site/content/pages/about/index.md +++ b/site/content/pages/about/index.md @@ -16,41 +16,55 @@ authors: Adam Harvey -(PAGE UNDER DEVELOPMENT) +MegaPixels is an independent art and research project by Adam Harvey and Jules LaPlace investigating the ethics and individual privacy implications of publicly available face recognition datasets, and their role in industry and governmental expansion into biometric surveillance technologies. -

Ever since government agencies began developing face recognition in the early 1960's, datasets of face images have always been central to technological advancements. Today, these datasets no longer originate in labs, but instead from family photo albums posted on photo sharing sites, surveillance cameras on college campuses, search engine queries for celebrities, cafe livestreams, and personal videos posted on YouTube.

- -Collectively, facial recognition datasets are now gathered "in the wild". - -

MegaPixels is art and research by Adam Harvey about facial recognition datasets that unravels their histories, futures, geographies, and meanings. Throughout 2019 this site this site will publish research reports, visualizations, raw data, and interactive tools to explore how publicly available facial recognition datasets contribute to a global supply chain of biometric data that powers the global facial recognition industry.

- -During the last year, hundreds of these facial analysis datasets created "in the wild" have been collected to understand how they contribute to a global supply chain of biometric data that is powering the global facial recognition industry. - -The MegaPixels website is produced in partnership with [Mozilla](https://mozilla.org). +The MegaPixels site is made possible with support from Mozilla

Adam Harvey

is Berlin-based American artist and researcher. His previous projects (CV Dazzle, Stealth Wear, and SkyLift) explore the potential for countersurveillance as artwork. He is the founder of VFRAME (visual forensics software for human rights groups), the recipient of 2 PrototypeFund grants, and is a researcher in residence at Karlsruhe HfG. -
- ahprojects.com +

Adam Harvey

is Berlin-based American artist and researcher. His previous projects (CV Dazzle, Stealth Wear, and SkyLift) explore the potential for counter-surveillance as artwork. He is the founder of VFRAME (visual forensics software for human rights groups) and is a currently researcher in residence at Karlsruhe HfG.

ahprojects.com

Jules LaPlace

is an American creative technologist also based in Berlin. He was previously the CTO of a digital agency in NYC and now also works at VFRAME, developing computer vision for human rights groups. Jules also builds creative software for artists and musicians. -
- asdf.us +

is an American technologist and artist also based in Berlin. He was previously the CTO of a digital agency in NYC and now also works at VFRAME, developing computer vision and data analysis software for human rights groups. Jules also builds experimental software for artists and musicians.

asdf.us

+ +MegaPixels.cc is an independent research project about publicly available face recognition datasets. This website is based, in part, on earlier installations and research project about facial recognition datasets in 2016-2018, in particular the MegaFace dataset. Since then it has evolved into a large-scale survey and analysis of publicly available face and person analysis dataset usage, geographies, and ethics. + +An academic report and presentation on the findings is forthcoming. This site is published to make the research more accessible to a wider audience and to include visualizations and interactive features not possible in PDF publications. Continued research on MegaPixles is supported by a 1 year Researcher-in-Residence grant from Karlsruhe HfG. + +When possible, and once thoroughly verified, data generated for MegaPixels will be made available for download on [github.com/adamhrv/megapixels](https://github.com/adamhrv/megapixels) + +#### Team + +- Adam Harvey: Concept, research, design, computer vision +- Jules LaPlace: Information and systems architecture, data retrieval, web applications + +#### Contributing Researchers + +- Berit Gilma: Dataset statistics and discovery +- Beth (aka Ms. Celeb): Dataset usage verification and research +- Mathana Stender: Commercial usage verification and research on LFW + +#### Code and Libraries + +- [Semantic Scholar](https://semanticscholar.org) for citation aggregation +- Leaflet.js for maps +- C3.js for charts +- D3.js and ThreeJS for 3D visualizations +- PDFMiner.Six and Pandas for research paper data analysis + +Please direct questions, comments, or feedback to [mastodon.social/@adamhrv](https://mastodon.social/@adamhrv) \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 84508d90fd53c938de4839d72b02f42d271cb489 Mon Sep 17 00:00:00 2001 From: adamhrv Date: Sun, 31 Mar 2019 16:01:13 +0200 Subject: css for about page --- site/assets/css/css.css | 131 +++++++++++++++++++++++++----------------- site/assets/css/tabulator.css | 17 ++++-- 2 files changed, 88 insertions(+), 60 deletions(-) diff --git a/site/assets/css/css.css b/site/assets/css/css.css index 47fc0652..0244b86b 100644 --- a/site/assets/css/css.css +++ b/site/assets/css/css.css @@ -464,10 +464,10 @@ section.fullwidth .image { text-align: center; } .image .caption.intro-caption{ - text-align: left; + text-align: center; } .caption { - text-align: left; + text-align: center; font-size: 10pt; color: #999; max-width: 960px; @@ -484,50 +484,6 @@ section.fullwidth .image { } -/* about page */ - - -.flex-container { - padding: 0; - margin: 0; - list-style: none; - - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - - -webkit-flex-flow: row wrap; - justify-content: space-around; -} - -.team-photos-container{ - margin-top:40px; -} -.team-member { - height: auto; - margin-top: 10px; - color: white; - width: 400px; - font-weight: bold; - flex-grow: 1; - margin:0 40px 0 0; - padding:20px; - border-radius:6px; - background: #202020; -} -.team-member&:last-child{ - margin:0 0 0 40px; -} -.team-member p{ - font-size:14px; -} -.team-member img{ - margin:0; - display: block; -} - .sideimage { margin: 0px 0 40px 0; @@ -771,7 +727,7 @@ section.intro_section { background-size: cover; background-position: center left; padding: 50px 0; - /*min-height: 40vh;*/ + min-height: 40vh; display: flex; justify-content: center; align-items: center; @@ -829,7 +785,7 @@ page-specific formatting position: relative; width: 100%; height: 50px; - margin-top:100px; + margin-top:50px; } .hr-wave-line1 { @@ -848,34 +804,54 @@ page-specific formatting /* map */ -.map-legend-item{ +ul.map-legend{ display: inline-block; + margin:0; +} +ul.map-legend li{ margin-right: 10px; padding-top:4px; + display: inline-block; } -.map-legend-item:before { +ul.map-legend li:before { content: ''; display: inline-block; width: 10px; height: 10px; - /*margin-bottom: 2px;*/ margin-right: 6px; } -.map-legend-item.edu:before { +ul.map-legend li.edu:before { background-color: #f2f293; } -.map-legend-item.com:before { +ul.map-legend li.com:before { background-color: #3264f6; } -.map-legend-item.gov:before { +ul.map-legend li.gov:before { background-color: #f30000; } +ul.map-legend li.source:before { + content: none; + display: inline-block; + width: 0px; + margin-right: 10px; +} /* about */ .content-about { color: #fff; } +.content-about p { + font-size:16px; +} +.content-about ul{ + font-size:14px; + font-weight: 300; +} +.content-about section > p:first-of-type{ + font-size:23px; + line-height:39px; +} .content-about .about-menu ul li { display: inline-block; font-size: 14px; @@ -894,6 +870,53 @@ page-specific formatting border-bottom: 1px solid #ddd; color: #ddd; } +/* about page */ + + +.flex-container { + padding: 0; + margin: 0; + list-style: none; + + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + + -webkit-flex-flow: row wrap; + justify-content: space-around; +} + +.content-about .team-photos-container{ + margin:40px 0; +} +.content-about .team-member { + height: auto; + margin-top: 10px; + color: white; + width: 400px; + font-weight: bold; + flex-grow: 1; + margin:0 40px 0 0; + padding:20px; + border-radius:6px; + background: #202020; +} +.content-about .team-member&:last-child{ + margin:0 0 0 40px; +} +.content-about .team-member p{ + font-size:14px; +} +.content-about .team-member img{ + margin:0; + display: block; +} +.content-about .team-member h3{ + font-size:18px; +} + /* footnotes */ diff --git a/site/assets/css/tabulator.css b/site/assets/css/tabulator.css index 41c7ffa4..d26b5cfc 100755 --- a/site/assets/css/tabulator.css +++ b/site/assets/css/tabulator.css @@ -1,7 +1,7 @@ /* Tabulator v4.1.3 (c) Oliver Folkerd */ .tabulator { position: relative; - font-size: 14px; + font-size: 13px; text-align: left; overflow: hidden; -ms-transform: translatez(0); @@ -23,7 +23,7 @@ position: relative; box-sizing: border-box; width: 100%; - border-bottom: 1px solid #999; + border-bottom: 1px solid #333; color: #ddd; white-space: nowrap; overflow: hidden; @@ -41,6 +41,7 @@ text-align: left; vertical-align: bottom; overflow: hidden; + padding: 5px 0; } .tabulator .tabulator-header .tabulator-col.tabulator-moving { @@ -63,6 +64,9 @@ overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; + /* AH */ + font-weight: 500; + font-size:14px; } .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor { @@ -76,13 +80,13 @@ .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow { display: inline-block; position: absolute; - top: 9px; + top: 11px; right: 8px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; - border-bottom: 6px solid #bbb; + border-bottom: 6px solid #666; } .tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols { @@ -129,6 +133,7 @@ .tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title { padding-right: 25px; + padding-left: 6px; } .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover { @@ -137,7 +142,7 @@ .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow { border-top: none; - border-bottom: 6px solid #bbb; + border-bottom: 6px solid #666; } .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-arrow { @@ -723,7 +728,7 @@ max-height: 200px; background: #fff; border: 1px solid #333; - font-size: 14px; + font-size: 13px; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 10000; -- cgit v1.2.3-70-g09d2 From 804b2e58f81000f883f75d79a66676ce545fbdc8 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sun, 31 Mar 2019 16:02:40 +0200 Subject: rebuild --- site/public/about/faq/index.html | 60 ++++++++++++++++++++++ site/public/about/index.html | 52 ++++++++++++------- .../datasets/50_people_one_question/index.html | 14 ++--- site/public/datasets/brainwash/index.html | 16 +++--- site/public/datasets/celeba/index.html | 14 ++--- site/public/datasets/cofw/index.html | 16 +++--- site/public/datasets/duke_mtmc/index.html | 18 ++++--- site/public/datasets/hrt_transgender/index.html | 16 +++--- site/public/datasets/lfw/index.html | 16 +++--- site/public/datasets/market_1501/index.html | 14 ++--- site/public/datasets/pipa/index.html | 14 ++--- site/public/datasets/uccs/index.html | 18 ++++--- site/public/datasets/viper/index.html | 16 +++--- 13 files changed, 199 insertions(+), 85 deletions(-) create mode 100644 site/public/about/faq/index.html diff --git a/site/public/about/faq/index.html b/site/public/about/faq/index.html new file mode 100644 index 00000000..738759ab --- /dev/null +++ b/site/public/about/faq/index.html @@ -0,0 +1,60 @@ + + + + MegaPixels + + + + + + + + + + + + +

+ +

MegaPixels

+ +

+ Datasets + About +

+ +

FAQs

[ page under development ]

+ +

+ + + + + \ No newline at end of file diff --git a/site/public/about/index.html b/site/public/about/index.html index 3c270ee1..5b98ab34 100644 --- a/site/public/about/index.html +++ b/site/public/about/index.html @@ -30,34 +30,50 @@

(PAGE UNDER DEVELOPMENT)

Collectively, facial recognition datasets are now gathered "in the wild".

During the last year, hundreds of these facial analysis datasets created "in the wild" have been collected to understand how they contribute to a global supply chain of biometric data that is powering the global facial recognition industry.

The MegaPixels website is produced in partnership with Mozilla.

MegaPixels is an independent art and research project by Adam Harvey and Jules LaPlace investigating the ethics and individual privacy implications of publicly available face recognition datasets, and their role in industry and governmental expansion into biometric surveillance technologies.

The MegaPixels site is made possible with support from Mozilla

Adam Harvey

ahprojects.com

Jules LaPlace

asdf.us

MegaPixels.cc is an independent research project about publicly available face recognition datasets. This website is based, in part, on earlier installations and research project about facial recognition datasets in 2016-2018, in particular the MegaFace dataset. Since then it has evolved into a large-scale survey and analysis of publicly available face and person analysis dataset usage, geographies, and ethics.

An academic report and presentation on the findings is forthcoming. This site is published to make the research more accessible to a wider audience and to include visualizations and interactive features not possible in PDF publications. Continued research on MegaPixles is supported by a 1 year Researcher-in-Residence grant from Karlsruhe HfG.

When possible, and once thoroughly verified, data generated for MegaPixels will be made available for download on github.com/adamhrv/megapixels

Team

Adam Harvey: Concept, research, design, computer vision
Jules LaPlace: Information and systems architecture, data retrieval, web applications

Contributing Researchers

Berit Gilma: Dataset statistics and discovery
Beth (aka Ms. Celeb): Dataset usage verification and research
Mathana Stender: Commercial usage verification and research on LFW

Code and Libraries

Semantic Scholar for citation aggregation
Leaflet.js for maps
C3.js for charts
D3.js and ThreeJS for 3D visualizations
PDFMiner.Six and Pandas for research paper data analysis

Please direct questions, comments, or feedback to mastodon.social/@adamhrv