add plastic heatmap + bar

Author: holtzy

src/pages/barplot.js

@@ -244,16 +244,21 @@ export default function Barplot() {
           even better, submit a <a href="https://github.com/holtzy/The-Python-Graph-Gallery">Pull Request</a>!
         </p>
         <Row>
-          <Col xs={12} md={6}>
+          <Col xs={12} md={4}>
             <Link to={"/web-circular-barplot-with-matplotlib"}>
               <ChartImage imgName={"web-circular-barplot-with-matplotlib-square"} caption={"A circular barchart with several features per group made with Python and Matplotlib."} />
             </Link>
           </Col>
-          <Col xs={12} md={6}>
+          <Col xs={12} md={4}>
             <Link to={"/web-horizontal-barplot-with-labels-the-economist"}>
               <ChartImage imgName={"web-horizontal-barplot-with-labels-the-economist-square"} caption={"Lear how to mimick the style of the Economist on this horizontal barplot."} />
             </Link>
           </Col>
+          <Col xs={12} md={4}>
+            <Link to={"/web-heatmap-and-radial-barchart-plastics"}>
+              <ChartImage imgName={"web-heatmap-and-radial-barchart-plastics-square2"} caption={"How to combine a heatmap with a radial barplot on the same figure with heaps of visual tweaks."} />
+            </Link>
+          </Col>
         </Row>
       </Container>
 

src/pages/heatmap.js

@@ -7,7 +7,7 @@ import Row from "react-bootstrap/Row";
 import ChartImageContainer from "../components/ChartImageContainer";
 import ChartFamilySection from "../components/ChartFamilySection";
 import { Link } from "gatsby";
-import { Seaborn } from "../components/MiscellaneousLogos"
+import { Matplotlib, Seaborn } from "../components/MiscellaneousLogos"
 import { Button, Col } from "react-bootstrap";
 import CodeChunk from "../components/CodeChunk"
 import ChartImage from "../components/ChartImage";
@@ -176,7 +176,7 @@ export default function Heatmap() {
       <Spacing />
 
 
-    <Container>
+      <Container>
         <h2 id="Timeseries">Heatmap for timeseries</h2>
         <p>
           A heatmap can be used to display some temporal data. Here is an example using <Link to="/matplotlib">matplotlib</Link> where
@@ -191,6 +191,27 @@ export default function Heatmap() {
 
       <Spacing />
 
+
+      <Container>
+        <h2 id="From the web"><Matplotlib />From the web</h2>
+        <p>The web is full of astonishing charts made by awesome bloggers, (often
+          using <a href="https://www.r-graph-gallery.com">R</a>).
+          The <a href="https://www.python-graph-gallery.com">Python graph gallery</a> tries to
+          display (or translate from R) some of the best creations and explain how their source
+          code works. If you want to display your work here, please drop me a word or
+          even better, submit a <a href="https://github.com/holtzy/The-Python-Graph-Gallery">Pull Request</a>!
+        </p>
+        <Row>
+          <Col xs={12} md={8}>
+            <Link to={"/web-heatmap-and-radial-barchart-plastics"}>
+              <ChartImage imgName={"web-heatmap-and-radial-barchart-plastics"} caption={"How to combine a heatmap with a radial barplot on the same figure with heaps of visual tweaks."} />
+            </Link>
+          </Col>
+        </Row>
+      </Container>
+
+      <Spacing />
+
       <div className="greySection" id="related">
         <Container>
           <ChartFamilySection chartFamily="correlation" />