Content update for visualization tab and array computing page

Reference: gh-43, which outlines the new website page structure

Author: shaloo

.DS_Store

@@ -3,4 +3,37 @@ title: Array Computing
 sidebar: false
 ---
 
-TODO
+*Array computing is the foundation of statistical, mathematical, scientific computing
+in various contemporary data science and analytics applications such as data
+visualization, digital signal processing, image processing, bioinformatics,
+machine learning, AI and several others.*
+       
+Large scale data manipulation and transformation depends on efficient,
+high-performance array computing. The language of choice for data analytics,
+machine learning and productive numerical computing is **Python.**
+
+**Num**erical **Py**thon or NumPy is its de-facto standard Python programming
+language library that supports large, multi-dimensional arrays and matrices,
+and comes with a vast collection of high-level mathematical functions to
+operate on these arrays.
+
+Since the launch of NumPy in 2006, Pandas appeared on the landscape in 2008,
+and it was not until a couple of years ago that several array computing
+libraries showed up in succession, crowding the array computing landscape.
+Many of these newer libraries mimic NumPy-like features and capabilites, and
+pack newer algorithms and features geared towards machine learning and artificial intelligence applications.
+
+<img
+  src="/images/content_images/array_c_landscape.png"
+  alt="arraycl"
+  title="Array Computing Landscape">
+
+**Array computing** is based on **arrays** data structures. *Arrays* are used
+to organize vast amounts of data such that related set of values can be easily
+sorted, searched, mathematically manipulated and transformed easily and quickly.
+
+Array computing is *unique* as it involves operating on the data array *at
+once*. What this means is that any array operation applies to an entire set of
+values in one shot.  This vectorized approach provides speed and simplicity by
+enabling programmers to code and operate on aggregates of data, without having
+to use loops of individual scalar operations.

content/en/arraycomputing.md

@@ -60,9 +60,47 @@ <h3 class="subtitle is-5 is-muted">{{ $subtitle }}</h3>
 
         <ul class="cd-tabs__panels">
         <li id="tab-inbox" class="cd-tabs__panel cd-tabs__panel--selected text-component">
-            <p>Visualization Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum recusandae rem animi accusamus quisquam reprehenderit sed voluptates, numquam, quibusdam velit dolores repellendus tempora corrupti accusantium obcaecati voluptate totam eveniet laboriosam?</p>
-
-            <p>Inbox Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum recusandae rem animi accusamus quisquam reprehenderit sed voluptates, numquam, quibusdam velit dolores repellendus tempora corrupti accusantium obcaecati voluptate totam eveniet laboriosam?</p>
+               <div class="grid-container">
+                  <div>
+                    <p>
+                     <div class="image-grid">
+                      
+                       <div><a href="https://www.fusioncharts.com/blog/best-python-data-visualization-libraries/"><img src="images/content_images/v_matplotlib.png" alt="visualization figure" align="middle" style="border-radius: 10px"></a></div>
+                       <div><a href="https://github.com/yhat/ggpy"><img src="images/content_images/v_ggpy.png" alt="visualization figure" align="middle" style="border-radius: 10px"></a></div>
+                       <div><a href="https://www.journaldev.com/19692/python-plotly-tutorial"><img src="images/content_images/v_plotly.png" alt="visualization figure" align="middle" style="border-radius: 10px"></a></div>
+                       <div><a href="https://altair-viz.github.io/gallery/streamgraph.html "><img src="images/content_images/v_altair.png" alt="visualization figure" align="middle" style="border-radius: 10px"></a></div>
+                       <div><a href="https://seaborn.pydata.org"><img src="images/content_images/v_seaborn.png" alt="visualization figure" align="middle" style="border-radius: 10px"></a></div>
+                       <div><a href="https://demo.bokeh.org/surface3d"><img src="images/content_images/v_bokeh.png" alt="visualization figure" align="middle" style="border-radius: 10px"></a></div>
+                       <div><a href="https://napari.org"><img src="images/content_images/v_napari.png" alt="visualization figure" align="middle" style="border-radius: 10px"></a></div>
+                       <div><a href="http://vispy.org/gallery.html"><img src="images/content_images/v_vispy.png" alt="visualization figure" align="middle" style="border-radius: 10px"></a></div>
+
+                     </div> 
+                    </p>
+                  </div>
+                  <div>
+                     <p>
+                     </p>
+                     <p>
+                       <a href="https://www.slideshare.net/Visage/data-visualization-101-how-to-design-chartsandgraphs">Data Visualization</a> exposes patterns, trends and correlations in textual-data, making it easier for humans to analyse and interpret large volumes of data. 
+                     </p>
+                     <p>
+                       <a href="https://python-graph-gallery.com">Visualization elements</a> such as bar graphs, pie charts, line charts, maps, infographics, dashboards, geographic maps, heatmaps, and interactive images offer valuable insights for making data-driven decisions.
+                     </p>
+                  </div>
+                  <div>
+                     <p>
+                       NumPy is the key data transformation building block for the burgeoning <a href="https://pyviz.org/overviews/index.html">Python visualization landscape</a> comprising of <a href="https://matplotlib.org">Matplotlib</a>, <a href="https://seaborn.pydata.org">Seaborn</a>, <a href="https://plot.ly">Plotly</a>, <a href="https://altair-viz.github.io">Altair</a>, <a href="https://docs.bokeh.org/en/latest/">Bokeh</a>, <a href="http://holoviz.org">Holoviz</a>, <a href="http://vispy.org">Vispy</a> and <a href="https://github.com/napari/napari">Napari</a>, to name a few. 
+                     </p>
+                     <p>
+                       By performing parallel operations on large arrays, all at once, NumPy accelerates data-processing and visualization of large quantities of data, beyond Python's native performance levels, for data visualization at scale.
+                     </p>
+                  </div>
+                  <div>
+                     <p>
+                       <a href="https://rougier.github.io/python-visualization-landscape/landscape-colors.png"><img src="images/content_images/vis-landscape.png" alt="pyviz-visualization" align="left"></a> 
+                     </p>
+                  </div>
+               </div>
         </li>
 
         <li id="tab-new" class="cd-tabs__panel text-component">

layouts/partials/tabs.html

@@ -605,4 +605,29 @@
     100% {
         opacity: 1
     }
-}
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: auto auto ;
+  grid-gap: 20px;
+}
+
+.grid-container > div {
+  background-color: rgba(255, 255, 255, 0.8);
+  text-align: middle;
+}
+
+.image-grid {
+  display: grid;
+  grid-template-columns: auto auto auto auto;
+  grid-gap: 10px;
+}
+
+
+.image-grid > div {
+  background-color: light gray;
+  border: 2px solid #f4f4e9;
+  border-radius: 10px;
+  padding: 10px;
+}