From 3330a165fb8375df508036ced42c053794588e2e Mon Sep 17 00:00:00 2001 From: braxtonex Date: Wed, 17 Jan 2018 11:13:13 -0600 Subject: [PATCH] File reorganization --- package.json | 1 + src/App.js | 150 ++++------------------------------------------ src/Reusables.js | 66 ++++++++++++++++++++ src/Statics.js | 68 +++++++++++++++++++++ src/Visualizer.js | 7 ++- 5 files changed, 154 insertions(+), 138 deletions(-) create mode 100644 src/Reusables.js create mode 100644 src/Statics.js diff --git a/package.json b/package.json index 5abf8a1..d450627 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "node-sass-chokidar": "0.0.3", "react": "^16.2.0", "react-dom": "^16.2.0", + "react-tippy": "^1.2.2", "react-transition-group": "^2.2.1", "shapefile": "^0.6.6", "topojson-client": "^3.0.0", diff --git a/src/App.js b/src/App.js index 8d14d70..5d640f5 100644 --- a/src/App.js +++ b/src/App.js @@ -1,18 +1,20 @@ import React, { Component } from 'react'; +import {merge} from 'lodash'; import './App.min.css'; import 'font-awesome/css/font-awesome.min.css'; import 'react-tippy/dist/tippy.css'; -import {merge} from 'lodash'; import * as d3 from 'd3'; import * as d3sc from 'd3-scale-chromatic'; import { Tooltip } from 'react-tippy'; -import Visualizer from './Visualizer.js'; -import {passFiles} from './Visualizer.js'; -import Card from './Card.js'; +import {Visualizer, passFiles} from './Visualizer.js'; +import {LPRCheckbox, NICheckbox, Modal} from './Reusables.js'; +import {lprStatics, niStatics, noteStatics} from './Statics.js'; import Legend from './Legend.js'; +import Card from './Card.js'; import {flags} from './flags.js'; -let titleNotes, playing, dataFlags; + +let playing, dataFlags; let yearSpan = [2005,2016]; export let lprScale = d3.scaleThreshold() .domain([0.05,0.1,0.25,0.75,1.5,4,7.5]) @@ -78,7 +80,7 @@ class App extends Component {
- Data: US Department of Homeland Security, {this.state.dataYear} @@ -107,7 +109,7 @@ class App extends Component {
- ) - } -} - -class LPRCheckbox extends Component { - render() { - const {checkboxItem,itemChecked,changeLPRCheckboxState} = this.props; - const {name, label, title} = checkboxItem; - return ( -
- -
- ) - } -} - -class NICheckbox extends Component { - render() { - const {checkboxItem,itemChecked,changeNICheckboxState} = this.props; - const {name, label, title} = checkboxItem; - return ( - - - - ) - } -} - d3.json('./map_geo.json', (err,geofile) => { if (err) { @@ -372,65 +310,9 @@ function makeMyData(year, radioset) { } App.defaultProps = { - lprItems: [ - { - name: "immediateRelative", - label: "Immediate Relative", - title: "Spouses, parents, and minor children (including those being adopted) of US citizens.
Accounts for ≈44.4% of LPRs annually." - }, - { - name: "familySponsored", - label: "Family-Sponsored", - title: "Unmarried adult children of US citizens and LPRs (and their minor children), as well as immediate relatives of LPRs (spouses, minor children, adult children (and their minor children), and adult siblings (and their minor children)).
Accounts for ≈21.0% of LPRs annually." - }, - { - name: "refugeeAsylee", - label: "Refugee & Asylee", - title: "Those who have been persecuted or fear they will be persecuted on the basis of race, religion, nationality, and/or membership in a social or political group, as well as their immediate relatives.
Accounts for ≈13.4% of LPRs annually." - }, - { - name: "employmentBased", - label: "Employment-Based", - title: "Those who emigrate for employment (priority workers, advanced professionals, skilled workers, etc.) and their spouses/minor children.
Accounts for ≈13.6% of LPRs annually." - }, - { - name: "diversityLottery", - label: "Diversity Lottery", - title: "Those who emigrate to the US from countries with relatively low levels of immigration under the Diversity Immigration Visa Program.
Accounts for ≈4.7% of LPRs annually." - }, - { - name: "otherLPR", - label: "Other", - title: "Others who qualify as a result of other special legislation extending LPR status to classes of individuals from certain countries and in certain situations.
Accounts for ≈2.9% of LPRs annually." - } - ], - niItems: [ - { - name: "temporaryVisitor", - label: "Temporary Visitor", - title: "Those visiting the US for pleasure (vacation, visiting family/friends, or for medical treatment) or business (attending business meetings and conferences/conventions).
Accounts for ≈90.1% of NIs annually." - }, - { - name: "temporaryWorker", - label: "Temporary Worker", - title: "Temporary workers/trainees (intracompany transfers, foreign reporters) and their spouses/minor children.
Accounts for ≈3.3% of NIs annually." - }, - { - name: "studentExchange", - label: "Student & Exchange", - title: "Students and exchange visitors (scholars, physicians, teachers, etc.) and their spouses/minor children.
Accounts for ≈4.8% of NIs annually." - }, - { - name: "diplomatRep", - label: "Diplomat & Representative", - title: "Diplomats and representatives (ambassadors, public ministers, diplomats, consular officers, and accompanying attendants/personal employees) and their spouses/minor children.
Accounts for ≈0.6% of NIs annually." - }, - { - name: "otherNI", - label: "Other", - title: "Those in immediate transit through the US, commuter students, fiancé(e)s and spouses of US citizens, etc.
Accounts for ≈1.2% of NIs annually." - } - ], + lprItems: lprStatics, + niItems: niStatics, + noteItems: noteStatics, yearBounds: yearSpan, lprThresholds: lprScale.domain(), lprColors: lprScale.range(), @@ -439,10 +321,4 @@ App.defaultProps = { datums } -titleNotes = { - lprMsg: "Lawful permanent residents (LPRs, often referred to as “immigrants” or “green card holders”) are non-citizens who are lawfully authorized to live permanently in the US. LPRs may apply to become US citizens if they meet certain eligibility requirements. LPRs do not include foreign nationals granted temporary admission to the US, such as tourists and temporary workers (including H1B visa holders). Data organized by country of birth.
3-year average: ≈1.08 million/year.

For more information, visit https://goo.gl/dN78yY.", - niMsg: "Nonimmigrants (NIs) are foreign nationals granted temporary admission into the US for reasons including tourism and business trips, academic/vocational study, temporary employment, and to act as a representative of a foreign government or international organization. NIs are authorized to enter the country for specific purposes and defined periods of time, which are prescribed by their class of admission. Data organized by country of citizenship.
3-year average: ≈76.1 million/year.

For more information visit https://goo.gl/LJLYzc.", - genMsg: "Data not shown for those with unknown country of birth/origin and for countries where total activity count was less than 10 people.
dw = Data withheld to limit disclosures, per government sources." -} - export default App; diff --git a/src/Reusables.js b/src/Reusables.js new file mode 100644 index 0000000..4667342 --- /dev/null +++ b/src/Reusables.js @@ -0,0 +1,66 @@ +import React, { Component } from 'react'; +import { Tooltip } from 'react-tippy'; + +export class Modal extends Component { + render() { + return ( + + ) + } +} + +export class LPRCheckbox extends Component { + render() { + const {checkboxItem,itemChecked,changeLPRCheckboxState} = this.props; + const {name, label, title} = checkboxItem; + return ( +
+ +
+ ) + } +} + +export class NICheckbox extends Component { + render() { + const {checkboxItem,itemChecked,changeNICheckboxState} = this.props; + const {name, label, title} = checkboxItem; + return ( + + + + ) + } +} diff --git a/src/Statics.js b/src/Statics.js new file mode 100644 index 0000000..adfc8b0 --- /dev/null +++ b/src/Statics.js @@ -0,0 +1,68 @@ +import React, { Component } from 'react'; + +export let lprStatics = [ + { + name: "immediateRelative", + label: "Immediate Relative", + title: "Spouses, parents, and minor children (including those being adopted) of US citizens.
Accounts for ≈44.4% of LPRs annually." + }, + { + name: "familySponsored", + label: "Family-Sponsored", + title: "Unmarried adult children of US citizens and LPRs (and their minor children), as well as immediate relatives of LPRs (spouses, minor children, adult children (and their minor children), and adult siblings (and their minor children)).
Accounts for ≈21.0% of LPRs annually." + }, + { + name: "refugeeAsylee", + label: "Refugee & Asylee", + title: "Those who have been persecuted or fear they will be persecuted on the basis of race, religion, nationality, and/or membership in a social or political group, as well as their immediate relatives.
Accounts for ≈13.4% of LPRs annually." + }, + { + name: "employmentBased", + label: "Employment-Based", + title: "Those who emigrate for employment (priority workers, advanced professionals, skilled workers, etc.) and their spouses/minor children.
Accounts for ≈13.6% of LPRs annually." + }, + { + name: "diversityLottery", + label: "Diversity Lottery", + title: "Those who emigrate to the US from countries with relatively low levels of immigration under the Diversity Immigration Visa Program.
Accounts for ≈4.7% of LPRs annually." + }, + { + name: "otherLPR", + label: "Other", + title: "Others who qualify as a result of other special legislation extending LPR status to classes of individuals from certain countries and in certain situations.
Accounts for ≈2.9% of LPRs annually." + } + ]; + + export let niStatics = [ + { + name: "temporaryVisitor", + label: "Temporary Visitor", + title: "Those visiting the US for pleasure (vacation, visiting family/friends, or for medical treatment) or business (attending business meetings and conferences/conventions).
Accounts for ≈90.1% of NIs annually." + }, + { + name: "temporaryWorker", + label: "Temporary Worker", + title: "Temporary workers/trainees (intracompany transfers, foreign reporters) and their spouses/minor children.
Accounts for ≈3.3% of NIs annually." + }, + { + name: "studentExchange", + label: "Student & Exchange", + title: "Students and exchange visitors (scholars, physicians, teachers, etc.) and their spouses/minor children.
Accounts for ≈4.8% of NIs annually." + }, + { + name: "diplomatRep", + label: "Diplomat & Representative", + title: "Diplomats and representatives (ambassadors, public ministers, diplomats, consular officers, and accompanying attendants/personal employees) and their spouses/minor children.
Accounts for ≈0.6% of NIs annually." + }, + { + name: "otherNI", + label: "Other", + title: "Those in immediate transit through the US, commuter students, fiancé(e)s and spouses of US citizens, etc.
Accounts for ≈1.2% of NIs annually." + } + ]; + + export let noteStatics = { + lprMsg: "Lawful permanent residents (LPRs, often referred to as “immigrants” or “green card holders”) are non-citizens who are lawfully authorized to live permanently in the US. LPRs may apply to become US citizens if they meet certain eligibility requirements. LPRs do not include foreign nationals granted temporary admission to the US, such as tourists and temporary workers (including H1B visa holders). Data organized by country of birth.
3-year average: ≈1.08 million/year.

For more information, visit https://goo.gl/dN78yY.", + niMsg: "Nonimmigrants (NIs) are foreign nationals granted temporary admission into the US for reasons including tourism and business trips, academic/vocational study, temporary employment, and to act as a representative of a foreign government or international organization. NIs are authorized to enter the country for specific purposes and defined periods of time, which are prescribed by their class of admission. Data organized by country of citizenship.
3-year average: ≈76.1 million/year.

For more information visit https://goo.gl/LJLYzc.", + genMsg: "Data not shown for those with unknown country of birth/origin and for countries where total activity count was less than 10 people.
dw = Data withheld to limit disclosures, per government sources." + }; diff --git a/src/Visualizer.js b/src/Visualizer.js index 1f20a0f..34971bd 100644 --- a/src/Visualizer.js +++ b/src/Visualizer.js @@ -19,9 +19,11 @@ export function passFiles(datums, map) { //** } function initializeD3(worldMap) { + //create d3 map container const reactContainer = document.getElementById('D3-holder'); width = reactContainer.offsetWidth-2; height = reactContainer.offsetHeight-2; + svg = d3.select('#d3-mount-point').append('svg') .attr('id', 'immigration-svg') .attr('height', height) @@ -32,17 +34,20 @@ function initializeD3(worldMap) { .on('zoom',function() { svg.attr('transform',d3.event.transform) })).append('g'); //end zoom functionality + g = svg.append('g'); + projection = d3geoproj.geoCylindricalStereographic() .scale(165) .rotate([-11,0]) .center([0,22]) .translate([width/2,height/2]); + geoPath = d3.geoPath() .projection(projection); } -class Visualizer extends Component { +export class Visualizer extends Component { shouldComponentUpdate() { return false;