From f5fe5619aba0317088e63bdd20404dc7cbdb5e7b Mon Sep 17 00:00:00 2001 From: Dave Landry Date: Mon, 22 Apr 2019 15:46:21 -0400 Subject: [PATCH 1/4] updates logiclayer to v0.3.19 --- package-lock.json | 49 ++++++++++++++++++++++++++++++++--------------- package.json | 2 +- 2 files changed, 35 insertions(+), 16 deletions(-) diff --git a/package-lock.json b/package-lock.json index 866efe8..8a40770 100644 --- a/package-lock.json +++ b/package-lock.json @@ -333,9 +333,9 @@ } }, "@datawheel/canon-logiclayer": { - "version": "0.3.18", - "resolved": "https://registry.npmjs.org/@datawheel/canon-logiclayer/-/canon-logiclayer-0.3.18.tgz", - "integrity": "sha512-SaUfHGfSrciC8A3MWxGHnCUfIc3cjCjwxsdd3WOIRpuC5Dt8cY3/D89BO7ey/2Va9s5wddgt0BzhkB+ST90rtg==", + "version": "0.3.19", + "resolved": "https://registry.npmjs.org/@datawheel/canon-logiclayer/-/canon-logiclayer-0.3.19.tgz", + "integrity": "sha512-89XmOxr48uR6Q9XH1mDji4vMq7EWcHSyLs885M8kBhzMGYqZtp/3b0Y0QoG+znm8xPKgObCW+klIw8Xz1yeALw==", "requires": { "d3-array": "^1.2.1", "d3-collection": "^1.0.4", @@ -5063,7 +5063,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -5081,11 +5082,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5098,15 +5101,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -5209,7 +5215,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -5219,6 +5226,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5231,17 +5239,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -5258,6 +5269,7 @@ "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -5330,7 +5342,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -5340,6 +5353,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -5415,7 +5429,8 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -5445,6 +5460,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -5462,6 +5478,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -5500,11 +5517,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.0.3", - "bundled": true + "bundled": true, + "optional": true } } }, @@ -11229,7 +11248,7 @@ }, "pify": { "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=" } } diff --git a/package.json b/package.json index 7988ea6..c60dd7f 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "@blueprintjs/labs": "^0.14.4", "@blueprintjs/table": "^1.31.3", "@datawheel/canon-core": "^0.16.32", - "@datawheel/canon-logiclayer": "^0.3.18", + "@datawheel/canon-logiclayer": "^0.3.19", "@datawheel/canon-vizbuilder": "^0.2.11", "d3plus-format": "^0.1.4", "flickr-sdk": "^3.8.0", From 9fb9d4790b79e7d7c3bf8609bf9820a96e62333a Mon Sep 17 00:00:00 2001 From: Dave Landry Date: Mon, 22 Apr 2019 15:47:35 -0400 Subject: [PATCH 2/4] updates d3plus dependencies (faster tooltips) --- package-lock.json | 47 +++++++++++++++++++++++++++-------------------- 1 file changed, 27 insertions(+), 20 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8a40770..dc3a6b5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3427,16 +3427,16 @@ } }, "d3plus-axis": { - "version": "0.4.4", - "resolved": "https://registry.npmjs.org/d3plus-axis/-/d3plus-axis-0.4.4.tgz", - "integrity": "sha512-Cy8k59MBwyQOIGkpYrSdziNuYIhL5Rwew1S+Con2RBowYDFbcLhmT6s+L0WNCKeybas24eT6G68HBOduNoh6dg==", + "version": "0.4.5", + "resolved": "https://registry.npmjs.org/d3plus-axis/-/d3plus-axis-0.4.5.tgz", + "integrity": "sha512-k01TFIOgAV7nRDYWawsT4+SIAVJetnlWo+rqdf1Hf+GlAQGUFwffZyARt0e8vz52SG4WvU2OxuG3XbaZAl4/6Q==", "requires": { "d3-array": "^1.2.4", "d3-scale": "^2.1.2", "d3-selection": "^1.3.2", "d3-transition": "^1.1.3", "d3plus-common": "^0.6.45", - "d3plus-format": "^0.1.4", + "d3plus-format": "^0.1.7", "d3plus-shape": "^0.16.3", "d3plus-text": "^0.9.43" } @@ -3484,9 +3484,9 @@ } }, "d3plus-format": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/d3plus-format/-/d3plus-format-0.1.4.tgz", - "integrity": "sha512-GdMuvsbL1XCX3itxXdxJgnc5czFj1qNwR4t4HUIi0Fcczp5FEs+090sWlOOOxB50+CGZI8lb+B54Ez8niX5Zdw==", + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/d3plus-format/-/d3plus-format-0.1.7.tgz", + "integrity": "sha512-Lg2PUdkt0nkX/4WQyyRmLcupg0o5DPvLsfu/V++Yv00SIMRe+1ejiArRHAvcEMr3b6JfEJvsRRqtYlTzmwvLTg==", "requires": { "d3-format": "^1.3.0" } @@ -3640,19 +3640,26 @@ } }, "d3plus-tooltip": { - "version": "0.3.6", - "resolved": "https://registry.npmjs.org/d3plus-tooltip/-/d3plus-tooltip-0.3.6.tgz", - "integrity": "sha512-uz2KnJpIfvfOpcHxv/OHVRa8arce6htzmOiuFdaeNqwLgjTGUFMWDTCvgSVlSVFyXfU21y5D3IPjFEzl0YftIw==", + "version": "0.3.7", + "resolved": "https://registry.npmjs.org/d3plus-tooltip/-/d3plus-tooltip-0.3.7.tgz", + "integrity": "sha512-vP9zkcaRbFf46/CB0zSClCfgkRqBBwSwKK3dsApE1NmIy3oYxDlXUOP5+19S8SCEyGFb+Ksxu9IdOqS8lphGnQ==", "requires": { - "d3-selection": "^1.3.2", - "d3plus-common": "^0.6.44", - "popper.js": "^1.14.6" + "d3-selection": "^1.4.0", + "d3plus-common": "^0.6.45", + "popper.js": "^1.15.0" + }, + "dependencies": { + "popper.js": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz", + "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==" + } } }, "d3plus-viz": { - "version": "0.12.16", - "resolved": "https://registry.npmjs.org/d3plus-viz/-/d3plus-viz-0.12.16.tgz", - "integrity": "sha512-+UpwnnYZzppyPAyPzYFRDcnVMXfACgXHNB4yNPE1fBlTNHaS1mfs+o2+PtHDLmNxw5mWYB8aVcrW3/npG+6v0g==", + "version": "0.12.20", + "resolved": "https://registry.npmjs.org/d3plus-viz/-/d3plus-viz-0.12.20.tgz", + "integrity": "sha512-U9TBM9f4Ooje1T8zChq/rUD/NkWWD5mNLNsM9M0ICx5tgQr+2vq/h0qFnl6WUrC5gZZuHVEbput+2vuLojbDww==", "requires": { "d3-array": "^1.2.4", "d3-brush": "^1.0.6", @@ -3663,16 +3670,16 @@ "d3-selection": "^1.4.0", "d3-transition": "^1.2.0", "d3-zoom": "^1.7.3", - "d3plus-axis": "^0.4.4", + "d3plus-axis": "^0.4.5", "d3plus-color": "^0.6.4", "d3plus-common": "^0.6.45", "d3plus-export": "^0.3.13", "d3plus-form": "^0.2.6", - "d3plus-format": "^0.1.4", - "d3plus-legend": "^0.8.20", + "d3plus-format": "^0.1.7", + "d3plus-legend": "^0.8.22", "d3plus-text": "^0.9.43", "d3plus-timeline": "^0.4.11", - "d3plus-tooltip": "^0.3.6", + "d3plus-tooltip": "^0.3.7", "lrucache": "^1.0.3" } }, From e8686678a25a10075f49e68e3c512883b7f5bcf7 Mon Sep 17 00:00:00 2001 From: Dave Landry Date: Mon, 22 Apr 2019 16:28:30 -0400 Subject: [PATCH 3/4] allows stats to appear without a value --- app/components/Stat.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/Stat.jsx b/app/components/Stat.jsx index d4db795..67413dc 100644 --- a/app/components/Stat.jsx +++ b/app/components/Stat.jsx @@ -29,8 +29,8 @@ export default class Stat extends Component { {year} } -
30 ? "font-sm" : "font-md" } ${ themeClass }`}> - { value }{" "} +
30 ? "font-sm" : "font-md" } ${ themeClass }`}> + { value ? `${value} ` : null } { qualifier && 20 ? "font-xs" : "font-sm" From 74ff9a669d096e668ac45bd8dbd3f5c4f08e43db Mon Sep 17 00:00:00 2001 From: Dave Landry Date: Mon, 22 Apr 2019 16:28:46 -0400 Subject: [PATCH 4/4] redesigns profile intro charts --- .../Profile/sections/about/Introduction.css | 18 ++ .../Profile/sections/about/Introduction.jsx | 260 ++++++++++-------- 2 files changed, 166 insertions(+), 112 deletions(-) create mode 100644 app/pages/Profile/sections/about/Introduction.css diff --git a/app/pages/Profile/sections/about/Introduction.css b/app/pages/Profile/sections/about/Introduction.css new file mode 100644 index 0000000..38c3a17 --- /dev/null +++ b/app/pages/Profile/sections/about/Introduction.css @@ -0,0 +1,18 @@ +.top-stats { + display: flex; + flex-direction: column; + justify-content: space-between; + & .stat { + margin-top: 20px; + &:first-child { + margin-top: 0; + } + & .stat-value { + margin-bottom: 0; + } + } + & .viz { + flex: none; + margin: 0 !important; + } +} diff --git a/app/pages/Profile/sections/about/Introduction.jsx b/app/pages/Profile/sections/about/Introduction.jsx index b9d1be7..bf8fae7 100644 --- a/app/pages/Profile/sections/about/Introduction.jsx +++ b/app/pages/Profile/sections/about/Introduction.jsx @@ -12,6 +12,8 @@ import zipcodes from "utils/zipcodes"; import Stat from "components/Stat"; import styles from "style.yml"; +import "./Introduction.css"; + const formatRaceName = d => { d = d.replace("Alone", "").replace("Black", "black").replace("White", "white").replace("Asian", "asian"); if (d.trim() === "Some Other Race") return d.toLowerCase(); @@ -120,7 +122,7 @@ class Introduction extends SectionColumns { return ( Introduction -
+

{level === "zip" ? `Zip code ${population[0].Geography}` : population[0].Geography} has a population of {formatAbbreviate(population[0].Population)} people{meta.level === "county" ? "" : which makes it the {formatRankSuffix(currentLocationRankData.populationRank)} largest of {rankData.length} {formatLevelNames(meta.level)} in Wayne County} {}, with the life expectancy of {lifeExpectancyAvailable ? formatAbbreviate(lifeExpectancy[0]["Life Expectancy"]) : "N/A"} {lifeExpectancyAvailable ? onCityOrZipLevel ? (in {lifeExpectancy[0].Geography}) : "" : ""}. @@ -130,144 +132,178 @@ class Introduction extends SectionColumns {

{populationByRaceAndEthnicityAvailable ?

- Most of the population in {topRaceAndEthnicity[0].Geography} is {formatEthnicityName(topRaceAndEthnicity[0].Ethnicity)} {} - {formatRaceName(topRaceAndEthnicity[0].Race)} ({formatAbbreviate(topRaceAndEthnicity[0].share)}%), followed by {} - {formatEthnicityName(topRaceAndEthnicity[1].Ethnicity)} {formatRaceName(topRaceAndEthnicity[1].Race)} - ({formatAbbreviate(topRaceAndEthnicity[1].share)}%). + {formatAbbreviate(topRaceAndEthnicity[0].share)}% of the population in {topRaceAndEthnicity[0].Geography} is {formatRaceName(topRaceAndEthnicity[0].Race)} ({formatEthnicityName(topRaceAndEthnicity[0].Ethnicity)}), followed by {formatAbbreviate(topRaceAndEthnicity[1].share)}% {formatRaceName(topRaceAndEthnicity[1].Race)} ({formatEthnicityName(topRaceAndEthnicity[1].Ethnicity)}).

: null}

In {level === "zip" ? `Zip code ${currentLocationRankData.name}` : currentLocationRankData.name}, the median household income is {formatAbbreviate(currentLocationRankData.medianIncome)}{meta.level === "county" ? "." : , which ranks it at {formatRankSuffix(currentLocationRankData.medianIncomeRank)} largest of all {formatLevelNames(meta.level)} in Wayne County.}

Social and economic factors, such as income, education, and access to health care, impact health outcomes for all Americans. For example, in many low income areas in the country, there are higher rates of chronic diseases, like high blood pressure and diabetes. The summary to the right highlights some of the social and health conditions for {population[0].Geography}.

-
-
- + `${formatEthnicityName(d.Ethnicity)}, ${d.Race.replace("Alone", "")}`, + label: d => `${d.Race.replace("Alone", "")} (${formatEthnicityName(d.Ethnicity)})`, time: "Year", - title: d => `Population by Race and Ethnicity in ${d[0].Geography}`, tooltipConfig: {tbody: [["Year", d => d.Year], ["Share", d => formatPercentage(d.share)], [titleCase(meta.level), d => d.Geography]]} }} dataFormat={resp => formatRaceAndEthnicityData(resp.data)[0]} /> +
+
+ +
+ + + formatGeomapZipLabel(d, meta, zipToPlace), + ocean: "transparent", + tiles: false, + time: "Year", + tooltipConfig: {tbody: [["Year", d => d.Year], ["Distress Score", d => `${formatAbbreviate(d["Distress Score"])} percentile`]]}, + topojson: "/topojson/zipcodes.json", + topojsonId: d => d.properties.ZCTA5CE10, + topojsonFilter: d => filteredZips.includes(d.properties.ZCTA5CE10), + zoom: false + }} + dataFormat={resp => resp.data} + /> + +
+ +
+ + formatPercentage(d, true)}, + // having high disease prevalency is bad + color: [ + styles["danger-light"], + styles.danger, + styles["danger-dark"] + ] + }, + label: d => d["Zip Region"], + ocean: "transparent", + tiles: false, + time: "End Year", + tooltipConfig: {tbody: [["Year", d => d["End Year"]], ["Condition", "Poor Physical Health 14 Or More Days"], ["Prevalence", d => `${formatPercentage(d["Poor Physical Health 14 Or More Days"], true)}`]]}, + topojson: "/topojson/zipregions.json", + topojsonId: d => d.properties.REGION, + topojsonFilter: () => true, + zoom: false + }} + dataFormat={resp => resp.data} + /> +
- formatGeomapZipLabel(d, meta, zipToPlace), - time: "Year", - title: `Distress Score by Zip Codes in ${meta.name}`, - tooltipConfig: {tbody: [["Year", d => d.Year], ["Distress Score", d => `${formatAbbreviate(d["Distress Score"])} percentile`]]}, - topojson: "/topojson/zipcodes.json", - topojsonId: d => d.properties.ZCTA5CE10, - topojsonFilter: d => filteredZips.includes(d.properties.ZCTA5CE10) - }} - dataFormat={resp => resp.data} - />
- formatGeomapTractLabel(d, meta, tractToPlace), - time: "End Year", - title: `Life Expectancy by Census Tracts in ${meta.level === "county" || meta.level === "tract" ? "Wayne County" : meta.name}`, - tooltipConfig: {tbody: [["Year", d => d["End Year"]], ["Life Expectancy", d => d["Life Expectancy"]]]}, - topojson: "/topojson/tract.json", - topojsonFilter: d => formatTopojsonFilter(d, meta, childrenTractIds) - }} - dataFormat={resp => { - let filteredChildrenGeography = []; - if (meta.level === "county" || meta.level === "tract") { - filteredChildrenGeography = resp.data; - } - else { - resp.data.forEach(d => { - if (childrenTractIds.includes(d["ID Geography"])) filteredChildrenGeography.push(d); - }); - } - return filteredChildrenGeography; - }} - /> - formatPercentage(d, true)}, - // having high disease prevalency is bad - color: [ - styles["danger-light"], - styles.danger, - styles["danger-dark"] - ] - }, - label: d => d["Zip Region"], - time: "End Year", - title: "Poor Mental Health by Zip Regions in Wayne County", - tooltipConfig: {tbody: [["Year", d => d["End Year"]], ["Condition", "Poor Mental Health 14 Or More Days"], ["Prevalence", d => `${formatPercentage(d["Poor Mental Health 14 Or More Days"], true)}`]]}, - topojson: "/topojson/zipregions.json", - topojsonId: d => d.properties.REGION, - topojsonFilter: () => true - }} - dataFormat={resp => resp.data} - /> +
+ + formatGeomapTractLabel(d, meta, tractToPlace), + ocean: "transparent", + tiles: false, + time: "End Year", + tooltipConfig: {tbody: [["Year", d => d["End Year"]], ["Life Expectancy", d => d["Life Expectancy"]]]}, + topojson: "/topojson/tract.json", + topojsonFilter: d => formatTopojsonFilter(d, meta, childrenTractIds), + zoom: false + }} + dataFormat={resp => { + let filteredChildrenGeography = []; + if (meta.level === "county" || meta.level === "tract") { + filteredChildrenGeography = resp.data; + } + else { + resp.data.forEach(d => { + if (childrenTractIds.includes(d["ID Geography"])) filteredChildrenGeography.push(d); + }); + } + return filteredChildrenGeography; + }} + /> +
- formatPercentage(d, true)}, - // having high disease prevalency is bad - color: [ - styles["danger-light"], - styles.danger, - styles["danger-dark"] - ] - }, - label: d => d["Zip Region"], - time: "End Year", - title: "Poor Physical Health by Zip Regions in Wayne County", - tooltipConfig: {tbody: [["Year", d => d["End Year"]], ["Condition", "Poor Physical Health 14 Or More Days"], ["Prevalence", d => `${formatPercentage(d["Poor Physical Health 14 Or More Days"], true)}`]]}, - topojson: "/topojson/zipregions.json", - topojsonId: d => d.properties.REGION, - topojsonFilter: () => true - }} - dataFormat={resp => resp.data} - /> +
+ + formatPercentage(d, true)}, + // having high disease prevalency is bad + color: [ + styles["danger-light"], + styles.danger, + styles["danger-dark"] + ] + }, + label: d => d["Zip Region"], + ocean: "transparent", + tiles: false, + time: "End Year", + tooltipConfig: {tbody: [["Year", d => d["End Year"]], ["Condition", "Poor Mental Health 14 Or More Days"], ["Prevalence", d => `${formatPercentage(d["Poor Mental Health 14 Or More Days"], true)}`]]}, + topojson: "/topojson/zipregions.json", + topojsonId: d => d.properties.REGION, + topojsonFilter: () => true, + zoom: false + }} + dataFormat={resp => resp.data} + /> +
);