Merge pull request #434 from JosephBARBIERDARNAL/cartograms

add post on cartograms

src/pages/cartogram.js

@@ -31,13 +31,49 @@ export default function Cartogram() {
           😔 Cartogram with <code>Python</code>
         </h2>
         <p>
-          Unfortunately, there is <strong>no direct method</strong> to build cartograms in Python. However, if you need to create one, you can easily build <a href='https://r-graph-gallery.com/cartogram.html'>cartograms in R</a> using the <code>cartogram</code> package.
+          Unfortunately, there is <strong>no direct method</strong> to build
+          cartograms in Python. However, if you need to create one, you can
+          easily build{' '}
+          <a href="https://r-graph-gallery.com/cartogram.html">
+            cartograms in R
+          </a>{' '}
+          using the <code>cartogram</code> package.
         </p>
         <p>
-          If you have implemented a cartogram algorithm in Python, please <strong>share your code</strong> with the community by opening an issue on the <a href="https://github.com/holtzy/The-Python-Graph-Gallery/issues">GitHub repository</a> of the gallery.
+          If you have implemented a cartogram algorithm in Python, please{' '}
+          <strong>share your code</strong> with the community by opening an
+          issue on the{' '}
+          <a href="https://github.com/holtzy/The-Python-Graph-Gallery/issues">
+            GitHub repository
+          </a>{' '}
+          of the gallery.
         </p>
         <p>
-          The gallery provides <strong>numerous map examples</strong> for you to explore. Browse the examples below:
+          The only kind of cartogram implemented in Python is the{' '}
+          <code>non-contiguous cartogram</code> that preserves shape but change
+          size. And the good news is that we have a tuto on the Gallery!
+        </p>
+        <Row>
+          <Col xs={12} md={12}>
+            <Link to={'/592-non-contiguous-cartogram-in-python'}>
+              <ChartImage
+                imgName={'592-non-contiguous-cartogram-in-python'}
+                caption={
+                  'How to create a non-contiguous cartogram in Python using geoplot and geopandas'
+                }
+              />
+            </Link>
+          </Col>
+        </Row>
+      </Container>
+
+      <Spacing />
+
+      <Container>
+        <h2>Other kind of maps</h2>
+        <p>
+          The gallery provides <strong>numerous map examples</strong> for you to
+          explore. Browse the examples below:
         </p>
         <Row>
           <Col xs={12} md={4}>
@@ -51,77 +87,52 @@ export default function Cartogram() {
             </Link>
           </Col>
           <Col xs={12} md={4}>
-            <Link
-              to={'/web-map-usa-with-scatter-plot-on-top'}
-            >
+            <Link to={'/web-map-usa-with-scatter-plot-on-top'}>
               <ChartImage
-                imgName={
-                  'web-map-usa-with-scatter-plot-on-top-square'
-                }
-                caption={
-                  'Bubble map of the USA with Matplotlib and Geopandas.'
-                }
+                imgName={'web-map-usa-with-scatter-plot-on-top-square'}
+                caption={'Bubble map of the USA with Matplotlib and Geopandas.'}
               />
             </Link>
           </Col>
           <Col xs={12} md={4}>
-            <Link
-              to={'/web-stacked-area-charts-on-a-map'}
-            >
+            <Link to={'/web-stacked-area-charts-on-a-map'}>
               <ChartImage
-                imgName={
-                  'web-stacked-area-charts-on-a-map'
-                }
-                caption={
-                  'Stacked area charts on a map, with a special grid.'
-                }
+                imgName={'web-stacked-area-charts-on-a-map'}
+                caption={'Stacked area charts on a map, with a special grid.'}
               />
             </Link>
           </Col>
           <Col xs={12} md={4}>
-            <Link
-              to={'/web-map-europe-with-color-by-country'}
-            >
+            <Link to={'/web-map-europe-with-color-by-country'}>
               <ChartImage
-                imgName={
-                  'web-map-europe-with-color-by-country'
-                }
+                imgName={'web-map-europe-with-color-by-country'}
                 caption={
                   'Choropleth map of European counties with Matplotlib and Geopandas'
                 }
               />
             </Link>
           </Col>
           <Col xs={12} md={4}>
-            <Link
-              to={'/web-multiple-maps'}
-            >
+            <Link to={'/web-multiple-maps'}>
               <ChartImage
-                imgName={
-                  'web-multiple-maps'
-                }
+                imgName={'web-multiple-maps'}
                 caption={
                   'Combine multiple maps together, with a lollipop plot for the legend'
                 }
               />
             </Link>
           </Col>
           <Col xs={12} md={4}>
-            <Link
-              to={'/web-waffle-with-small-multiples'}
-            >
+            <Link to={'/web-waffle-with-small-multiples'}>
               <ChartImage
-                imgName={
-                  'web-waffle-with-small-multiples'
-                }
+                imgName={'web-waffle-with-small-multiples'}
                 caption={
                   'Use waffle chart for building a map on London boroughs'
                 }
               />
             </Link>
           </Col>
         </Row>
-
       </Container>
 
       <Spacing />

src/util/list-of-best-charts.js

@@ -1,4 +1,12 @@
 export const listOfBestCharts = [
+  {
+    link: '592-non-contiguous-cartogram-in-python',
+    title: 'Density population in Asia',
+    description: 'Cartogram (non-contiguous) of population density in Asia ',
+    img: '592-non-contiguous-cartogram-in-python.png',
+    alt: 'Cartogram of Asia',
+    author: 'Joseph Barbier',
+  },
   {
     link: 'web-map-with-custom-legend',
     title: 'CO2 consumption in Europe',

static/data/asia.csv

@@ -0,0 +1,49 @@
+Country,Total Population,Surface Area (sq. km)
+Russia,144444359.0,17098250.0
+China,1425671352.0,9600013.0
+India,1428627663.0,3287259.0
+Kazakhstan,19606634.0,2724902.0
+Saudi Arabia,36947025.0,2149690.0
+Indonesia,277534123.0,1916862.0
+Iran,89172767.0,1745150.0
+Mongolia,3447157.0,1564116.0
+Pakistan,240485658.0,796100.0
+Turkey,85816199.0,785350.0
+Myanmar,54577997.0,676590.0
+Afghanistan,42239854.0,652860.0
+Yemen,34449825.0,527970.0
+Thailand,71801279.0,513120.0
+Turkmenistan,6516100.0,488100.0
+Uzbekistan,35163944.0,448924.0
+Iraq,45504560.0,435052.0
+Japan,123294513.0,377974.0
+Vietnam,98858950.0,331230.0
+Malaysia,34308525.0,330345.0
+Oman,4644384.0,309500.0
+Philippines,117337368.0,300000.0
+Lao PDR,,236800.0
+Kyrgyz Republic,,199950.0
+Syrian Arab Republic,,185180.0
+Cambodia,16944826.0,181040.0
+Bangladesh,172954319.0,147570.0
+Nepal,30896590.0,147180.0
+Tajikistan,10143543.0,141380.0
+Dem. People's Rep. Korea,,120540.0
+Korea,,100370.0
+United Arab Emirates,,98647.9
+Jordan,11337053.0,89320.0
+Azerbaijan,10412652.0,86600.0
+Georgia,3728282.0,69700.0
+Sri Lanka,21893579.0,65610.0
+Bhutan,787425.0,38390.0
+Armenia,2777971.0,29740.0
+Israel,9174520.0,22070.0
+Kuwait,4310108.0,17820.0
+Timor-Leste,,14870.0
+Qatar,2716391.0,11490.0
+Lebanon,5353930.0,10450.0
+Brunei,452524.0,5770.0
+"Hong Kong SAR, China",,1110.0
+Bahrain,1485510.0,780.0
+Singapore,6014723.0,719.0
+"Macao SAR, China",,32.9

static/data/asia_population.csv

@@ -0,0 +1,52 @@
+Country,Total Population
+India,1428627663
+China,1425671352
+Indonesia,277534123
+Pakistan,240485658
+Bangladesh,172954319
+Japan,123294513
+Philippines,117337368
+Vietnam,98858950
+Iran,89172767
+Turkey,85816199
+Thailand,71801279
+Myanmar,54577997
+South Korea,51784059
+Iraq,45504560
+Afghanistan,42239854
+Russia,144444359
+Saudi Arabia,36947025
+Uzbekistan,35163944
+Yemen,34449825
+Malaysia,34308525
+Nepal,30896590
+North Korea,26160822
+Taiwan,23923277
+Syria,23227014
+Sri Lanka,21893579
+Kazakhstan,19606634
+Cambodia,16944826
+Jordan,11337053
+Tajikistan,10143543
+Azerbaijan,10412652
+UAE,9516871
+Israel,9174520
+Laos,7633779
+Hong Kong,7491609
+Kyrgyzstan,6735348
+Turkmenistan,6516100
+Singapore,6014723
+Palestine,5371230
+Lebanon,5353930
+Oman,4644384
+Kuwait,4310108
+Georgia,3728282
+Mongolia,3447157
+Armenia,2777971
+Qatar,2716391
+Bahrain,1485510
+East Timor,1360596
+Cyprus,1260138
+Bhutan,787425
+Maldives,523787
+Brunei,452524