Merge pull request #483 from JosephBARBIERDARNAL/fix

fix pyfonts and other stuff

src/components/AllChartsModal.js

@@ -16,6 +16,7 @@ export default function AllChartsModal({ show, handleClose }) {
         ![
           'matplotlib',
           'drawarrow',
+          'pyfonts',
           'seaborn',
           'plotnine',
           'pypalettes',

src/functions/plot.js

@@ -31,6 +31,64 @@ const docUrl =
 //
 //
 const param1 = {
+  name: 'x',
+  description: <p>Positions of the data points along the x-axis.</p>,
+  basicUsage: `
+import matplotlib.pyplot as plt
+import numpy as np
+
+x = np.linspace(0, 10, 100)
+y = np.sin(x)
+
+fig, ax = plt.subplots()
+ax.plot(x=x, y=y)
+plt.show()
+`.trim(),
+  type: 'array-like',
+  howToUse: (
+    <p>
+      The <code>x</code> and <code>y</code> arrays must have the same length and
+      contain numerical values.
+    </p>
+  ),
+  img: '120_Basic_lineplot2',
+  post: '120-line-chart-with-matplotlib',
+};
+//
+//
+//
+//
+//
+const param2 = {
+  name: 'y',
+  description: <p>Positions of the data points along the y-axis.</p>,
+  basicUsage: `
+import matplotlib.pyplot as plt
+import numpy as np
+
+x = np.linspace(0, 10, 100)
+y = np.sin(x)
+
+fig, ax = plt.subplots()
+ax.plot(x=x, y=y)
+plt.show()
+`.trim(),
+  type: 'array-like',
+  howToUse: (
+    <p>
+      The <code>x</code> and <code>y</code> arrays must have the same length and
+      contain numerical values.
+    </p>
+  ),
+  img: '120_Basic_lineplot2',
+  post: '120-line-chart-with-matplotlib',
+};
+//
+//
+//
+//
+//
+const param3 = {
   name: 'color',
   description: <p>Sets the color of the line or markers in the plot.</p>,
   basicUsage: `
@@ -47,14 +105,14 @@ plt.show()
   type: 'string',
   howToUse: <div>{colorHowToUse}</div>,
   img: 'tuto-plot-1-square',
-  post: 'matplotlib-line-plot',
+  post: '121-line-chart-customization',
 };
 //
 //
 //
 //
 //
-const param2 = {
+const param4 = {
   name: 'linestyle',
   description: <div>{linestyleDescription}</div>,
   basicUsage: `
@@ -71,14 +129,14 @@ plt.show()
   type: 'string',
   howToUse: <div>{linestyleHowToUse}</div>,
   img: 'tuto-plot-2-square',
-  post: 'matplotlib-line-styles',
+  post: '121-line-chart-customization',
 };
 //
 //
 //
 //
 //
-const param3 = {
+const param5 = {
   name: 'marker',
   description: <p>Specifies the marker style for the data points.</p>,
   basicUsage: `
@@ -104,14 +162,14 @@ plt.show()
     </p>
   ),
   img: 'tuto-plot-3-square',
-  post: 'matplotlib-markers',
+  post: '121-line-chart-customization',
 };
 //
 //
 //
 //
 //
-const param4 = {
+const param6 = {
   name: 'label',
   description: <p>Sets the label for the plot, which is used in the legend.</p>,
   basicUsage: `
@@ -135,14 +193,14 @@ plt.show()
     </p>
   ),
   img: 'tuto-plot-4-square',
-  post: 'matplotlib-legend',
+  post: '585-legend-for-categorical-data-matplotlib',
 };
 //
 //
 //
 //
 //
-const param5 = {
+const param7 = {
   name: 'alpha',
   description: <p>Controls the transparency of the plot elements.</p>,
   basicUsage: `
@@ -159,14 +217,14 @@ plt.show()
   type: 'float',
   howToUse: <div>{alphaHowToUse}</div>,
   img: 'tuto-plot-5-square',
-  post: 'matplotlib-transparency',
+  post: '121-line-chart-customization',
 };
 //
 //
 //
 //
 //
-const param6 = {
+const param8 = {
   name: 'linewidth',
   description: <div>{linewidthDescription}</div>,
   basicUsage: `
@@ -183,14 +241,14 @@ plt.show()
   type: 'float',
   howToUse: <div>{linewidthHowToUse}</div>,
   img: 'tuto-plot-6-square',
-  post: 'matplotlib-line-width',
+  post: '121-line-chart-customization',
 };
 //
 //
 //
 //
 //
-const param7 = {
+const param9 = {
   name: 'zorder',
   description: <div>{zorderDescription}</div>,
   basicUsage: `
@@ -209,12 +267,22 @@ plt.show()
   type: 'int',
   howToUse: <div>{zorderHowToUse}</div>,
   img: 'tuto-plot-7-square',
-  post: 'matplotlib-zorder',
+  post: '121-line-chart-customization',
 };
 
 export const plot = {
   name,
   description,
   docUrl,
-  parameters: [param1, param2, param3, param4, param5, param6, param7],
+  parameters: [
+    param1,
+    param2,
+    param3,
+    param4,
+    param5,
+    param6,
+    param7,
+    param8,
+    param9,
+  ],
 };

src/notebooks/web-minimalist-area-chart.ipynb → src/notebooks/web-area-chart-with-different-colors-for-positive-and-negative-values.ipynb

@@ -180,11 +180,11 @@
       "cell_type": "markdown",
       "metadata": {},
       "source": [
-        "## Change colors\n",
+        "## 2 colors for positive and negative values\n",
         "\n",
         "Since there’s no built-in method to change the color based on a value, so we create **two area charts**:\n",
         "\n",
-        "- First chart: spans from the start date to `year_index` (the year when the value drops below 0).\n",
+        "- First chart: spans from the start date to `year_index` (the year is when the value drops below 0, and we find this info with the `flag` column).\n",
         "- Second chart: spans from `year_index` to the end date.\n",
         "\n",
         "Apply different colors to each chart, and done!\n"
@@ -385,7 +385,7 @@
         "ax_text(x=1978, y=-210000, s=s, font=font, fontsize=8, ha='left', highlight_textprops=[{'font':boldfont}])\n",
         "ax_arrow(tail_position=(1995, -300000), head_position=(2009, -50000), ax=ax, **arrow_props)\n",
         "\n",
-        "plt.savefig('../../static/graph/web-minimalist-area-chart.png', dpi=300, bbox_inches='tight')\n",
+        "plt.savefig('../../static/graph/web-area-chart-with-different-colors-for-positive-and-negative-values.png', dpi=300, bbox_inches='tight')\n",
         "plt.show()"
       ]
     },
@@ -405,14 +405,14 @@
   ],
   "metadata": {
     "chartType": "area",
-    "description": "This post guides you through reproducing an <a href='/area-plot'>area chart</a> with a <b>minimalist style</b>, two colors, and clean annotations. The process starts with a <b>basic example</b> and ends with a polished, <b>refined chart</b>.",
+    "description": "This post guides you through reproducing an <a href='/area-plot'>area chart</a> with two colors for positive and negative values, and clean annotations. The process starts with a <b>basic example</b> and ends with a polished, <b>refined chart</b>. Every step provides explanations and reproducible code.",
     "family": "evolution",
     "kernelspec": {
       "display_name": "Python 3 (ipykernel)",
       "language": "python",
       "name": "python3"
     },
-    "keywords": "area, chart, seaborn, matplotlib, python, arrows, annotations, highlight_text, drawarrow",
+    "keywords": "area, chart, seaborn, matplotlib, python, arrows, annotations, highlight_text, drawarrow, pyfonts",
     "language_info": {
       "codemirror_mode": {
         "name": "ipython",
@@ -425,8 +425,8 @@
       "pygments_lexer": "ipython3",
       "version": "3.10.13"
     },
-    "seoDescription": "How to create an area chart with 2 distincts colors in Python matplotlib with a nice minimalist style",
-    "slug": "web-minimalist-area-chart",
+    "seoDescription": "How to create an area chart with 2 distinct colors depending on whether the values are positive or negative.",
+    "slug": "web-area-chart-with-different-colors-for-positive-and-negative-values",
     "title": "Minimalist area chart"
   },
   "nbformat": 4,

src/notebooks/web-lollipop-with-colormap-and-arrow.ipynb

@@ -387,9 +387,11 @@
       "source": [
         "## Going further\n",
         "\n",
-        "This article explains how to reproduce a [map with scatter plot](/bubble-map) with annotations, colormap and nice features.\n",
+        "You might be interested in:\n",
         "\n",
-        "For more examples of **advanced customization** in map, check out [choropleth map of America](https://python-graph-gallery.com/choropleth-map-geopandas-python/). Also, you might be interested in [creating interactive map](https://python-graph-gallery.com/292-choropleth-map-with-folium/) with Folium.\n"
+        "- how to create a [dumbell chart](/web-lollipop-plot-with-python-mario-kart-64-world-records)\n",
+        "- how to use a [lollipop for a time series](/web-lollipop-plot-with-python-the-office)\n",
+        "- this tuto about [circular lollipop](/web-circular-lollipop-plot-with-matplotlib)\n"
       ]
     }
   ],

src/pages/area-plot.js

@@ -197,9 +197,15 @@ export default function AreaPlot() {
             </Link>
           </Col>
           <Col xs={12} md={6}>
-            <Link to={'/web-minimalist-area-chart'}>
+            <Link
+              to={
+                '/web-area-chart-with-different-colors-for-positive-and-negative-values'
+              }
+            >
               <ChartImage
-                imgName={'web-minimalist-area-chart-square'}
+                imgName={
+                  'web-area-chart-with-different-colors-for-positive-and-negative-values-square'
+                }
                 caption={
                   'A minimalist area chart with clean annotations and style'
                 }

src/pages/color-palette-finder.js

@@ -78,6 +78,7 @@ export default function Colors({ location }) {
       <TitleAndDescription
         title="Python Color Palette Finder"
         description={chartDescription}
+        chartType={'pypalettes'}
         isRaptiveEnabled={false}
       />
 

src/pages/drawarrow.js

@@ -216,9 +216,11 @@ export default function Post() {
             </Link>
           </Col>
           <Col xs={12} md={4}>
-            <Link to="/web-minimalist-area-chart">
+            <Link to="/web-area-chart-with-different-colors-for-positive-and-negative-values">
               <ChartImage
-                imgName={'web-minimalist-area-chart-square'}
+                imgName={
+                  'web-area-chart-with-different-colors-for-positive-and-negative-values-square'
+                }
                 caption={'Minimalist style area chart'}
               />
             </Link>
@@ -239,7 +241,7 @@ export default function Post() {
                 {' '}
                 official github repo of drawarrow
               </a>{' '}
-              (give it a star!)
+              (⭐ give it a star!)
             </li>
             <li>
               how to draw an{' '}