content update for array computing ref #43

content/en/arraycomputing.md

@@ -2,5 +2,19 @@
 title: Array Computing
 sidebar: false
 ---
+
+*Array computing has become synonymous with large scale data manipulation.*
 
-TODO
+It is the foundation of statistical, mathematical, scientific computing and modern day data science analytics. Some real life examples of application of array computing include data visualization, digital signal processing, image processing, bioinformatics, machine learning and AI.
+
+*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.

layouts/partials/tabs.html

@@ -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="https://github.com/yhat/ggpy">ggplot</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="https://rougier.github.io/python-visualization-landscape/landscape-colors.png" alt="pyviz-visualization" align="left"></a> 
+                     </p>
+                  </div>
+               </div>
         </li>
 
         <li id="tab-new" class="cd-tabs__panel text-component">

static/css/tabs.css

@@ -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;
+}