From 6e5327b1ab66aa6ea49ef705b4eab5ff93c86e8e Mon Sep 17 00:00:00 2001 From: alex Date: Mon, 15 Jun 2026 16:44:47 +0200 Subject: [PATCH 1/2] allow to remove antartica --- docs/data/charts/map/RemoveAntarctica.js | 117 ++++++++++++++++ docs/data/charts/map/RemoveAntarctica.tsx | 125 ++++++++++++++++++ docs/data/charts/map/map.md | 12 ++ .../useGeoProjection.selectors.ts | 9 +- 4 files changed, 257 insertions(+), 6 deletions(-) create mode 100644 docs/data/charts/map/RemoveAntarctica.js create mode 100644 docs/data/charts/map/RemoveAntarctica.tsx diff --git a/docs/data/charts/map/RemoveAntarctica.js b/docs/data/charts/map/RemoveAntarctica.js new file mode 100644 index 0000000000000..3f81ab78c3427 --- /dev/null +++ b/docs/data/charts/map/RemoveAntarctica.js @@ -0,0 +1,117 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; +import ToggleButton from '@mui/material/ToggleButton'; +import MenuItem from '@mui/material/MenuItem'; +import TextField from '@mui/material/TextField'; + +import { feature as topojsonFeature } from 'topojson-client'; +import countriesTopology from 'visionscarto-world-atlas/world/110m.json'; + +import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium'; +import { GeoDataPlot, MapShapePlot } from '@mui/x-charts-premium/Map'; +import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; + +import { internetUsageByCountry } from '../dataset/internetUsageByCountry'; +import { countryData, withCountryCodeAsName } from '../dataset/countryData'; + +const projections = [ + 'equirectangular', + 'mercator', + 'transverseMercator', + 'equalEarth', + 'naturalEarth1', +]; + +const countries = withCountryCodeAsName( + topojsonFeature(countriesTopology, 'countries'), +); + +const countriesWithoutAntarctica = { + ...countries, + features: countries.features.filter( + (feature) => feature.properties?.name !== 'Antarctica', + ), +}; + +export default function RemoveAntarctica() { + const [mode, setMode] = React.useState('geoDataFiltering'); + const [projection, setProjection] = React.useState('naturalEarth1'); + + return ( + + { + if (newMode !== null) { + setMode(newMode); + } + }} + sx={{ mb: 2, mr: 2 }} + > + With Antarctica + geoData filtering + series only + + setProjection(event.target.value)} + sx={{ mb: 2, minWidth: 200 }} + > + {projections.map((name) => ( + + {name} + + ))} + + + + + {mode === 'seriesOnly' ? null : ( + + )} + + + + + + ); +} + +const settings = { + zAxis: [ + { + id: 'internet-usage', + colorMap: { + type: 'continuous', + min: 0, + max: 100, + color: ['#e3f2fd', '#0d47a1'], + }, + }, + ], + height: 360, + series: [ + { + type: 'mapShape', + label: 'Internet usage', + data: Object.keys(countryData).map((code) => ({ + name: code, + label: countryData[code].country, + colorValue: internetUsageByCountry[code], + })), + color: 'red', + valueFormatter: (point) => + point.colorValue == null ? 'No data' : `${point.colorValue.toFixed(1)}%`, + }, + ], +}; diff --git a/docs/data/charts/map/RemoveAntarctica.tsx b/docs/data/charts/map/RemoveAntarctica.tsx new file mode 100644 index 0000000000000..f6018055dce84 --- /dev/null +++ b/docs/data/charts/map/RemoveAntarctica.tsx @@ -0,0 +1,125 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; +import ToggleButton from '@mui/material/ToggleButton'; +import MenuItem from '@mui/material/MenuItem'; +import TextField from '@mui/material/TextField'; + +import { feature as topojsonFeature } from 'topojson-client'; +import countriesTopology from 'visionscarto-world-atlas/world/110m.json'; + +import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium'; +import { GeoDataPlot, MapShapePlot } from '@mui/x-charts-premium/Map'; +import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; +import { type ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; +import { type MapShapeValueType } from '@mui/x-charts-premium/models'; +import { internetUsageByCountry } from '../dataset/internetUsageByCountry'; +import { countryData, withCountryCodeAsName } from '../dataset/countryData'; + +const projections = [ + 'equirectangular', + 'mercator', + 'transverseMercator', + 'equalEarth', + 'naturalEarth1', +] as const; + +type Projection = (typeof projections)[number]; + +const countries = withCountryCodeAsName( + topojsonFeature( + countriesTopology as any, + 'countries', + ) as unknown as ExtendedFeatureCollection, +); + +const countriesWithoutAntarctica = { + ...countries, + features: countries.features.filter( + (feature) => feature.properties?.name !== 'Antarctica', + ), +}; + +export default function RemoveAntarctica() { + const [mode, setMode] = React.useState< + 'with-antarctica' | 'geoDataFiltering' | 'seriesOnly' + >('geoDataFiltering'); + const [projection, setProjection] = React.useState('naturalEarth1'); + + return ( + + { + if (newMode !== null) { + setMode(newMode); + } + }} + sx={{ mb: 2, mr: 2 }} + > + With Antarctica + geoData filtering + series only + + setProjection(event.target.value as Projection)} + sx={{ mb: 2, minWidth: 200 }} + > + {projections.map((name) => ( + + {name} + + ))} + + + + + {mode === 'seriesOnly' ? null : ( + + )} + + + + + + ); +} + +const settings = { + zAxis: [ + { + id: 'internet-usage', + colorMap: { + type: 'continuous', + min: 0, + max: 100, + color: ['#e3f2fd', '#0d47a1'], + }, + }, + ], + height: 360, + series: [ + { + type: 'mapShape', + label: 'Internet usage', + data: Object.keys(countryData).map((code) => ({ + name: code, + label: countryData[code].country, + colorValue: internetUsageByCountry[code], + })), + color: 'red', + valueFormatter: (point: MapShapeValueType) => + point.colorValue == null ? 'No data' : `${point.colorValue.toFixed(1)}%`, + }, + ], +} as const; diff --git a/docs/data/charts/map/map.md b/docs/data/charts/map/map.md index ab2742f5e420d..b4029e3d326ab 100644 --- a/docs/data/charts/map/map.md +++ b/docs/data/charts/map/map.md @@ -171,3 +171,15 @@ its visibility. Hidden series are skipped by `MapShapePlot` so the underlying ba stays visible. {{"demo": "VisibleMapShape.js"}} + +## Common practice + +### Removing Antarctica + +World maps often has no data for Antarctica. +There are two ways to remove it:. + +- Render only the countries in series by removing the `` +- Filter out Antarctica from the `geoData` + +{{"demo": "RemoveAntarctica.js"}} diff --git a/packages/x-charts-premium/src/internals/plugins/useGeoProjection/useGeoProjection.selectors.ts b/packages/x-charts-premium/src/internals/plugins/useGeoProjection/useGeoProjection.selectors.ts index 370a123a105b0..37919856e729c 100644 --- a/packages/x-charts-premium/src/internals/plugins/useGeoProjection/useGeoProjection.selectors.ts +++ b/packages/x-charts-premium/src/internals/plugins/useGeoProjection/useGeoProjection.selectors.ts @@ -211,12 +211,9 @@ export const selectorChartProjection = createSelectorMemoized( ); } - projection.translate( - translate ?? [ - drawingArea.left + drawingArea.width / 2, - drawingArea.top + drawingArea.height / 2, - ], - ); + if (translate) { + projection.translate(translate); + } } return projection; }, From 5989021644e58be812fe5979cdfcc6e5ef7029f6 Mon Sep 17 00:00:00 2001 From: alex Date: Tue, 16 Jun 2026 15:55:14 +0200 Subject: [PATCH 2/2] use-gray --- docs/data/charts/map/RemoveAntarctica.js | 2 +- docs/data/charts/map/RemoveAntarctica.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/charts/map/RemoveAntarctica.js b/docs/data/charts/map/RemoveAntarctica.js index 3f81ab78c3427..fb4635b420d5f 100644 --- a/docs/data/charts/map/RemoveAntarctica.js +++ b/docs/data/charts/map/RemoveAntarctica.js @@ -96,6 +96,7 @@ const settings = { min: 0, max: 100, color: ['#e3f2fd', '#0d47a1'], + unknownColor: 'gray', }, }, ], @@ -109,7 +110,6 @@ const settings = { label: countryData[code].country, colorValue: internetUsageByCountry[code], })), - color: 'red', valueFormatter: (point) => point.colorValue == null ? 'No data' : `${point.colorValue.toFixed(1)}%`, }, diff --git a/docs/data/charts/map/RemoveAntarctica.tsx b/docs/data/charts/map/RemoveAntarctica.tsx index f6018055dce84..b626a0a20008f 100644 --- a/docs/data/charts/map/RemoveAntarctica.tsx +++ b/docs/data/charts/map/RemoveAntarctica.tsx @@ -104,6 +104,7 @@ const settings = { min: 0, max: 100, color: ['#e3f2fd', '#0d47a1'], + unknownColor: 'gray', }, }, ], @@ -117,7 +118,6 @@ const settings = { label: countryData[code].country, colorValue: internetUsageByCountry[code], })), - color: 'red', valueFormatter: (point: MapShapeValueType) => point.colorValue == null ? 'No data' : `${point.colorValue.toFixed(1)}%`, },