diff --git a/dev.html b/dev.html
index 0f25a70dbc..1ea6e16983 100644
--- a/dev.html
+++ b/dev.html
@@ -2,7 +2,13 @@
this.onChartHover(i)}
+ onMouseOut={() => this.onChartHover(null)}
+ >
+
+ {chart}
+
+ { showDescriptionColumn &&
+
+
+ {chartConfig.title}
+
+
+ {chartConfig.description}
+
+
+ }
+
+
+
+ {charts}
+
+
+
+ { showDescriptionHover &&
+
+
+ {this.props.chartsConfig[this.state.hoveredChartId].title}
+
+
+ {this.props.chartsConfig[this.state.hoveredChartId].description}
+
+
+ }
+
+
Legend
+
+ {
+ legendData.map(
+ value =>
+ (
+
),
+ )
+ }
+
+
+
Map style
+
+ Dot distribution
+
+
+ Choropleth
+
+
+
+ {this.props.label}
+
+
+ {numberWithCommas(val)}
+
+
+
+
+ {hoverInfo.locationName}
+
+ {
+ Object.entries(hoverInfo.values).map(
+ (val, i) =>
{`${val[1]} ${val[0]}`}
,
+ )
+ }
+
+ Click for real time plotting {this.props.modeledFipsList.includes(hoverInfo.FIPS) ? '\nand simulations' : ''}
+
+
+ );
+ }
+ return null;
+ }
+
+ render() {
+ if (Object.keys(this.props.jsonByLevel.country).length && !this.choroCountyGeoJson) {
+ this.choroCountyGeoJson = addDataToGeoJsonBase(
+ this.props.jsonByLevel.county,
+ );
+ }
+ const modeledCountyGeoJson = filterCountyGeoJson(this.props.modeledFipsList);
+
+ const colors = {
+ 0: '#FFF',
+ 5: '#F7F787',
+ 20: '#EED322',
+ 50: '#E6B71E',
+ 100: '#DA9C20',
+ 500: '#CA8323',
+ 1000: '#B86B25',
+ 2500: '#A25626',
+ 5000: '#8B4225',
+ 10000: '#850001',
+ };
+ const colorsAsList = Object.entries(colors).map(item => [+item[0], item[1]]).flat();
+
+ return (
+
+ {
+ this.setState({ viewport });
+ }}
+ onHover={this.onHover}
+ onClick={this.onClick}
+ dragRotate={false}
+ touchRotate={false}
+ >
+ {this.renderPopup()}
+
+
+
+
+ {/* Outline a set of counties */}
+
+
+
+
+ );
+ }
+}
+
+IllinoisMapChart.propTypes = {
+ jsonByLevel: PropTypes.object.isRequired,
+ modeledFipsList: PropTypes.array.isRequired,
+ fetchTimeSeriesData: PropTypes.func.isRequired,
+};
+
+export default IllinoisMapChart;
diff --git a/src/Covid19Dashboard/PlotChart/PlotChart.less b/src/Covid19Dashboard/PlotChart/PlotChart.less
new file mode 100644
index 0000000000..a587b3e919
--- /dev/null
+++ b/src/Covid19Dashboard/PlotChart/PlotChart.less
@@ -0,0 +1,31 @@
+.plot-chart__title {
+ text-align: center;
+ font-weight: bold;
+}
+
+.plot-chart__y-title {
+ text-anchor: middle;
+}
+
+.plot-chart .popup__mask {
+ padding-top: 10vh;
+}
+
+.plot-chart .popup__box {
+ width: 80%;
+ height: 80vh;
+}
+
+.plot-chart .popup__message {
+ height: calc(100% - 100px);
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.plot-chart__tooltip {
+ padding: 10px 10px;
+ background-color: #fff;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+}
diff --git a/src/Covid19Dashboard/PlotChart/index.jsx b/src/Covid19Dashboard/PlotChart/index.jsx
new file mode 100644
index 0000000000..871860a63d
--- /dev/null
+++ b/src/Covid19Dashboard/PlotChart/index.jsx
@@ -0,0 +1,340 @@
+import moment from 'moment';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import {
+ LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
+} from 'recharts';
+
+import Spinner from '../../components/Spinner';
+import { numberWithCommas, downloadFromGuppy } from '../dataUtils.js';
+import './PlotChart.less';
+
+
+class PlotChartAxisTick extends React.Component {
+ render() {
+ // type is one of ['date', 'string', 'number']
+ const { x, y, payload, axis, type } = this.props;
+
+ let formattedValue = payload.value;
+ if (type === 'date') {
+ formattedValue = `${moment(formattedValue).month() + 1}/${moment(formattedValue).date()}`;
+ } else if (type === 'number') {
+ formattedValue = numberWithCommas(formattedValue);
+ }
+ // else { // type === 'string'
+ // // TODO: make maxLength configurable per chart to allow truncating labels
+ // const maxLength = ?;
+ // formattedValue = formattedValue.slice(0, maxLength)
+ // + (formattedValue.length > maxLength ? '.' : '');
+ // }
+
+ return (
+
+
+ {formattedValue}
+
+
+ );
+ }
+}
+
+PlotChartAxisTick.propTypes = {
+ x: PropTypes.number.isRequired,
+ y: PropTypes.number.isRequired,
+ payload: PropTypes.object.isRequired,
+ axis: PropTypes.string.isRequired,
+ type: PropTypes.string.isRequired,
+};
+
+function getDates(startDate, endDate, days) {
+ const dates = [];
+ let currentDate = moment(startDate);
+ const endingDate = moment(endDate);
+ const addDaysToDate = (date) => {
+ const newDate = moment(date);
+ newDate.add(days, 'days');
+ return newDate;
+ };
+ while (currentDate.isSameOrBefore(endingDate)) {
+ dates.push(currentDate.utc().format('YYYY-MM-DD HH:mm:ssZ'));
+ currentDate = addDaysToDate(currentDate);
+ }
+ return dates;
+}
+
+function formatChartDataFromProps(plots) {
+ const dateToData = {};
+ if (!plots || !plots.length) {
+ return dateToData;
+ }
+ plots.forEach((plot) => {
+ Object.entries(plot.data).forEach((e) => {
+ const dateVal = e[0];
+ const value = Number(e[1]);
+ if (!(dateVal in dateToData)) {
+ dateToData[dateVal] = { date: dateVal };
+ }
+ dateToData[dateVal][plot.name] = value;
+ });
+ });
+ let sortedData = Object.values(dateToData);
+ sortedData = sortedData.sort((a, b) => moment(a.date) - moment(b.date));
+ return {
+ data: sortedData,
+ ticks: getDates(sortedData[0].date, sortedData[sortedData.length - 1].date, 7),
+ };
+}
+
+// 10 colors generated with
+// https://medialab.github.io/iwanthue/
+// Intense + colorblind option + hard (force vector)
+const COLORS = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'];
+
+class PlotChart extends PureComponent { // eslint-disable-line react/no-multi-comp
+ state = {
+ width: Object.fromEntries(
+ Object.entries(this.props.plots).map((e) => {
+ const value = e[1];
+ return [value.name, 1];
+ }),
+ ),
+ guppyData: [],
+ };
+
+ componentDidMount() {
+ if (!this.props.guppyConfig) {
+ return;
+ }
+
+ // fetch data from Guppy if the component has a guppyConfig
+ let filter = {};
+ if (typeof this.props.guppyConfig.filters !== 'undefined') {
+ filter = this.props.guppyConfig.filters;
+ }
+ const fields = [this.props.guppyConfig.xAxisProp, this.props.guppyConfig.yAxisProp];
+ downloadFromGuppy(this.props.guppyConfig.dataType, filter, fields)
+ .then((res) => {
+ if (res.data && res.data.error) {
+ console.error(`Guppy error while fetching chart data: ${res.data.error}`); // eslint-disable-line no-console
+ } else {
+ this.setState({ guppyData: res.data });
+ }
+ });
+ }
+
+ getGuppyBarChartComponent = (data) => {
+ const { xTitle, yTitle, layout, barColor, guppyConfig } = this.props;
+ if (!data.length) {
+ return null;
+ }
+ return (
+ [numberWithCommas(value), yTitle || 'Value']
+ }
+ />
+ );
+ }
+
+ getLineChartComponent = (chartData, width) => {
+ if (!Object.keys(this.props.plots).length) {
+ return null;
+ }
+ return (
+ );
+ }
+
+ formatChartDataFromGuppy = (guppyData) => {
+ let data = guppyData.filter(
+ e => (!!e[this.props.guppyConfig.xAxisProp] && !!e[this.props.guppyConfig.yAxisProp]),
+ ).sort( // sort in descending order
+ (a, b) => (
+ a[this.props.guppyConfig.yAxisProp] > b[this.props.guppyConfig.yAxisProp] ? -1 : 1
+ ),
+ );
+ if (this.props.maxItems) {
+ data = data.slice(0, this.props.maxItems);
+ }
+ return data;
+ }
+
+ // change the width of line based on the mouse over the legend
+ handleMouseEnter = (o) => {
+ const { dataKey } = o;
+ const { width } = this.state;
+
+ this.setState({
+ width: { ...width, [dataKey]: 2 },
+ });
+ }
+
+ handleMouseLeave = (o) => {
+ const { dataKey } = o;
+ const { width } = this.state;
+
+ this.setState({
+ width: { ...width, [dataKey]: 1 },
+ });
+ }
+
+ renderTooltip = (props) => {
+ const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+ const date = moment(props.label);
+ const nColumns = Math.ceil(props.payload.length / 5); // up to 5 items per column
+ return (
+
+
{monthNames[date.month()]} {date.date()}, {date.year()}
+
+ {
+ props.payload.map((data, i) => (
+
+ {data.name}: {numberWithCommas(data.value)}
+
+ ))
+ }
+
+
+
+ {this.props.title}
+
+ {component ?
+
+ {component}
+
+ :
+ }
+
: [ , ],
+ simulations: {
+ : { title (str, optional), description (str, optional) }
+ }
+ }
+}
+```
+
+Where each carousel configuration is:
+```
+[ , ]
+```
+
+And each chart configuration is:
+```
+{
+ title (str),
+ description (str, optional),
+ xTitle (str, optional),
+ yTitle (str, optional),
+ type (str): one of [lineChart, barChart, image],
+ prop (str, optional): name of a Covid19Dashboard property
+ path (str, optional): if type==image, path can specified instead of prop
+ layout (str, optional): one of [vertical, horizontal] for bar charts,
+ maxItems (int, optional): for bar charts,
+ barColor (str, optional): for bar charts,
+ guppyConfig (optional): {
+ dataType (str),
+ xAxisProp (str),
+ yAxisProp (str),
+ filters (guppy filter object, optional)
+ }
+}
+```
+
+Available charts:
+- `type: "image"` and `path: "path/to/image"`
+- `type: "image"` and `prop: name of Covid19Dashboard prop containing the path to the image`
+- `type: "lineChart"` and `prop: name of Covid19Dashboard prop containing the data`
+- `type: "barChart"` and `guppyConfig`
diff --git a/src/Covid19Dashboard/ReduxCovid19Dashboard.js b/src/Covid19Dashboard/ReduxCovid19Dashboard.js
new file mode 100644
index 0000000000..08c5829d78
--- /dev/null
+++ b/src/Covid19Dashboard/ReduxCovid19Dashboard.js
@@ -0,0 +1,105 @@
+import { connect } from 'react-redux';
+import Covid19Dashboard from '../Covid19Dashboard';
+
+import { covid19DashboardConfig } from '../localconf';
+import { readMultiColumnTSV, readQuotedList } from './dataUtils.js';
+
+
+async function handleDashboardData(propName, data) {
+ switch (propName) {
+ case 'modeledFipsList':
+ return readQuotedList(data);
+ case 'jhuGeojsonLatest':
+ case 'jhuJsonByLevelLatest':
+ return JSON.parse(data);
+ case 'top10ChartData':
+ case 'idphDailyChartData':
+ return readMultiColumnTSV(data);
+ default:
+ console.warn(`I don't know how to handle dashboard data for "${propName}"`); // eslint-disable-line no-console
+ }
+ return null;
+}
+
+const fetchDashboardData = (propName, filePath) => {
+ const url = covid19DashboardConfig.dataUrl + filePath;
+ return dispatch => fetch(url, dispatch)
+ .then((r) => {
+ switch (r.status) {
+ case 200:
+ return r.text();
+ default:
+ console.error(`Got code ${r.status} when fetching dashboard data at "${url}"`); // eslint-disable-line no-console
+ }
+ return '';
+ })
+ .catch(
+ error => console.error(`Unable to fetch dashboard data at "${url}":`, error), // eslint-disable-line no-console
+ )
+ .then(data => handleDashboardData(propName, data))
+ .then(obj =>
+ ({
+ type: 'RECEIVE_DASHBOARD_DATA',
+ name: propName,
+ contents: obj,
+ }),
+ )
+ .then(msg => dispatch(msg));
+};
+
+const fetchTimeSeriesData = (dataLevel, locationId, title, withSimulation) => {
+ const url = `${covid19DashboardConfig.dataUrl}time_series/${dataLevel}/${locationId}.json`;
+ return (dispatch) => {
+ dispatch(
+ {
+ type: 'OPEN_TIME_SERIES_POPUP',
+ title,
+ },
+ );
+ return fetch(url, dispatch).then((r) => {
+ switch (r.status) {
+ case 200:
+ return r.text();
+ default:
+ console.error(`Got code ${r.status} when fetching time series data at "${url}"`); // eslint-disable-line no-console
+ }
+ return '';
+ })
+ .catch(
+ error => console.error(`Unable to fetch time series data at "${url}":`, error), // eslint-disable-line no-console
+ )
+ .then(data => ({
+ type: 'RECEIVE_TIME_SERIES_DATA',
+ title,
+ modeledCountyFips: withSimulation ? locationId : null,
+ contents: JSON.parse(data),
+ }),
+ )
+ .then(msg => dispatch(msg));
+ };
+};
+
+const closeLocationPopup = () => dispatch => dispatch(
+ { type: 'CLOSE_TIME_SERIES_POPUP' },
+);
+
+const mapStateToProps = state => ({
+ ...state.covid19Dashboard,
+});
+
+const mapDispatchToProps = dispatch => ({
+ fetchDashboardData: (propName, filePath) => dispatch(
+ fetchDashboardData(propName, filePath),
+ ),
+ fetchTimeSeriesData: (dataLevel, locationId, title, withSimulation = false) =>
+ dispatch(
+ fetchTimeSeriesData(dataLevel, locationId, title, withSimulation),
+ ),
+ closeLocationPopup: () => dispatch(
+ closeLocationPopup(),
+ ),
+});
+
+const ReduxCovid19Dashboard = connect(mapStateToProps, mapDispatchToProps)(Covid19Dashboard);
+
+export default ReduxCovid19Dashboard;
diff --git a/src/Covid19Dashboard/WorldMapChart/index.jsx b/src/Covid19Dashboard/WorldMapChart/index.jsx
new file mode 100644
index 0000000000..c3ec8c64a3
--- /dev/null
+++ b/src/Covid19Dashboard/WorldMapChart/index.jsx
@@ -0,0 +1,457 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as ReactMapGL from 'react-map-gl';
+import 'mapbox-gl/dist/mapbox-gl.css';
+
+import { mapboxAPIToken } from '../../localconf';
+import ControlPanel from '../ControlPanel';
+import { numberWithCommas } from '../dataUtils.js';
+import worldData from '../data/world_50m'; // from https://geojson-maps.ash.ms
+import stateData from '../data/us_states_20m.json'; // from https://eric.clst.org/tech/usgeojson/
+import countyData from '../data/us_counties';
+
+function addDataToGeoJsonBase(data, dataLevel) {
+ // the base GeoJson describes the country/state/county borders.
+ let base = stateData;
+ if (dataLevel === 'country') {
+ base = worldData;
+ worldData.features.forEach((f) => {
+ if (f.properties.name === 'Greenland') {
+ // Greenland is part of Denmark in JHU data, but not in `worldData`.
+ // Override Greenland's ISO code to be the same as Denmark.
+ f.properties.iso_a3 = 'DNK'; // eslint-disable-line no-param-reassign
+ }
+ });
+ } else if (dataLevel === 'county') {
+ const newYorkFips = '36061';
+ const emptyNewYorkFips = ['36081', '36047', '36005', '36085'];
+ base = {
+ ...countyData,
+ features: countyData.features.filter((f) => {
+ if (f.properties.FIPS === '17999') {
+ // Chicago (FIPS 17999) is separate from Cook county in
+ // `countyData`, but not in JHU data. So don't display
+ // Chicago separately:
+ return false;
+ }
+ if (emptyNewYorkFips.includes(f.properties.FIPS)) {
+ // JHU data contains all NY counts in county "New York". Counties
+ // "Queens", "Kings", "Richmond" and "Bronx" contain empty counts.
+ // So display the whole NY area with "New York" counts:
+ f.properties.FIPS = newYorkFips; // eslint-disable-line no-param-reassign
+ }
+ return true;
+ }),
+ };
+ }
+
+ // add the JHU data to the base GeoJson.
+ const geoJson = {
+ ...base,
+ features: base.features.map((loc) => {
+ const location = loc;
+ if (
+ dataLevel === 'country'
+ && location.properties.iso_a3
+ && location.properties.iso_a3 in data
+ ) {
+ location.properties = Object.assign(
+ data[location.properties.iso_a3],
+ location.properties,
+ );
+ return location;
+ }
+
+ if (
+ dataLevel === 'state'
+ && location.properties.NAME
+ && location.properties.NAME in data
+ ) {
+ location.properties = Object.assign(
+ data[location.properties.NAME],
+ location.properties,
+ );
+ return location;
+ }
+
+ if (dataLevel === 'county') {
+ if (location.properties.FIPS && !(location.properties.FIPS in data)) {
+ // `countyData` stores FIPS with trailing zeros, JHU data doesn't
+ location.properties.FIPS = Number(location.properties.FIPS).toString();
+ }
+ if (location.properties.FIPS && location.properties.FIPS in data) {
+ location.properties = Object.assign(
+ data[location.properties.FIPS],
+ location.properties,
+ );
+ return location;
+ }
+ }
+
+ // no data for this location
+ location.properties.confirmed = 0;
+ location.properties.deaths = 0;
+ return location;
+ }),
+ };
+
+ return geoJson;
+}
+
+class WorldMapChart extends React.Component {
+ constructor(props) {
+ super(props);
+ this.updateDimensions = this.updateDimensions.bind(this);
+ this.choroCountryGeoJson = null;
+ this.choroStateGeoJson = null;
+ this.choroCountyGeoJson = null;
+ this.state = {
+ selectedLayer: 'confirmed-dots',
+ mapSize: {
+ width: '100%',
+ height: window.innerHeight - 221,
+ },
+ viewport: {
+ longitude: 0,
+ latitude: 10,
+ zoom: 1,
+ bearing: 0,
+ pitch: 0,
+ },
+ hoverInfo: null,
+ };
+ }
+
+ componentDidMount() {
+ window.addEventListener('resize', this.updateDimensions);
+ }
+
+ onHover = (event) => {
+ let hoverInfo = null;
+
+ if (!event.features) { return; }
+
+ event.features.forEach((feature) => {
+ if (!feature.layer.id.startsWith('confirmed-')) {
+ return;
+ }
+ let confirmed = feature.properties.confirmed;
+ confirmed = confirmed && confirmed !== 'null' ? confirmed : 0;
+ let deaths = feature.properties.deaths;
+ deaths = deaths && deaths !== 'null' ? deaths : 0;
+ let recovered = feature.properties.recovered;
+ recovered = recovered && recovered !== 'null' ? recovered : 0;
+
+ const state = feature.properties.province_state;
+ const county = feature.properties.county;
+ let locationName = feature.properties.country_region;
+ locationName = (state && state !== 'null' ? `${state}, ` : '') + locationName;
+ locationName = (county && county !== 'null' ? `${county}, ` : '') + locationName;
+ if (!locationName || locationName === 'undefined') {
+ // we don't have data for this location
+ return;
+ }
+ hoverInfo = {
+ lngLat: event.lngLat,
+ locationName,
+ values: {
+ 'confirmed cases': numberWithCommas(confirmed),
+ deaths: numberWithCommas(deaths),
+ },
+ };
+ if (recovered) {
+ hoverInfo.values.recovered = numberWithCommas(recovered);
+ }
+ });
+
+ this.setState({
+ hoverInfo,
+ });
+ };
+
+ onClick = (event) => {
+ if (!event.features) { return; }
+
+ let dataLevel = null;
+ let locationId = '';
+ let title = '';
+ event.features.forEach((feature) => {
+ const layerId = feature.layer.id;
+ if (!layerId.startsWith('confirmed-')) {
+ return;
+ }
+
+ // density map data contains fips and iso3;
+ // choropleth map data contains FIPS and iso_a3.
+ const fips = feature.properties.FIPS || feature.properties.fips;
+ const state = feature.properties.province_state;
+ const iso3 = feature.properties.iso_a3 || feature.properties.iso3;
+ const isUS = iso3 === 'USA' || feature.properties.country_region === 'US';
+
+ // for US: only get the most granular data
+ // for other countries: always get the country-level data
+ if (fips && isUS) {
+ dataLevel = 'county';
+ locationId = fips;
+ title = `${feature.properties.county}, ${state}, ${feature.properties.country_region}`;
+ } else if (state && isUS && dataLevel !== 'county') {
+ dataLevel = 'state';
+ locationId = state;
+ title = `${state}, ${feature.properties.country_region}`;
+ } else if (iso3 && !dataLevel) {
+ dataLevel = 'country';
+ locationId = iso3;
+ title = `${feature.properties.country_region}`;
+ }
+ });
+
+ if (dataLevel) {
+ this.props.fetchTimeSeriesData(dataLevel, locationId, title);
+ }
+ }
+
+ isVisible(layerId) {
+ if (this.state.selectedLayer === layerId) {
+ return 'visible';
+ }
+ return 'none';
+ }
+
+ updateDimensions() {
+ this.setState({
+ mapSize: { width: '100%', height: window.innerHeight - 221 },
+ });
+ }
+
+ renderHoverPopup() {
+ const { hoverInfo } = this.state;
+ if (hoverInfo) {
+ return (
+
+
+
+ {hoverInfo.locationName}
+
+ {
+ Object.entries(hoverInfo.values).map(
+ (val, i) =>
{`${val[1]} ${val[0]}`}
,
+ )
+ }
+
Click for more details
+
+ );
+ }
+ return null;
+ }
+
+ render() {
+ const densityGeoJson = this.props.geoJson;
+ if (Object.keys(this.props.jsonByLevel.country).length && !this.choroCountryGeoJson) {
+ this.choroCountryGeoJson = addDataToGeoJsonBase(
+ this.props.jsonByLevel.country,
+ 'country',
+ );
+ this.choroStateGeoJson = addDataToGeoJsonBase(
+ this.props.jsonByLevel.state,
+ 'state',
+ );
+ this.choroCountyGeoJson = addDataToGeoJsonBase(
+ this.props.jsonByLevel.county,
+ 'county',
+ );
+ }
+
+ let colors;
+ let dotSizes;
+ if (this.state.selectedLayer === 'confirmed-dots') {
+ // config for dot distribution map
+ colors = {
+ 0: '#AA5E79',
+ };
+ dotSizes = {
+ 0: 2,
+ 5: 5,
+ 100: 8,
+ 1000: 11,
+ 5000: 15,
+ 10000: 19,
+ 50000: 23,
+ 100000: 27,
+ };
+ } else {
+ // config for choropleth map
+ colors = {
+ 0: '#FFF',
+ 5: '#F7F787',
+ 100: '#EED322',
+ 500: '#E6B71E',
+ 1000: '#DA9C20',
+ 2000: '#CA8323',
+ 5000: '#B86B25',
+ 10000: '#A25626',
+ 50000: '#8B4225',
+ 100000: '#850001',
+ };
+ dotSizes = { 0: 0, 1: 2 };
+ }
+ const colorsAsList = Object.entries(colors).map(item => [+item[0], item[1]]).flat();
+ const dotSizesAsList = Object.entries(dotSizes).map(item => [+item[0], item[1]]).flat();
+
+ const stateZoomThreshold = 1.5;
+ const countyZoomThreshold = 3;
+
+ return (
+
+ { this.setState({ selectedLayer: layerId }); }}
+ showLegend={this.state.selectedLayer !== 'confirmed-dots'}
+ colors={colors}
+ />
+ {
+ this.setState({ viewport });
+ }}
+ onHover={this.onHover}
+ onClick={this.onClick}
+ dragRotate={false}
+ touchRotate={false}
+ >
+ {this.renderHoverPopup()}
+
+ {/* Dot distribution map */}
+
+
+
+
+ {/* Choropleth map when zoomed out: country-level data only */}
+
+
+ {/* Same source as the previous one, but masking 1 layer out of 2
+ layers in the same source depending on zoom is causing issues */}
+
+ {/* Choropleth map when zoomed in (state or county zoom):
+ country-level data for all countries except US */}
+
+
+
+ {/* Choropleth map when zoomed in (state zoom): display state-level US data */}
+
+
+
+ {/* Choropleth map when zoomed in (county zoom): display county-level US data */}
+
+
+