add logo and button in every main page

holtzy · Jul 31, 2024 · fef6378 · fef6378
1 parent 55c9596
commit fef6378
Show file tree

Hide file tree

Showing 43 changed files with 137 additions and 25 deletions.
diff --git a/src/pages/2d-density-plot.js b/src/pages/2d-density-plot.js
@@ -29,6 +29,7 @@ export default function Heatmap() {
       <TitleAndDescription
         title="2D Density Chart"
         description={chartDescription}
+        chartType="density2d"
       />
 
       <div className="greySection">

diff --git a/src/pages/3d.js b/src/pages/3d.js
@@ -48,6 +48,7 @@ export default function ThreeD() {
       <TitleAndDescription
         title="Three-Dimensional plotting"
         description={chartDescription}
+        chartType="3d"
       />
 
       <Container>

diff --git a/src/pages/animation.js b/src/pages/animation.js
@@ -52,7 +52,11 @@ export const Head = () => (
 export default function Correlogram() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Animation" description={chartDescription} />
+      <TitleAndDescription
+        title="Animation"
+        description={chartDescription}
+        chartType="animation"
+      />
 
       <Container>
         <h2 id="Quick">&#9201; Quick start</h2>

diff --git a/src/pages/arc-diagram.js b/src/pages/arc-diagram.js
@@ -24,7 +24,11 @@ export const Head = () => (
 export default function Arc() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Arc diagram" description={chartDescription} />
+      <TitleAndDescription
+        title="Arc diagram"
+        description={chartDescription}
+        chartType="arc"
+      />
 
       <div id="related">
         <Container>

diff --git a/src/pages/area-plot.js b/src/pages/area-plot.js
@@ -40,7 +40,11 @@ export const Head = () => (
 export default function AreaPlot() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Area Chart" description={chartDescription} />
+      <TitleAndDescription
+        title="Area Chart"
+        description={chartDescription}
+        chartType="area"
+      />
 
       <Container>
         <h2 id="Quick">&#9201; Quick start</h2>

diff --git a/src/pages/boxplot.js b/src/pages/boxplot.js
@@ -50,7 +50,11 @@ export const Head = () => (
 export default function Boxplot() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Boxplot" description={chartDescription} />
+      <TitleAndDescription
+        title="Boxplot"
+        description={chartDescription}
+        chartType="boxplot"
+      />
 
       <Container>
         <h2 id="Quick">&#9201; Quick start</h2>

diff --git a/src/pages/bubble-map.js b/src/pages/bubble-map.js
@@ -26,7 +26,11 @@ export const Head = () => (
 export default function BubbleMap() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Bubble Map" description={chartDescription} />
+      <TitleAndDescription
+        title="Bubble Map"
+        description={chartDescription}
+        chartType="bubbleMap"
+      />
 
       <div className="greySection" id="related">
         <Container>

diff --git a/src/pages/bubble-plot.js b/src/pages/bubble-plot.js
@@ -42,7 +42,11 @@ export const Head = () => (
 export default function BubblePlot() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Bubble plot" description={chartDescription} />
+      <TitleAndDescription
+        title="Bubble plot"
+        description={chartDescription}
+        chartType="bubble"
+      />
 
       <Spacing />
 

diff --git a/src/pages/candlestick.js b/src/pages/candlestick.js
@@ -65,7 +65,11 @@ export const Head = () => (
 export default function Boxplot() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Candlestick" description={chartDescription} />
+      <TitleAndDescription
+        title="Candlestick"
+        description={chartDescription}
+        chartType="candlestick"
+      />
 
       <Container>
         <h2 id="Quick">&#9201; Quick start</h2>

diff --git a/src/pages/cartogram.js b/src/pages/cartogram.js
@@ -24,7 +24,11 @@ export const Head = () => (
 export default function Cartogram() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Cartogram" description={chartDescription} />
+      <TitleAndDescription
+        title="Cartogram"
+        description={chartDescription}
+        chartType="cartogram"
+      />
 
       <Container>
         <h2>

diff --git a/src/pages/cheat-sheets.js b/src/pages/cheat-sheets.js
@@ -27,6 +27,7 @@ export default function CheatSheet() {
       <TitleAndDescription
         title="Cheat Sheets"
         description={chartDescription}
+        chartType="cheatSheets"
       />
 
       <Spacing />

diff --git a/src/pages/chord-diagram.js b/src/pages/chord-diagram.js
@@ -28,6 +28,7 @@ export default function Chord() {
       <TitleAndDescription
         title="Chord diagram"
         description={chartDescription}
+        chartType="chordDiagram"
       />
 
       <Container>

diff --git a/src/pages/choropleth-map.js b/src/pages/choropleth-map.js
@@ -29,6 +29,7 @@ export default function Choropleth() {
       <TitleAndDescription
         title="Choropleth map"
         description={chartDescription}
+        chartType="choropleth"
       />
 
       <Container>

diff --git a/src/pages/circular-barplot.js b/src/pages/circular-barplot.js
@@ -29,6 +29,7 @@ export default function CircularBarplot() {
       <TitleAndDescription
         title="Circular Barplot"
         description={chartDescription}
+        chartType="circularBarplot"
       />
 
       <Container>

diff --git a/src/pages/circular-packing.js b/src/pages/circular-packing.js
@@ -29,6 +29,7 @@ export default function CircularPacking() {
       <TitleAndDescription
         title="Circular Packing"
         description={chartDescription}
+        chartType="circularPacking"
       />
 
       <div className="greySection" id="related">
@@ -62,8 +63,8 @@ export default function CircularPacking() {
           <code>Circlify</code> can work without a hierarchical structure, i.e.
           with just a set of numeric varialbles that will be each displayed as a
           bubble. Note that the package just compute the position and size of
-          each bubble. Once that's done, <code>matplotlib</code> is used to
-          make the chart itself with usual functions.
+          each bubble. Once that's done, <code>matplotlib</code> is used to make
+          the chart itself with usual functions.
         </p>
         <Row>
           <ChartImageContainer

diff --git a/src/pages/connected-scatter-plot.js b/src/pages/connected-scatter-plot.js
@@ -46,6 +46,7 @@ export default function ConnectedScatter() {
       <TitleAndDescription
         title="Connected Scatterplot"
         description={chartDescription}
+        chartType="connectedScatter"
       />
 
       <Container>

diff --git a/src/pages/connection-map.js b/src/pages/connection-map.js
@@ -28,6 +28,7 @@ export default function ConnectionMap() {
       <TitleAndDescription
         title="Connection Map"
         description={chartDescription}
+        chartType="connection"
       />
 
       <Container>

diff --git a/src/pages/correlogram.js b/src/pages/correlogram.js
@@ -37,7 +37,11 @@ export const Head = () => (
 export default function Correlogram() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Correlogram" description={chartDescription} />
+      <TitleAndDescription
+        title="Correlogram"
+        description={chartDescription}
+        chartType="correlogram"
+      />
 
       <Container>
         <h2 id="Quick">&#9201; Quick start</h2>

diff --git a/src/pages/dendrogram.js b/src/pages/dendrogram.js
@@ -26,7 +26,11 @@ export const Head = () => (
 export default function Dendrogram() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Dendrogram" description={chartDescription} />
+      <TitleAndDescription
+        title="Dendrogram"
+        description={chartDescription}
+        chartType="dendrogram"
+      />
 
       <div className="greySection" id="related">
         <Container>

diff --git a/src/pages/donut-plot.js b/src/pages/donut-plot.js
@@ -44,7 +44,11 @@ export const Head = () => (
 export default function Donut() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Donut Plot" description={chartDescription} />
+      <TitleAndDescription
+        title="Donut Plot"
+        description={chartDescription}
+        chartType="donut"
+      />
 
       <Spacing />
 

diff --git a/src/pages/heatmap.js b/src/pages/heatmap.js
@@ -39,7 +39,11 @@ export const Head = () => (
 export default function Heatmap() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Heatmap" description={chartDescription} />
+      <TitleAndDescription
+        title="Heatmap"
+        description={chartDescription}
+        chartType="heatmap"
+      />
 
       <Container>
         <h2 id="Quick">&#9201; Quick start</h2>

diff --git a/src/pages/hexbin-map.js b/src/pages/hexbin-map.js
@@ -25,7 +25,11 @@ export const Head = () => (
 export default function HexbinMap() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Hexbin Map" description={chartDescription} />
+      <TitleAndDescription
+        title="Hexbin Map"
+        description={chartDescription}
+        chartType="hexbin"
+      />
 
       <Spacing />
 

diff --git a/src/pages/hierarchical-edge-bundling.js b/src/pages/hierarchical-edge-bundling.js
@@ -25,6 +25,7 @@ export default function Arc() {
       <TitleAndDescription
         title="Hierarchical Edge Bundling"
         description={chartDescription}
+        chartType="edgeBundling"
       />
 
       <div className="greySection" id="related">

diff --git a/src/pages/histogram.js b/src/pages/histogram.js
@@ -84,7 +84,11 @@ export const Head = () => (
 export default function Histogram() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Histogram" description={chartDescription} />
+      <TitleAndDescription
+        title="Histogram"
+        description={chartDescription}
+        chartType="histogram"
+      />
 
       <Container>
         <h2 id="Quick (Seaborn)">&#9201; Quick start (Seaborn)</h2>

diff --git a/src/pages/line-chart.js b/src/pages/line-chart.js
@@ -61,7 +61,11 @@ export const Head = () => (
 export default function LinePlot() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Line Chart" description={chartDescription} />
+      <TitleAndDescription
+        title="Line Chart"
+        description={chartDescription}
+        chartType="line"
+      />
 
       <Container>
         <h2 id="Quick">&#9201; Quick start</h2>

diff --git a/src/pages/lollipop-plot.js b/src/pages/lollipop-plot.js
@@ -43,6 +43,7 @@ export default function Lollipop() {
       <TitleAndDescription
         title="Lollipop plot"
         description={chartDescription}
+        chartType="lollipop"
       />
 
       <Container>

diff --git a/src/pages/map.js b/src/pages/map.js
@@ -29,6 +29,7 @@ export default function BackgroundMap() {
       <TitleAndDescription
         title="Background Map"
         description={chartDescription}
+        chartType="map"
       />
 
       <Spacing />

diff --git a/src/pages/network-chart.js b/src/pages/network-chart.js
@@ -27,6 +27,7 @@ export default function Network() {
       <TitleAndDescription
         title="Network chart"
         description={chartDescription}
+        chartType="network"
       />
 
       <Container>

diff --git a/src/pages/parallel-plot.js b/src/pages/parallel-plot.js
@@ -44,6 +44,7 @@ export default function Parallel() {
       <TitleAndDescription
         title="Parallel coordinate plot"
         description={chartDescription}
+        chartType="parallel"
       />
 
       <Container>

diff --git a/src/pages/pie-plot.js b/src/pages/pie-plot.js
@@ -38,7 +38,11 @@ export const Head = () => (
 export default function Pie() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Pie Plot" description={chartDescription} />
+      <TitleAndDescription
+        title="Pie Plot"
+        description={chartDescription}
+        chartType="pie"
+      />
 
       <Container>
         <h2 id="Quick">&#9201; Quick start</h2>

diff --git a/src/pages/python-colors.js b/src/pages/python-colors.js
@@ -50,6 +50,7 @@ export default function Colors() {
       <TitleAndDescription
         title="Dealing with colors in matplotlib"
         description={chartDescription}
+        chartType="colors"
       />
       {/* This section links to /available-colors-in-matplotlib */}
       <Container>

diff --git a/src/pages/radar-chart.js b/src/pages/radar-chart.js
@@ -53,7 +53,11 @@ export const Head = () => (
 export default function Radar() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Radar Chart" description={chartDescription} />
+      <TitleAndDescription
+        title="Radar Chart"
+        description={chartDescription}
+        chartType="radar"
+      />
 
       <div className="greySection" id="warning">
         <Container>

diff --git a/src/pages/ridgeline.js b/src/pages/ridgeline.js
@@ -29,6 +29,7 @@ export default function RidgelinePlot() {
       <TitleAndDescription
         title="Ridgeline chart"
         description={chartDescription}
+        chartType="ridgeline"
       />
 
       <Container>

diff --git a/src/pages/sankey-diagram.js b/src/pages/sankey-diagram.js
@@ -29,6 +29,7 @@ export default function Chord() {
       <TitleAndDescription
         title="Sankey diagram"
         description={chartDescription}
+        chartType="sankey"
       />
 
       <Container>

diff --git a/src/pages/scatter-plot.js b/src/pages/scatter-plot.js
@@ -77,7 +77,11 @@ export const Head = () => (
 export default function ScatterPlot() {
   return (
     <Layout isTocEnabled>
-      <TitleAndDescription title="Scatterplot" description={chartDescription} />
+      <TitleAndDescription
+        title="Scatterplot"
+        description={chartDescription}
+        chartType="scatter"
+      />
 
       <Container>
         <h2 id="Quick start">&#9201; Quick start (Seaborn)</h2>

diff --git a/src/pages/stacked-area-plot.js b/src/pages/stacked-area-plot.js
@@ -46,6 +46,7 @@ export default function StackedAreaPlot() {
       <TitleAndDescription
         title="Stacked area Chart"
         description={chartDescription}
+        chartType="stackedArea"
       />
 
       <Container>